在后台获取数据而不影响.net + jquery中的UI

Question

I need to create multiple search requests in Jquery which searches from different tables/pages and I need to combine all the search results to one HTML table and show the results in UI.

Below is my approach..

Using $.ajax in Jquery, I go to the server (.Net Code), fetch JSON data, come back to the JS file and build a HTML table and display result (this result will have checkbox for user to check/uncheck the results). Once I display results, I again use $.ajax, go to server (.NET Code) and get data and will append the results to the first HTML table.

My requirement is, between these 2 requests I need to

1) Show a Loading image/text.

2) The user should be able to access (scroll, check, uncheck) the HTML table results returned by 1st JSON request.

I am able to accomplish 1) also. The problem I am facing is regarding 2). Once the results come from 1st request and once I display the results in a div, I again trigger the 2nd search request using $.ajax. At this time I am not able to access the HTML table. The page freezes until the results from the second request come and till I bind the results to HTML table.

My code is something like this.

function SearchDetails() {
GetDetails("Test", 0); /*Trigger First Request*/ }

function GetDetails(searchKeyword, iAppend) {
$.ajax({
    type: "POST",
    url: "FETCH_DETAILS.asmx/GetDetails",
    data: "{'searchKeyword':'" + searchKeyword + "', 'Append':'" + iAppend + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    crossDomain: true,
    jsonp: false,
    success: function (response) {
        if(iAppend == 0) //First Request
        {
            BindTable(response.d, iAppend); //Creates new HTML table and binds results
            GetDetails("TestNew", 1);//Trigger Second Request
        }
        else if (iAppend == 1) {
           BindTable(response.d, iAppend);
        }
    },
    failure: function (msg) {
        alert(msg);
    },

});}

function BindTable(SearchResults, iAppend){
/*Creates HTML Table & binds to a div for First Request
Creates HTML Table Rowss & appends to existing HTML table for Second Request*/ }

Please suggest me whether i am missing anything or is there a way to go to server(.NET code) from Jquery without affecting (getting freeze) the display/UI.

Answer 1

Perhaps set the:

async: false

to

async: true