Here is the code that i have been working on. Apparently the #layout call is executed first for some reason and it gives undefined as the value.
$(function() {
$(".left").load("PartsList.php", function() {
alert("success");
});
$(".right").load("Custom.php", function() {
alert("success");
});
$("#layout").children().on({
click: function() {
alert($(this).attr('id'));
}
});
});
Thank you for your time :).
That's because .load() is called asynchronously.
You may bind with
$("#layout").on({
click: function() {
alert($(this).attr('id'));
}
}, '.left,.right');
instead
Related
I'm trying to use Jquery to call an ajax function, which updates an MySQL database. I have several other Ajax requests in the same file and they work fine. For some reason the getinvoices value is not being passed to the PHP file. I'm calling the function on click of a button, below is the code I'm using.
Javascript
$( "#updatexero" ).button().on( "click", function(event) {
$.ajax({
type:'post',
url: 'invoices.php',
data: { getinvoices: 1 },
success: function(){
$( "#sql-confirm" ).dialog({
modal: true,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
}
});
}
});
});
PHP - invoices.php
if ( isset($_REQUEST['getinvoices'])) {
//Code to do stuff
}
If I do echo $_POST['getinvoices'];, it says undefined index, as no value has been passed. I can't see why this shouldn't work, what am I doing wrong?
Edit: I have solved the issue now, the problem was another if statement in invoices.php that wasn't getting called, so nothing to do with the Ajax query. The firebug extension proved handy for debugging though.
Your code is correctly written.
I adopted your code "as is" and put it on my own server.
In invoices.php I simply put:
<?php
print_r( $_POST );
?>
This is the result I got when checking in the debug console:
I would advise you to use this debug console to check your AJAX request. It's included in both Chrome and FireFox. In chrome you need to install the extension Firebug Lite however.
You'll see in my picture that getinvoices is both included in the AJAX post and received by the invoices.php script.
The debug console will also alert you if there is a syntax error in your JavaScript code.
However.. you can change the following code:
$( "#updatexero" ).button().on( "click", function(event) {
to
$("#updatexero").click(function(event){
Try this:
$( "#updatexero" ).on( "click", function(event) {
$.ajax({
type:'post',
url: 'invoices.php',
data: { getinvoices: 1 },
success: function(){
$( "#sql-confirm" ).dialog({
modal: true,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
}
});
}
});
});
You have syntax error in your code .
Remove .button() as it does not match the syntax here.
Try below code :-
$("#updatexero").on("click", function(event) {
//// Your code.
});
For more information check out below link :-
http://api.jquery.com/on/
Hi I have searched the web but can't get this to work. I'm trying to call the file databaseUpdated.php (placed in the same folder as the index.php file) from a function that is called every 10 seconds.
If I place the following in the index.php
<script type='text/javascript'>updateboolean();</script>;
the function is runned so thats not the problem, the problem is that the php file is not read.
the file databaseUpdated.php
<body>
<?php
echo ("<script type='text/javascript'>updateboolean();</script>;");
?>
</body>
And here is my functions in the javascript
$(document).ready(function(){
setInterval(function() {
$.get("databaseUpdated.php");//Can't get this to work any obvious reason for this (And yes I have jquery working)?
return false;
}, 10000);
});
function updateboolean(){
alert("Database updated");
document.location.reload(true);
}
Thanks in advance =)
Edit
_________________________________________________________________________________________
When I do
alert(data); in the below function I get the result as the image will show
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert('Load was performed.');
alert(data);
eval(data);
});
}, 5000);
});
But the "eval(data)"
doesn't seem to work
$.get("databaseUpdated.php"); // This will only return contents of that file The scripts in that file are not executed. To execute them you need to do eval(). So Try This
$.get('databaseUpdated.php', function(data) {
eval(data);
});
Also, may be you will require to change your php file as following:
echo ("updateboolean();");
where is your callback function for ajax
this is how it should be
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert('Load was performed.');
});
}, 10000);
});
Try this:
$(document).ready(function(){
setInterval(function() {
$.get('databaseUpdated.php', function(data) {
alert("Database updated");
// or alert(data); //in case you return data from php
document.location.reload(true);
});
}, 10000);
});
By doing $.get("databaseUpdated.php"), you request the PHP page, but ignore the return results.
Try this:
PHP
echo "updateboolean();";
JavaScript:
$.getScript("databaseUpdated.php");
try this in place of your echo
echo "<script>updateboolean();</script>";
A bit of a tricky one here
Is there a way i can join the two scripts below into one so when the form is posted it actually loads both the different named url's into the 2 different named divs
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/edit-profile-top.php', $("#profile").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/welcome-menu.php', $("#profile").serialize(), function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
I am not sure if this is even possible but would be great if it was :)
Many thanks
Just put the contents of the second submitHandler into the first one:
submitHandler: function(form) {
var jqxhr1 = $.post('brides_Includes/edit-profile-top.php', $("#prof...
function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
});
}
var jqxhr2 = $.post('brides_Includes/welcome-menu.php', $("#pro...
function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$.when(jqxhr1, jqhxr2).done(function() { $("#profile")[0].reset(); });
}
<script>
function ajax_loadpage(loadUrl,output_container)
{
$.post
(
loadUrl,
{language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
);
}
ajax_loadpage("url1.php","#div1");
ajax_loadpage("url2.php","#div2");
</script>
the first parameter should be supplied with the URL you want to load, the second will be the name of the id of the element you want to load it into.
I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});
I'm trying to implement the Jquery .ajax method to simplify the ajax in my website.
Here is the function I'm working with:
function autoComplete(q, succ)
{
$.ajax({type:"GET",
url: "search.php",
data: "q="+q,
success: succ
});
}
$('input#auto_results').live('keyup', function() {
var text = $('input#auto_results').val();
autoComplete(text,
function(data)
{
alert(data);
});
});
The response on the PHP page is simply:
echo "response";
So I figure that it should alert the response when the function is called, on 'keyup'.
Sadly, nothing occurs. I must be doing something wrong, I am just not sure what it is.
is "keyup" event firing?
do following.
$('input#auto_results').live('keyup', function() {
var text = $('input#auto_results').val();
alert("Keyup event is firing");
autoComplete(text,
function(data)
{
alert(data);
});
});
if event is firing. then see firebug console tab
or put error function callback on your code:
function autoComplete(q, succ)
{
$.ajax({type:"GET",
url: "search.php",
data: "q="+q,
error:function(request, textStatus, err){
alert(request.statusText);
},
success: succ
});
}
you may get near to error.