Using AJAX to get remote page information in jquery _jquery

The effect chart is as follows:

Put the foreground code first: The key code is the data (custom attribute) binding ID through the span tag

Copy Code code as follows:

<asp:gridview id= "Gvcollect" runat= "Server" autogeneratecolumns= "False"
Datakeynames= "Id" onrowdeleting= "gvcollect_rowdeleting"
enablemodelvalidation= "True" >
<Columns>
<asp:boundfield datafield= "id" headertext= "number"/>
<asp:templatefield headertext= "title" >
<ItemTemplate>
<span class= "Showcon" Data= ' <% #Eval ("Id")%> ' ><%# Eval ("Title")%></span>
</ItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield= "Addtime" headertext= "Time"/>
<asp:templatefield headertext= "Operations" >
<ItemTemplate>
<a href= "show_coll.aspx?id=<%# DataBinder.Eval (Container.DataItem," id ")%>" target= "_blank" > View </a >
<asp:linkbutton id= "lbtn" runat= "server" commandname= "delete" onclientclick= "return confirm (' OK delete ')" > Delete </ Asp:linkbutton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table width= "100%" >
<tr>
<td>
<asp:button id= "Btnallmove" runat= "Server" text= "all Warehousing" onclick= "Btnallmove_click"/>
<asp:button id= "Btnalldelete" runat= "server" text= "Empty All Records" onclick= "Btnalldelete_click"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

Then the pop-up layer fast code:
<div id= "Divtip" title= "content shows" style= "Overflow:auto;" >
</div>
Then look at the CSS style reference file and JS call (I use the jQueryUI library)

Copy Code code as follows:

<link href= "Js/jquery-ui-1.8.16.custom.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Js/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery-ui-1.8.16.custom.min.js" type= "Text/javascript" ></script>

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
Initialize the pop-up layer, load is not displayed
$ ("#divTip"). Dialog ({
Show:null,
WIDTH:500,
HEIGHT:500,
Bgiframe:false,
Autoopen:false,
Buttons: {
"OK": function () {
$ (This). dialog ("Close");
},
"Cancel": function () {
$ (This). dialog ("Close");
}
}
});
Cancel event bubbling for object itself
$ ("#divTip"). Bind ("click", Function (event) {
Event.stoppropagation ();
});
Dynamic prompts class pop-up layer, click on the Object pop-up load page
$ (". Showcon"). CSS ("cursor", "pointer"). Click (Function (event) {
$ ("*"). Stop ();
$ ("#divTip"). Dialog ("Close");
Event.stoppropagation ();
var top = $ (event.target). Offset (). Top + 20;
var left = $ (event.target). Offset (). Left;
Get ID of Object source
var ObjID = $ (event.target). attr ("Data");
alert (ObjID);
$.ajax ({
Type: "POST",
URL: "Show_coll.aspx",
Data: "id=" + ObjID,
Success:function (Con) {
$ ("#divTip"). html (con);
}
});
$ ("#divTip"). HTML (ObjID);
$ ("#divTip"). Dialog ("option", "position", [left, top]);
$ ("#divTip"). Dialog ("Open");
});
})
</script>

Next up is the server page:
Generally we get the parameters are request.querystring[""], but this is to get the parameters in the URL, and now is to get the HTTP object, so with request["" ",
Otherwise, no data is taken.

Copy Code code as follows:

request.querystring["id"] = = NULL
if (request["id"]==null)
return 0;
Return Convert.ToInt32 (request["id"). ToString ());