jQuery .load seems to be running at an unexpected point

By : Carter
Source: Stackoverflow.com

So I'm trying to load some returned html from an .aspx page but a click event needs to fire before it doing some stuff that the AJAX request depends upon. More specifically, I'm doing this. When a user types in a text field this function is run...

function KeyPress() {
  $("#" + HiddenButtonId).click();

then $("#" + HiddenButtonId).click(); does sets some session data in a code behind file. Specifically...

Session["SearchText"] = Search.Text;

then, $("#test").load("TempJumpToAJAX.aspx"); calls that .aspx page that returns a newly built select box...

        Response.Expires = -1;

        StringBuilder builder = new StringBuilder();

        builder.Append("<select id=\"testListId\" name=\"testList\" size=\"4\" style=\"width:200px;\">");

        Response.ContentType = "text/HTML";

The problem is, the order seems to be screwed up it tries to append the Session["SearchText"] first, then runs the code that the click event runs. So it functions more like this...

function KeyPress() {
  $("#" + HiddenButtonId).click();

Where the commands are reversed. So what in effect happens is the session variable has an empty string as opposed to what the user typed in the text box. What's odd to me is that it doesn't seem like it should have an empty string, it seems like it should have nothing since the session variable has not been initialized to anything at this point. I really have no idea what's happening. Chalk it up to inexperience I guess. Any ideas?

By : Carter


Awesome! Thanks to everyone all your answers were quite insightful. The real issue I learned was that I did not know how to send variables with that ajax request. This here.

$("#test").load("TempJumpToAJAX.aspx", {searchText: $("#").val()});

Also mintywalker, thanks for the insight. It was all good.

By : Carter

There is a JQuery plugin that encapsulates what the previous answer is talking about. Its called TypeWatch. It allows a function to fire once the user has stopped typing in a text field for a specified number of milliseconds. I've used it before and it works quite well.

By : Soviut

Another smart extension to what you are doing, is not to do the ajax call as soon as a key is pressed. If the user types in a long word quickly, you'll get multiple ajax http requests triggered faster than they can return and update your UI.

This adds to your server load, and might make the client's UI sluggish.

Instead, onkeypress, store all the appropriate details and then call

var timeout = setTimeout('some_method()',100);

Which says call the some_method() in 100 milliseconds. The first thing you should do within your keypress method is cancel/clear the Timeout call with clearTimeout.


The some_method() should also clear any timeout, then make the http ajax request.

The net effect here is that your ajax request is delayed slightly, but never happens if the user presses another key. Or put another way, don't try and fire an ajx request until the user has stopped/paused typing. 100 milliseconds might be too high or too low, but you hopefully get the idea!

You should also take care to deal with a "slow server" situation. Consider this:

  • User types "hello", pauses for 1 second, you fire an ajax request with "hello" as the parameter
  • User continues to type " world", so the textfield now contains "hello world", and stops typing.
  • You fire a second ajax request with "hello world" as the parameter.
  • The second request (for "hello world") returns first, you update your UI
  • The first request (for "hello") returns, you update your UI again.

Ooops! Have the server include the original query string in the (json) data it returns to the client. When the client gets the ajax data back, check that the result/data is for the query ("hello" / "hello world") that matches what is currently in the text field.

This video can help you solving your question :)
By: admin