I am trying to delay an AJAX request so that it is sent out 2-3 seconds after the LAST keyup of an input cell.
So far I have managed to delay the requests, but after 2-3 seconds I get one request sent for every keyup in the field...
How can I make jQuery cancel the first ones and just send the last keyup?
Here's the code so far:
$('#lastname').focus(function(){
$('.terms :input').val(""); //clears other search fields
}).keyup(function(){
caps(this); //another function that capitalizes the field
$type = $(this).attr("id"); // just passing the type of desired search to the php file
setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 1000);
});
This code above, waits 1 sec then sends 4-5 AJAX requests depending on keypresses.
I just want one sent after the last keyup
I have found some similar solutions in StackOverflow that use Javascript, but I have not been able to implement them to my project due to my small knowledge of programming.
[SOLVED]
Final working code, thanks to #Dr.Molle:
$('#lastname').focus(function(){
$('.terms :input').val("");
}).keyup(function(){
caps(this);
$type = $(this).attr("id");
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);
}).keydown(function(){clearTimeout(window.timer);});
Here's the ajaxSearchRequest code:
function ajaxSearchRequest($type){
var ajaxRequest2; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest2 = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Browser error!");
return false;
}
}
}
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest2.readyState == 4){
$result = ajaxRequest2.responseText;
$('#resultcontainer').html($result);
}}
var searchterm = document.getElementById($type).value;
var queryString ="?searchterm=" + searchterm +"&type=" +$type;
if(searchterm !== ""){
ajaxRequest2.open("GET", "searchrequest.php" +
queryString, true);
ajaxRequest2.send(null);
}
}
store the timeout in a variable, so you will be able to clear recent timeouts:
clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);
What you are trying to do is called debouncing.
Here's a jquery plugin by Ben Alman that does the job.
And underscore.js includes this functionality as well.
There's really no need to hack the ajax request system. Just make sure it's called at the right moment.
I like the Molle's answer But I would to further improve the performance
var ajaxRequest2; // The variable that makes Ajax possible!
function getAjaxObject()
{
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest2 = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Browser error!");
// return false;
}
}
}
return ajaxRequest2;
}
getAjaxObject();
function ajaxSearchRequest($type){
if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false)
{
return;
}
ajaxRequest2.abort();
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest2.readyState == 4){
$result = ajaxRequest2.responseText;
$('#resultcontainer').html($result);
}}
var searchterm = document.getElementById($type).value;
var queryString ="?searchterm=" + searchterm +"&type=" +$type;
if(searchterm !== ""){
ajaxRequest2.open("GET", "searchrequest.php" +
queryString, true);
ajaxRequest2.send(null);
}
}
This change will abort an on going ajax request and send a fresh request. It is helpful when you
Typed-> waited 4 sec ->request sent ->typed again (response not received) ->waited 4 second->another request fires
Related
I have the following generic Ajax response writer which I recently added some logic to, in order to dynamically parse the results for script objects, and run them when I find them using jQuery.globalEval().
Here is the code:
//Generic Results Writter method for Ajax Calls
function writeAjaxResponse(targetId, response) {
document.getElementById(targetId).innerHTML = response;
try {
var dom = $j(response);
dom.find('script').each( function(){
$j.globalEval(this.text || this.textContent || this.innerHTML || '');
});
} catch (e) {
console.error("Error parsing for script reloads: "+e);
}
}
This solution works very nicely the first time its called. However writeAjaxResponse(targetId, response); is called each time a user loads some dynamic Ajax content. And unfortunately after the first time, the scripts are no longer loaded. To be clear, after the server side generated page is loaded, there are numerous links on the page which the users may click, which invoke this handler for the Ajax response.
No error occurs, and no console.error() is written.. The Ajax data loads as normal, its just that the scripts in the response are no longer loaded.
In debugging, $j.globalEval is still getting called and this.text still has the script content in it, and the data looks correct, but still no joy.
Any light someone could shed on this would be very much appreciated!
Adding main ajax call for GET for reference:
function doAjaxGet(targetId, getUrl, handler) {`
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try {
handler(targetId, xmlhttp.response);
}
catch (err) {
alert("Failed calling handler, detail: " + err + " Got responseText: " + xmlhttp.responseText);
}
}
}
xmlhttp.open("GET", getUrl, true);
xmlhttp.send(null);
}
I was wondering if it was possible to make a GET request with javascript, so it can update text without refreshing the page.
If this is possible, how can I make a get request with javascript & get the result/decode it from json?
I tried this from a past question:
function updateButton(){
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", false);
xmlHttp.send(null);
document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
}
And, it completely stops the main thread, making the website unresponsive. What is wrong?
Currently you set the async parameter to false, so the request is sent to the server and the browser waits for the response. To make an async request, just pass true as thrid param to open
xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
in addition to that, you have to register an callback, which waits for the response (and maybe to handle errors..)
xmlHttp.onload = function (e) {
if (xmlHttp.readyState === 4) {
if (xmlHttp.status === 200) {
console.log(xmlHttp.responseText);
} else {
console.error(xmlHttp.statusText);
}
}
};
xmlHttp.onerror = function (e) {
console.error(xmlHttp.statusText);
};
In addition to that a note from the mozilla docs
Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 /
SeaMonkey 2.27), synchronous requests on the main thread have been
deprecated due to the negative effects to the user experience.
var isAjax=false;
function updateButton(){
if(!isAjax) { //Stops the user making a million requests per minute
isAjax=true;
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
xmlHttp.send(null);
document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
isAjax=false;
}
}
OR jQuery...
$("#btnUpdate").click(function(){
$.get("http://xxxx.com/getSpecialSale.php", function(data, status){
$("#dicebutton").html(data);
});
});
If you want to use async you will need some code modifications, ie the stuff that happens after the response completes needs to be in a callback function as follows:
function updateButton(){
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
xmlHttp.onload = function () {
document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
};
xmlHttp.send(null);
}
So I have a list of movies and their info displayed from mysql in a table on a JSP. Each movie's table entry looks like <a id="135006" onmouseover=ajaxFunction(this); href=SearchSingleMovieServlet?txt_movie_id=135006>The Life Aquatic</a>.
My ajax function looks like:
<script language="javascript" type="text/javascript">
function ajaxFunction(obj){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$( '#'+ obj.id ).tooltip({
content: "<strong>Hi!</strong>",
track:true
});
document.getElementById('popup').innerHTML = '#' + obj.id+ ajaxRequest.responseText;
}
}
var parameter = "movie_id=" + obj.id;
ajaxRequest.open("POST","MoviePopUpWindowServlet", true);
ajaxRequest.setRequestHeader("Content-type"
, "application/x-www-form-urlencoded")
ajaxRequest.send(parameter);
}
</script>
The line document.getElementById('popup').innerHTML = '#' + obj.id+ ajaxRequest.responseText; is just a debugging line so I can see if the code enters the AJAX function and to make sure responseText displays correctly (which it does). But when I try mousing over the link of the movie, its tooltip doesn't show. Any reason why?
The problem is that first question loads with onload function now when I click a button to fetch the next question i.e. the 2nd question, but it fetches the first question again, after that, when I click next it fetches the 2nd question.
Now if I want to fetch the question from another subject, suppose maths section, where I have set the value of variable to 15, when I click maths it first increments the question and after that whatever button I click it still jumps to question 15.
var question = 1;
function ajaxFunction (_direction) {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState == 4 && ajaxRequest.status== 200) {
var ajaxDisplay = document.getElementById('ajaxDiv');
if (_direction=='') {
question=1;
} else if (_direction=='next') {
question++;
} else if (_direction>=1 && _direction <=90) {
question = _direction;
}
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
ajaxRequest.open("GET", "ajax-example.php?q="+question, true);
ajaxRequest.send(null);
}
well, I haven't gave up and got the solution by myself and I'm posting this in answer so that if anyone else have the same issue.
I just removed the if else condition from the onreadystatechange and placed it above the function and it worked for me.
I've had a similar problem and solved it by setting the HTTP request from asyncron to syncron (see Autoroute step by step using Yours http request has a time lag).
Did you solve your problem on the same way or did you found a better one?
best regards, Reinhard
I have the following AJAX function that calls a PHP file to determine if an email is present in a db.
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(Email){
var url="index.php?EmailCheck=Yes&Email=" + Email;
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
if(ajaxRequest.responseText == 0) {
alert("Sorry that email is not registered.");
} else {
alert("Login successful.");
window.opener.location.reload();
window.close();
}
}
}
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
Are there going to be any browsers this won't work for? I have had some complaints from users, but I can't replicate the errors in IE, FF, or Chrome.
It won't work in Lynx, and it probably won't work in some specialized screen-reader browsers. If you seriously expect to have users for which it won't work, for God's sake fix the error message. Better yet, use something like jQuery. Realize that it's possible to fall back to an alternative approach of using a hidden <iframe> or something instead of XMLHTTPRequest.