jQuery .load seems to be running at an unexpected point

Question

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();
  $("#test").load("TempJumpToAJAX.aspx");
}

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;\">");
        builder.Append("<option>");
        builder.Append(Session["SearchText"]);
        builder.Append("</option>");            
        builder.Append("</select>");

        Response.ContentType = "text/HTML";
        Response.Write(builder.ToString());
        Response.End();

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() {
  $("#test").load("TempJumpToAJAX.aspx");
  $("#" + 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?

Answer 1

You are mixing technologies here. The hiddenButtonID click event is trying to do a full postback for the page, whereas the AJAX call will not do a postback. There is no reason to do a post back and then follow it up with an AJAX call. The point of AJAX is to eliminate the need to postback the page and instead just reload a small amount of the HTML on the page using a small callback to the server. Instead of accessing the Search Textbox text in the HiddenButtonID click event handler you should be passing that data to the Server in the AJAX call parameters.

The following client side script should do this.

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

In this code you are getting the ID of the search textbox and then using jQuery to retrieve the value of that text box. This will get passed to the TempJumpToAJAX.aspx page as POST variable called 'searchText'. You should be able access this data by accessing the Request['searchText'] variable in the 'TempJumpToAJAX.aspx' page.

Answer 2

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.

http://www.w3schools.com/js/js_timing.asp

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.

Answer 3

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.

Answer 4

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.