My AJAX calls from a page I wrote is hanging after an indeterminate number of calls. The page makes a request after a preset amount of time (currently 5 seconds) gets data from my server then waits the amount of time again. When I put the following as my AJAX Request:
myAjax = new Ajax.Request(
url,
{
method: 'get',
asynchronous: true,
url: url,
parameters: querystring,
onInteractive: document.getElementById('meh').innerHTML='Interactive',
onSuccess: processXML
});
The div with the id "meh" will get the word Interactive written to it, but the Success condition never gets executed (same if onSuccess is replaced with onComplete).
So why is my code doing this? Thanks.
Shouldn't the onInteractive event handler be a reference to a function?
as pb said, shouldn't it be
onInteractive: function(){
document.getElementById('meh').innerHTML='Interactive'
}
Related
I have an ajax request as follows:
jQuery.ajax({
type: 'GET',
url: '/logical_interface/delete',
context: this, // had to add this to get the line in the success function to work, never used it before nor do I understand why it works
data: 'id=' + id,
beforeSend: function() {
// jQuery(this).parent().html('processing...');
// if this line is uncommented then the DOM will be updated correctly
// but the snippet in the success function won't fire but the delete
// is still executed on the server side
// the page is then stuck with the 'processing' text
},
success: function(data) {
jQuery(this).closest('tr').stop().animate({ backgroundColor: '#ffc6be' }, 'fast').hide('slow');
}
});
Update
Server side code is simply the following Rails method:
def delete
#logical_interface = LogicalInterface.find(params[:id])
#logical_interface.destroy
render :text => '1' // which is what I get in console.log
end
As mentioned in comments, the reason your success may not work is because you deleted the $(this) node.
What you are doing in your beforeSend function is going up one level and replacing ALL HTML with "processing...". This in turn deleted your reference point jQuery(this) from the DOM before the success case is reached. if jQuery(this) is removed then nothing happens (obvious).
Instead of overwriting the entire html with Processing, may i suggest you have a single element hidden until you trigger the ajax and show it beforeSend and hide it with the complete function.
I use jquery to make an ajax request every 15 seconds to update a <DIV> Element with information. That works generally fine but after some minutes, when the ajax request runs a few times, I got browser performance issues. I only need to run the page in firefox, but here is the problem most of all.
This is the way I call the function every 15 sec.:
setInterval(syncdiv, 15000);
This is my ajax request:
function syncdiv() {
$.ajax({
url: 'code_get_msg_sync.php?',
cache: false, // The problem exist with cache true even with false
success: function(data) {
$('#msgdiv').html(data);
}
});
}
Try using
e.preventDefault();
before you submit or click to send a ajax request ..Just a try
Also there are few links for reference
Link 1
Link 2
Link 3
I am new to jQuery and want to use it to retrieve data from a server every 3 seconds. The web server sends data every 3 seconds in JSON format. The JSON data contains a numerical array field { "samples" : [10,15,-7,19,34,...] }. I wrote the following jQuery ajax request to retrieve data from the server every 3 seconds:
function getData() {
$.ajax({
url : 'http://example.com',
type: 'GET',
success : function(data) {
myData = data.samples;
setTimeout(getData, 3000);
},
dataType : 'json'
});
return myData;
}
However, due to timing jitter, the data sent from the server may not get updated precisely at every 3 seconds. So how should I write the jQuery ajax request to avoid the possible data discontinuity? That is, I want the returned myData contains all fresh new data array elements from each getData() call and does not contain duplicated or missing data samples due to possible timing jitter.
Send the last timestamp that the data was updated on the server along with the other JSON array. Then, when it is time to request data again using your jQuery call, check the timestamp against what you already have. This will give you a way to know if it is the same data, or if it has been refreshed.
I think you may need pass around more info. Include another field in your AJAX called "lastUpdate" with a timestamp. Your javascript can save the last timestamp it got and provide it to the server. The server responds only with samples after that timestamp (so you don't miss any) and won't respond with anything if its still up to date (so you don't duplicate).
There's little point returning myData. (a) the variable is not declared within the function, and (b) the data arrives asynchronously from the server.
As it stands, getData() is guaranteed (at best) to return the data obtained at the previous iteration.
To work with the freshly obtained data, you need to do whatever is necessary with myData within the success function or in a done() callback, as follows :
function getData() {
$.ajax({
url: 'http://example.com',
type: 'GET',
dataType : 'json'
}).done(function(data) {
var myData = data.samples;
//Do whatever is necessary with myData here.
//Call extenal function as necessary to do the job.
setTimeout(getData, 3000);
});
}
Write your code in such a way that takes advantage of the asynchronous nature of ajax. For example,
var interval;
function handleData(data) {
// I handle the data returned from the ajax request.
console.log(data);
}
function getData() {
// I send the ajax request.
$.ajax({
url: 'http://example.com',
success: handleData,
error: function(){
// on error, stop making requests to help with debugging.
console.log(arguments);
clearInterval(interval);
}
});
}
interval = setInterval(getData,3000);
This will result that in most cases, the responses will come in order. You can make that true in all cases if you get rid of the interval and instead call get data 3 seconds after the previous success.
function getData() {
// I send the ajax request.
$.ajax({
url: 'http://example.com',
success: handleData,
error: function(){
// on error, stop making requests to help with debugging.
console.log(arguments);
}
});
}
function handleData(data) {
// I handle the data returned from the ajax request.
console.log(data);
setTimeout(getData,3000);
}
getData();
Side note: the "timing jitter" isn't a jitter at all, it's simply a logic error. The data is always one set behind due to Ajax being Asynchronous.
guys. I have a juerymobile multi-page, and I have a button in #page-index, when click it, will send a ajax request to server, and changepage to #page-column, It run will in PC, but when i deploy the multi-page in phonegap, the button click can just run only twice, code is below:
function test()
{
$.mobile.changePage('#page_column');
$.ajax({
url: "http://192.168.168.120:8090/fcmobile/getTest",
dataType: "json"
}).done(function(data) {
alert(data.content);
});
}
I found if I remove $.mobile.changePage('#page_column');, the ajax request can be run well any times. but when I add the changePage code, it only can be run twice, in third time, ajax request can't even be send. Dose anybody know reason?
AJAX is made to be asynchronous, so no need to set async to false to get it working. Use events instead.
For example:
function test () {
$.ajax({
'url': "http://192.168.168.120:8090/fcmobile/getTest",
'dataType': 'json',
'success': function (json_data) {
$(document).trigger('test_json_data_loaded');
console.log(data);
}
});
}
$(document).on('test_json_data_loaded', function () {
$.mobile.changePage('#page_column');
});
When you set async to false, you're basically making it so that every time this AJAX request is made, the user will have to wait until all the data is fully loaded before the application/website can do/execute anything else...not good.
I have an ajax call to one php script via jquery but it takes a lot of time to return results , So I would like to know how can I display results as its are being printed on my script. here just example of my php script:
<?php
// process.php
for($i = 0; $i <= 4; $i++){
echo json_encode(array("name" => $i) );
sleep(2); // this sleeps for 2 seconds
}
?>
Now with my jquery i am calling that page and have a form with id ajaxquery on page:
$("#ajaxquery").live( "submit" , function(){
var formdata = $(this).serialize();
$.ajax
({
type: "POST",
url: "process.php",
data: formdata,
dataType: "json",
success: function(data)
{
$("#success").html(data.name);
}
});
return false;
});
now this will output all results at same time after few seconds in div#success but how can i achieve it print that echo statements as soon process.php process it and then again wait 2 seconds and add next result in div success. thanks for any help.
You will have to setup a javascript timer on the client and call you php script every two seconds to get the new data. That data you can append for example with the jquery .append function.
The success function is called only when the $.ajax function gets a successful response from the server and that happens only when the PHP script finishes it's execution. You must change your logic, for example by making another ajax call after the first one finishes that "resume" the work server side