I have finished a facebook app that uses php and ajax to get statisicts about friends and find best match. The app is using tabs and is working fine, however sometimes when I click on one tab to send ajax request and loading icon shows I do not get any response back and the loading icon keeps showing. Is there a way that I can count how many seconds an ajax call is taking so I redirect the user to an altertanive html page after x number of seconds?
To achieve what you'd like to obtain, you could call (after X seconds, using setTimeout()) a function that checks if the ajax response has been loaded.
For example:
var responseLoaded = false;
function checkIt(){
if(!responseLoaded)
window.location = "%http://alternative-page%";
}
setTimeout(checkIt,10000) //after 10 seconds
responseLoaded could be a global variable that can be set to true at the end of the ajax response.
Or, alternatively, you could check if some DOM element or JS var is present (i.e. created by AJAX call) at that time (when the function has been called through setTimeout)
Then, You could use
Date.getTime()
To obtain the current timestamp. You can compare the timestamp at the beginning with the one at the end of the ajax response to see the total time it takes. (just if you want to check the average ajax loading time)
Another option would be to set the timeout parameter of the of the xmlhttprequest object. In jQuery it's the timeout option in the options object.
$.ajax ({
timeout: 1000,
success: successCallback,
error: function (req, error, errorStatus) {
if (error == 'timeout') {
//send them to other page....
}
}
});
You would probably want to put in some more error handlers though... also, since the xmlhttpobject2 has on timeout function callback, this process might be more streamlined now...
Don't quote me exactly on the syntax either. I'm writing this on my phone from memory....
Related
I've made a searchbox in PHP, wherein as the user types in the search string, an autosuggestion div appears and shows search results.I have been successful in achieving the end result, but there is an issue:
Since I'm calling the AJAX on every keystroke, I am not able to type anything in running, since every keydown first waits the ajax request to get completed, hence blocking any further keydown. So I first type a character,have to wait for search results and then type another character. No one wants to wait this long.
I can think of an alternative in which I have to prefetch all the possible search result, like in this example:
http://jqueryui.com/autocomplete/
But this won't be a good solution in my case as I want to load search result from the server at the time of keypress only.(Of course that's how even Google search works).
Is there any way I can make the keystrokes independent of AJAX and still let AJAX do it's own thing without blocking my keyboard input?
If you don't want you're user being forced to wait for the return of the ajax call after each keystrokes before being able to type another letter, you'll need to abort the ajax call onkeydown.
One way of doing so is to check if the ajax request isRunning if it is abort it and run a new one with the new query.
if(xhrRunning)
xhr.abort(); //kill the request
xhrRunning = true;
xhr = $.ajax({
type: "POST",
url: "suggestion.php",
data: "q="+var,
success: function(msg){
xhrRunning = false;
//Do you're treatement
}
});
PS : Make sure that in you're code async is not set to false if set to false synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
I have an issue here: I am creating a project that involves planning. A user plans a specific program for a particular time and submit into the database, MySQL, using PHP.
I want the system to raise an alert when the time planned has reached or when it is a few minutes to the time.
Something like
if ($selectedDate==CURDATE() $$ selectedTime==CURTIME()){
// some ajax to provide popup
}
I will appreciate useful help. Thank you.
You will need to create a global variable to store your list of events, not sure what type you would want to use. You will fill the variable from an ajax call (so you can do it on every page of your app), and then iterate over the events to prompt the user.
On page load, you will want to grab the events from your database.
$(function()
{
retrieveEvents();
promptEvents();
});
Create a function that can be called to get the events, and store them to a global variable.
function retrieveEvents()
{
// Make ajax call to get all events
// Wait 1 minute, calls the function again to get new events
setTimeout( "retrieveEvents()" , 60000 ); //60000 = 1 minute
}
You will then want a function to then prompt the events
function promptEvents()
{
// At this point you will iterate the global variable of events
// You can check if the event is 2 minutes away, or 5 seconds away
// In those cases, you would then show a modal or alert box.
// Wait 5 seconds, call this method again
setTimeout( "promptEvents()" , 5000 ); //5000 = 5 seconds
}
You could try to run a repeating ajax call (using javascript setTimeout) and on your second page run a query on the database to retrieve their stored "plan time" and test against current time. If it is nearing (e.g. 2 minutes away or something) then your ajax call will return a warning.
Use javascript's setInterval function to check whether the time is closer. Example:
setInterval(function() {
// ajax request and alert action goes here
}, 1000);
The ajax check in the above example will execute in every 1 second (1000 milliseconds). You can change the interval as you like, say 5000 (5 seconds).
I have constructed a PHP file which scrapes a web page (using cURL) to obtain some data, and outputs it to the screen in JSON format.
The target website involves some redirects which temporarily outputs data to my PHP file. Once the redirects have completed successfully, the JSON is presented as expected. The problem that I am encountering is that when I try to access the JSON using jQuery's $.ajax() method, it sometimes returns the incorrect data, because it isn't waiting for the redirects to complete.
My question is if it's possible to tell the AJAX request to wait a certain number of seconds before returning the data, thus allowing time for the redirects in the PHP script to execute successfully?
Please note that there is no cleaner solution for the page scrape, the redirects are essential and have to be outputted to the screen for the scraping to complete.
There's always timeout in the settings.
jQuery docs:
timeout Number
Set a timeout (in milliseconds) for the request. This will
override any global timeout set with $.ajaxSetup().
The timeout period starts at the point the $.ajax call is made;
if several other requests are in progress and the browser
has no connections available, it is possible for a request
to time out before it can be sent. In jQuery 1.4.x and below,
the XMLHttpRequest object will be in an invalid state if
the request times out; accessing any object members may
throw an exception. In Firefox 3.0+ only, script and JSONP
requests cannot be cancelled by a timeout; the script will
run even if it arrives after the timeout period.
You should use promise() in jQuery.
You could always store the result of your ajax call and then wait for the redirects to finsih, i.e.:
$.ajax({
success: function(e)
{
var wait = setTimeout(function(){ doSomethingWithData(e.data); }, 5000); //5 sec
}
})
Alternatively, you could set up an Interval to check if something happened (redirect finished) every x amount of ms. I'm assuming your redirects are letting you know they completed?
http://examples.hmp.is.it/ajaxProgressUpdater/
$i=0;
while (true)
{
if (self::$driver->executeScript("return $.active == 0")) {
break;
}
if($i == 20) {
break;
}
$i++;`enter code here`
echo $i;
usleep(10000);
}
I have an application that rates a large set of items and outputs a score for each one.
In my php script I'm using ob_start and ob_flush to handle the output of data for each rating. This works great if I directly load the script. But when I try to use .get via jquery, the entire content loads and then is placed into a container, instead of incrementally adding.
I'm wondering the following
Is there a way to initiate data placement before the get has completed?
Do I need to continually poll the script until the process is complete?
Is there a more efficient way to display the data instead of get?
For this kind of problems, I will have this approach:
Keep the old script that using ob_start() and ob_flush() for a user that disable javascript in their browser.
For a user that have javascript enable, load the predefined number content one at a time. To differentiate between js enable user and not, I'm thinking of 2 page. In first page you display a link to old script. Then put a jquery code in this page to intercept click on the link to old script, so click on that link will display (or create) a div, then load the content into that div.
You can use a setTimeout to call AJAX code continuously, then after a certain condition reached (Ex, empty response), you can remove the setTimeout using clearTimeout. Each AJAX request will need to have an offset param, so it will fetch content from last AJAX call. After receive response, increment the offset for the next AJAX call. You can use global variable for this.
You can use a simple global variable to prevent an AJAX request run while the last AJAX still waiting response, to prevent race condition. Example code:
//lock variable
var is_running = FALSE;
//offset start with 0
var offset = 0;
function load_content($) {
//check lock
if (! is_running) {
//lock
is_running = true;
//do AJAX
$.get(URL,
{ PARAM },
function(resp){
//put data to 'div'
//...
//if empty, then call clearTimeout
//...
//increase offset here
offset = offset + NUM_ITEM_FETCHED
//release lock
is_running = false;
});
}
}
The point you must pay attention that using AJAX call, you must determine the response manually, since ob_start and ob_flush will have no effect in this scenario.
I hope this will help you create your own code.
Jquery will receive a success status from the ajax call when the complete page has finished loading .. so whatever you do in the php will not get returned to the calling page until the whole process has finished .. (ajax is a one-send/one-receive system)
You would need to complicate your system to do what you want..
example..
your php updates an external file of progress, and your jquery polls this file in some interval and displays progress..
You would initiate the interval polling on ajax submit, and on ajax success terminate it..
I had a similar problem awhile back where I wanted a php script to send a series of emails and update the jquery page to say something like "Sending 23/50".
What I ended up doing was setting up the php script to handle one item at a time. This might also work in your case. Could you have jquery pass an item identifier of some sort to a php script that handles just that one item? Then in the callback, you could place the data for that item in the page as well as creating a new ajax request for the next item. In other words, each callback would create a new request for the next item until the entire list of items has been looped through.
What do you think?
-DLH
I have a search textbox where upon a keypress an AJAX call is made to return search results for the entered text. This results in an AJAX call being made for every single keypress.
For example if I type in airport:
I get 7 ajax requests each searching for a, ai, air, airp, airpo, airpor, airport respectively - however the problem is that they might all start one after the other but don't necessarily end in the same order so more often than not I receive results in the wrong order i.e I might have written airport and received the result for airport only to receive the result for airpo later on.
How do I handle this in jQuery here?
Update:
There is a timer delay of 3 seconds - but the issue is in ensuring that when one AJAX request is made, another Request when made cancels out the previous request and so forth.
How could I do this in code?
Fire the ajax call on a delay - use this in conjunction with the abort() code above:
var typeDelay = function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
}
}();
$("#searchField").keypress(function(){
typeDelay(function(){
// your ajax search here, with a 300 ms delay...
}, 300);
});
Sending a lookup request at every keystroke is generally a bad idea - I'd suggest instead that you send at short intervals (ie. send the textbox value every 3 seconds or so).
Further, to prevent the asynchronous returns, you could have a flag to keep track of a request's state, so that only 1 can be active at any one time (eg. set on send, cleared on return). This would effectively render your lookups synchronous.
EDIT: Added sample code
var req = null;
function sendRequest (text)
{
// Check for pending request & cancel it
if (req) req.abort ();
req = $.ajax ({
// various options..
success: function (data)
{
// Process data
...
// reset request
req = null;
}
});
}
You can cancel AJAX requests:
var x = $.ajax({
...
});
x.abort()
So if you want to send a new request before the previous one has returned, abort() the first one.
Build an "ajax queue" in jquery... use it to ensure your requests go in order. The below address has a great example near the bottom:
AJAX Streamlining techniques?
Extend the functionality of these queue, to handle Delay and Abort mechanics like the answers above.
If another request is submitted to the queue before the delay is over, abort the queued request.
Suggestion: add the functionality of delay and abort mechanics properly to the queue so that the values can be requested when you post a request to the queue, like params, that way your queue plugin remains reusable outside this need.