My problem is that when I call a jquery function, nothing happens or I have an error.
I also saw with firebug that nothing is called when I press my button that calls it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]">
<?php // Encodé en UTF-8 (sans BOM)
require('basedonnee.php');
$BD = new basedonnee();
session_start();
?>
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>
<title>un titre</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="whirlpool.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
function changeMonth(place,nomois)
{
$j=jQuery.noConflict();
document.getElementById("mois").value = nomois+place
$j(document).get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
}
</script>
</head>
This is the beginning of my index.php
My changemonth function is called, I checked. But my .get doesn't work and my getCalendrier.php is never called.
Does someone have an idea to solve my problem?
thanks
Try changing $j(document) to just $j before .get:
$j.get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
jQuery.get isn't a method of a jQuery collection, it's a (so-to-say) "static" function on the jQuery global (similar to jQuery.noConflict).
Also, Make sure the current page and getCalendrier.php are in the same directory since the URL given is relative to the current URL.
And, to help you with debugging Ajax in your project, most browsers have developer tools with "Network" watching included. Firefox has Firebug, Google Chrome and Safari have it built-in, etc.
function changeMonth(place,nomois)
{
$j=jQuery.noConflict();
document.getElementById("mois").value = nomois+place;
$j(document).get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
}
You missed a ; after nomois+place
you' re missing a ; here:
document.getElementById("mois").value = nomois+place
should be
document.getElementById("#mois").value = nomois+place;
additionally you're missing # id tags when getting an element by id
Related
I'm trying to get the data value on success from the php. However when I alert(data) in the success, it returns the page html.
HTML:
<input type="text" class="form-control" name="project_name" id="projectName" required>
Jquery AJAX:
$('#projectName').on('blur', function(){
var projectName = $(this).val();
$.ajax({
url: 'page.php',
type: 'POST',
dataType: 'text',
data: {
'projectChecked': 1,
'project_name': projectName,
},
success: function(data){
if (data == 'taken') {
$('#projectName').addClass('border-red');
}
}
});
});
PHP:
if(isset($_POST['projectChecked'])){
echo 'taken';
exit;
}
Alert Message:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="/favicon.png"/>
<title>Page Title</title>
<meta name="description" content="Meta Description">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlTw8HfCJo=" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-157194354-1"></script>
You should use exit in php code to get return data use following code
if(isset($_POST['projectChecked'])){
echo 'taken';
exit;
}
can you check the html code when you do alert(data); and post here?
alternatively, you might want to check the developer tools of browser and validate network tab to monitor parameters and response of ajax request.
It is possible that you are getting http 400/500 response and you are actually seeing default error page (which is of course not a JSON response) in the data variable (this depends on the way server is configured)
Cannot run my select event without reloading entire page even though in php format.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href = "style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "home.js"></script>
<title>Javascript on Steroids</title>
</head>
<body>
<select id = "purchaseId" >
<option value="1" selected >1</option>
<option value="2">2</option>
</select>
</body>
</html>
Hello , Cannot run my select event without reloading entire page even though in php format.
$myobject = document.getElementById("purchaseType");
$myobject.addEventListener("change",function(){
alert("tt");
})
use this in script
myobject = document.getElementById("purchaseId");
myobject.addEventListener("change",function(){
alert("tt");
})
Your select id is not equal to the id you're calling in your script.
Furthermore you can change your code to this:
$("#purchaseId").change(function() {
alert('tt')
});
Here's a fiddle.
https://jsfiddle.net/Lnroksgz/
need to include this before the script only able to trigger
$(document).ready(function(){
// your code
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need some help with this datepickerthat i'll be using in my school project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' id="datepicker"></p>
</body>
</html>
I want to create another datepicker since my project is a hotel reservation. Check in and Check out dates. But in check out this happens.
You could use a class instead of an id to define the date inputs :
i.e. :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' class="datepicker" id="start_date"></p>
<p>Date: <input type="text" name='cout' class="datepicker" id="end_date"></p>
</body>
</html>
Hope it helps.
Try this :
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
<script>
$( function() {
$( "#datepicker1,#datepicker2" ).datepicker();
} );
</script>
I agree with Adrien Leber that a class could be easier once you have multiple datepickers. I think you need to use .each() though.
$(function() {
$(".datepicker").each(function(i, val) {
$(this).datepicker();
});
});
I have been trying to save tinymce editor textarea content to a .txt file for a while but without success yet.
This is my html file code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TinyMCE example</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>test tinymce save</h1>
</header>
<nav>
</nav>
<section>
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Now test.php
<?php
/*
* test.php
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test tiny mce</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
</head>
<body>
<?php
echo(stripslashes($_POST['content']));
?>
<?php
$file = "data.txt";
$fp = fopen($file, 'w');
$data =(stripslashes($_POST['content']));
fwrite($fp, $data);
fclose($fp);
?>
</body>
</html>
I'm grateful for helpful replies to fix this-many thanks :-)
Update
Following the first answer below I have added triggerSave as:
<script language="Javascript">
function submitForm() {
tinyMCE.triggerSave();
document.forms[0].submit();
}
</script>
and
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<!--<input type="submit" value="Save" />-->
Submit Form
</p>
but still no success...More help gratefully received
UPDATE 2
Here is my jQuery TinyMCE version:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample WebPage</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson-see sitepoint etc">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<!-- Load jQuery build -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Enter the main heading, usually the same as the title.</h1>
</header>
<nav>
</nav>
<section>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
The question itself comes down to :
How to save HTML content of TinyMCE into a file.
Well, first of all, you need:
1) Get content of editor
2) Send this content to PHP script
3) Implement some function that would save that content into a file
Getting content
Make sure you are getting it the way it should work.
For example,
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('SubmitBtn');
btn.onclick = function(){
//This MUST alert HTML content of editor.
alert( tinyMCE.activeEditor.getContent() );
}
}
</script>
<input type="button" id="SubmitBtn" value="Get HTML content"/>
Sending content to PHP script
All you need to do is to send value of the method tinyMCE.activeEditor.getContent() to PHP script.
Well, you should use Jquery-AJAX for that.
Assume that you included jquery.js into script tag in the head section, the next step would be sending JavaScript variable to PHP script
It would be similar to this one:
<script type="text/javascript">
$(function(){
var url = "path_to_your_php_script.php";
$("#SomeSubmitButton").click(function(){
//"content" will PHP variable
$.post(url, { "content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
});
</script>
PHP script
Since we were sending "content" this one will be populated in $_POST superglobal
<?php
if ( isset($_POST['content']) ){
//This is what you want - HTML content from tinyMCE
//just treat this a string
if ( save_html_to_file($_POST['content'], '/some_file.html') ){
//Print 1 and exit script
die(1);
} else {
die('Couldnt write to stream');
}
}
/**
*
* #param string $content HTML content from TinyMCE editor
* #param string $path File you want to write into
* #return boolean TRUE on success
*/
function save_html_to_file($content, $path){
return (bool) file_put_contents($path, $content);
}
So after execution this you should get back alert with message of success.
You should update your TinyMCE instances before submitting your form. Use this javascript:
tinyMCE.triggerSave();
I usually put this in a function and call it on onsubmit event of form.
There is already different questions around this topic in Stackoverflow.
I have some third party javascript code
<SCRIPT language="JavaScript" SRC="http://some-videos.com/addbutton.cfm?ID=20415454598212"></SCRIPT>
When this code is added in html file it shows one play button, now i want that if user clicks on any button one function should be called and that function will load this js code. I have tried .load, .getScript, .ajax but nothing is working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript">
function loadVideo()
{
$('#videoButton').load("http://some-videos.com/addbutton.cfm?ID=20415454598212");
}
</script>
</head>
<body>
<div id="videoButton"></div>
<input type="button" value="Load Video Button" onclick="loadVideo();" />
<br /><br />
Below code shows one play button, that is generated through included javascript file.
<SCRIPT language="JavaScript" SRC="http://some-videos.com/addbutton.cfm?ID=20415454598212"></SCRIPT>
<!-- I have added dummy Url -->
</body>
</html>
function myFunction()
{
$('head').append($('<script type="text/javascript" src="http://some-videos.com/addbutton.cfm?ID=20415454598212"></script>'));
}
I suppose using jQuery. This way will be external Javascript loaded on demand.