I have an ASP.NET Web Forms web application that has various tiles which I need to fill with data. When the user executes a search, I currently have multiple ajax requests that fire off to bring back data. This data is independent of each request and does not need to wait for the prior request.
However, when I execute the requests they are being processed serially. In one case as my "Service History" finishes, if I click on the row to execute another request to bring up a pop up, it goes to pending because my "Fluid" tile is still working. Once the Fluid request finishes, then does it process my ajax request to bring up service history details.
I've seen several posts on StackOverflow about concurrent connections by browser, but not sure if this applies to what I am doing here or not.
Here is my code when a user searches:
....
function Search()
{
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetServiceHistory",
data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +
" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_SortDirection").val() + "\"," +
" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_SortColumn").val() + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#dvServiceHistoryLoading").fadeOut(100);
$("#SearchHistoryResultsDiv").show();
// Set the result
var jsonValue = jQuery.parseJSON(msg.d);
// Set the result
if (jsonValue.Data[0] == null) {
$("#SearchHistoryResultsDiv").html("No results.");
return;
}
-- CODE TO DISPLAY RESULTS HERE --
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = "An error has occurred.";
$("#SearchHistoryResultsDiv").text("An error has occurred.");
$('#dvServiceHistoryLoading').hide();
}
});
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetFluid",
data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +
" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortDirection").val() + "\"," +
" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortColumn").val() + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#dvFluidLoading").fadeOut(100);
$("#FluidResultsDiv").show();
// Set the result
if (msg.d == "") {
$("#FluidResultsDiv").html("<div style='border: 1px solid rgb(211, 211, 211); padding: 16px; height:100px;'><b>No results.</b></div>");
return;
}
// Set the result
var jsonValue = jQuery.parseJSON(msg.d);
if (jsonValue.Details[0] != "") {
$("#FluidResultsDiv").html(jsonValue.Details[0]);
UpdateTDtoTH("FluidResultsDiv");
WireUpSorting("FluidResultsDiv");
}
else {
$("#FluidResultsDiv").html("No results found.");
}
},
error: function (xhr, ajaxOptions, thrownError) {
$("#FluidResultsDiv").show();
$("#FluidResultsDiv").text("An error has occurred.");
$('#dvFluidLoading').hide();
}
});
}
This method is called is the user clicks the service history link. It creates a new ajax request.
function ViewServiceHistoryDetail(serialNumber, invoiceNumber, segmentNumber) {
ClearServiceHistoryLabels();
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetServiceHistoryLineItem",
data: "{ SerialNumber: \"" + serialNumber + "\"," +
" InvoiceNum: \"" + invoiceNumber + "\"," +
" SegmentNum: \"" + segmentNumber + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Set the result
},
error: function (xhr, ajaxOptions, thrownError) {
}
....
