[BMR777]

Hello,

I'm trying to write something using jQuery's AJAX API that submits a username to the database and then does something with the response. My script works, sort of. Here is my jQuery code:

$(document).ready(function(){
			 
				$("#fname").bind('keyup blur focus load', function() {				
					$.ajax({
						type:   "get",
						cache: true,
						url: "ajaxphp/checkaccess.php",
						dataType: "text", //dataType can be html, json, jsonp, script, or text.
						data: {
							fname: $('#fname').val()
						},
						before: function() {
							//Before the data is sent we can call this method to preprocess,
							//hide elements on the page, etc.
						},
						error: function (data) {
							//If the request fails, run this error function.
						},
						success: function (data) {
							//On a successful XmlHttpRequest call this function is called
							$('#fnamecheck').html(data);
						}
					});	//end of the ajax call attached to the username onchange function
				});  //end of the onchange function				
});

The problem is that the server is a bit slow in parsing back the response. How this works is I type in a username and then I get back a response containing the username and either some text that says available or not available. I can see though that if I type a username, say MyUsername, sometimes the response I get will be like "MyUse is available", meaning that only part of the value was returned. If I wait long enough eventually it will say "MyUsername is available". What I want to do is if it is waiting for a response I want to show a loading message instead of an incorrect message. Also, is there a way to cancel all requests made via the script except the last one? I don't want the server to have to do 8 database lookups when the user types username in my form, but I want it where the second they are done typing what they put in the box is submitted to the server, without the intermediary steps. I looked at the change event, but that seems to only work if the form field loses focus.

Thanks,
BMR777

[Wimpy]

You do not want to cancel the ongoing requests, what you on the other hand want to do is to not send them in the first place or just ignore the response if it is not up-to-date. A nice implementation would be to set a short timeout to do the ajax calling when the user start typing, but if he continues to type you clear the timeout and set it again.

var timeOutID = null;
function setAjaxRequestTimeOut()
{
    if (timeOutID != null)
    {
        timeOutID = window.clearTimeout(timeOutID);
        timeOutID = null;
    }

    timeOutID = window.setTimeout(function()
    {
        callSomeMethodToSendAjaxRequestFromHere();    

    }, 150);
}

document.getElementByID('myInputBox').onkeydown = setAjaxRequestTimeOut;

A thing to be added would be to increase a counter for every ajax request and then pass it to the response callback, if the callbacks counter is not equal to the global counter the response is outdated and can be ignored. Hope it helps!

This post has been edited by Wimpy: 21 February 2010 - 02:14 AM

[BMR777]

Thanks. Your code looks good, the only thing I am struggling with still is how to implement it along with my existing code. Would I just put your code inside the ready function and then put my $("#fname").bind('keyup blur focus load', function() { code inside of the timeOutID = window.setTimeout(function() code area? I'm afraid I'm not very experienced with AJAX. I'll play around with it some though and see what I can come up with.

[Wimpy]

You should only wrap the $.ajax()-call within the function in the setTimeout()-call.

[BMR777]

Thanks! I'll try that.