I have a page with button, and i want to load 2 data grids with data asynchronously by cliking the button.
This is the code of the page, I use jquery to make calls to other 2 pages that will yield me html.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Solutions_CashCenter_StockManagement_Test_Test" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cphCenter" Runat="Server">
<style type="text/css">
#wait {
position:absolute;
top:0px;
right:10px;
width:200px;
z-index:1000;
vertical-align:middle;
text-align:center;
background: #febf00;
display:none;
}
</style>
<script src='<%= ResolveUrl("../../../../Scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#wait')
.ajaxStart(function () { $(this).show(); })
.ajaxStop(function () { $(this).hide(); });
$('input:button').live('click', loadData);
});
function loadData() {
$.get("Source.aspx", {},
function (data) {
$('#a1').html(data);
},
"html");
alert('This alert is asynchronous (1st)');
$.get("Source2.aspx", {},
function (data) {
$('#a2').html(data);
},
"html");
alert('This alert is asynchronous (2nd)');
}
</script>
<div id="test13">
<input type="button" id="btnLoad" value="Load" />
</div>
<div id="a1"></div>
<div id="a2"></div>
<div id="wait">Please wait <img src="ajax-loading.gif" /></div>
</asp:Content>
Then I have 2 aspx pages, Source1.aspx and Source2.aspx. They only containe a gridDataView and little code in OnLoad event.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Source.aspx.cs" Inherits="Solutions_CashCenter_StockManagement_Test_Source" %>
<form runat="server">
<cc1:GridDataView runat="server" ID="gridTest" >
</cc1:GridDataView>
<asp:SqlDataSource ID="dsTest" runat="server" ConnectionString="<%$ ConnectionStrings:WebPortalConnectionString %>"
ProviderName="<%$ ConnectionStrings:WebPortalConnectionString.ProviderName %>">
</asp:SqlDataSource>
</form>
Server-side:
Thread.Sleep(5000);
dsTest.SelectCommand = "SELECT 'test1', 'test2', 'test3'";
this.gridTest.DataSourceID = "dsTest";
this.gridTest.DataBind();
And the same for the second page, but with different data for the grid.
What I have in result is that both alerts happen at once, but the grids are loaded one after one, that is 1st grid appears after 5 seconds, and then second one appers after another 5 sec. That is the server does not actually process them concurrently.
What am I doing wrong and how should I organize all to work as I need?