Use of jquery Ajax

Scenario: The data extracted from the database is displayed in the gridview list. Now you need to use jquery. UI. dialog to display the details of each data entry and modify and edit it in the pop-up window.

Problems to be Solved: 1. Submit the selected record ID in the gridview to jquery. UI. Dialog

2. Save and Process

Design Concept:

Design An ASPX page for Data Binding and data update. Call the load method of jquery ajax to load the Data Binding page and display the bound data.

Page code

<Div id = "loading" class = "loading">
Processing the server. Please wait.
</Div>
<Div id = "divbindshowdata">
</Div>
<Data: entitygridview id = "gridview1" performanceid = "tbcorpcreditsinfodatasource" datakeynames = "primarykey">
<Columns>
<Asp: templatefield headertext = "View/Edit">
<Itemtemplate>
<Asp: hyperlink id = "hlcreditscoreedit" runat = "server" imageurl = 'images/view.gif 'primarykey =' <% # databinder. eval (container. dataitem, "primarykey") %> '/>
</Itemtemplate>
</ASP: templatefield>
<Asp: boundfield datafield = "corpname" headertext = "company name" sortexpression = "[corpname]"/>
<Asp: boundfield datafield = "creditrank" headertext = "credit grade" sortexpression = "[creditrank]"/>
</Columns>
</Data: entitygridview>

JS Code

// Dialog
$ ('# Divbindshowdata'). Dialog ({
Autoopen: false,
Width: 800,
Height: 550,
Modal: True,
Title: "editing of credit rating of real estate development enterprises ",
Buttons :{
"Save": function (){
$. Ajax ({
Type: "Post ",
Contenttype: "application/html ",
URL: "creditintegrallistupdate. aspx? "+ $ (" # Divbindshowdata input [type = 'text'] [ID * = 'data'] "). serialize () + "&" + $ ("# divbindshowdata input [ID * = 'primarykey']"). serialize (),
Data :"",
Datatype: 'html ',
Success: function (result) {alert ("Update successful! ");},
Error: function (result, status) {// if no above capture error occurs, the callback function here will be executed
If (status = 'error') {alert (Status );}
}
});
},
"Cancel": function (){
$ (This). Dialog ("close ");
}
}
});
//
$ ("A [ID * = 'hlcreditscoreedit']"). Click (function (){
$ ("# Divbindshowdata"). Load ("creditintegraledit. aspx? Primarykey = "+ $ (this). ATTR (" primarykey ");
$ ('# Divbindshowdata'). Dialog ('open ');
Return false;
});
// Ajax monitoring is global.
$ (Document). Ready (function (){
$ ('# Loading'). ajaxstart (function (){
$ (This). Show ();
$ (This). floatdiv ("Middle ");
}). Ajaxstop (function (){
$ (This). Hide ();
});
});
});

Here I pass. the load method loads creditintegraledit. the data on the ASPX page is passed through the number list creditintegraledit. all the fields to be updated in aspx, and pass the serialized string to creditintegrallistupdate through Ajax. ASPX page. This allows you to bind and update data.