Jquery allows you to click the text to edit and save it to the database.

This method can be found on the Internet many, but many only click to edit and maintain the text, but there is no complete code writing how to save it to the database. I am not familiar with it. It takes a long time to write and save the modified content to the database using only one SQL statement. I will share with you today.

This is the running Image
 
This is the frontend page 03. aspx page
Copy codeThe Code is as follows:
<Table id = "MyTable" cellspacing = "1" cellpadding = "3">
<Asp: Repeater ID = "reorderInFo" runat = "server">
<ItemTemplate>
<Tr style = "text-align: left;">
<Td width = "70" height = "40" id = "OrderName">
Order Name:
</Td>
<Td colspan = "5" class = "caname" id = "OrderName1">
<% # Eval ("OrderName") %>
</Td>
</Tr>
<Tr style = "text-align: left;">
<Td width = "70" height = "40" id = "ID_Product">
Product Type:
</Td>
<Td class = "caname" id = "ID_Product1">
<% # Eval ("ID_Product") %>
</Td>
<Td width = "40" id = "OrderState_Send">
Status:
</Td>
<Td class = "caname" id = "OrderState_Send1"> <% # Eval ("OrderState_Send") %>
</Td>
<Td width = "40" id = "OrderQty">
Print volume:
</Td>
<Td class = "caname" id = "OrderQty1"> <% # Eval ("OrderQty") %>
</Td>
</Tr>
<Tr>
<Td width = "70" height = "60" id = "SendAddress">
Shipping Information:
</Td>
<Td colspan = "5" class = "caname" id = "SendAddress1"> <% # Eval ("SendAddress") %>
</Td>
</Tr>
<Tr style = "text-align: left;">
<Td width = "70" height = "50" id = "OrderMoney_Total">
Total amount:
</Td>
<Td colspan = "5" class = "caname" id = "OrderMoney_Total1"> <% # Eval ("OrderMoney_Total") %>
</Td>
</Tr>

</ItemTemplate>
</Asp: Repeater>
</Table>

This is js 03.js.
Copy codeThe Code is as follows:
$ (Function (){
// Obtain the elements whose class is caname
$ (". Caname"). click (function (){
Var td = $ (this );
Var txt = $. trim (td. text ());
Var input = $ ("<input type = 'text' value = '" + txt + "'/> ");
Td.html (input );
Input. click (function () {return false ;});
// Obtain the focus
Input. trigger ("focus ");
// If the text box loses focus, the submitted content is changed to text
Input. blur (function (){
Var newtxt = $ (this). val ();
// Determine whether the text has been modified
If (newtxt! = Txt ){
Td.html (newtxt );

// This section does not need to use the database

// Var Order_Id = $ ("# ID_Order"). text ();
Var updateCol = $. trim (td. prev (). attr ("id"); // The key point is: td. prev (); indicates the previous td of the current td. This code indicates the id of the previous td you clicked on (if you do not understand it, you can see the 03. aspx page above ).
// Ajax changes the database asynchronously. Adding the date parameter solves the cache problem.
Url = "../test/03. ashx? Caname = "+ newtxt +" & updateCol = "+ updateCol +" & date = "+ new Date ();




// Use the get () method to open a general processing program. data accepts the returned parameters (the method context for returning parameters in a general processing program. response. write ("parameters to be returned ");)
// Modify the database in the general processing program.
$. Get (url, function (data ){
// If (data = "1 "){
// Alert ("This category already exists! ");
// Td.html (txt );
// Return;
//}
// Alert (data );
Alert ("modified successfully ");
Td.html (newtxt );
});

Copy codeThe Code is as follows:
<P> <span style = "font-size: 14px;"> This is the general processing page <span style = "font-family: Times New Roman;"> 03. ashx </span> </p> <p>
<% @ WebHandler Language = "C #" Class = "_ 03" %> </p>

Copy codeThe Code is as follows:
<P> using System;
Using System. Web;
Using System. Data. SqlClient; </p> <p> public class _ 03: IHttpHandler {

Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Int OrderId = 5; </p> <p> string newOrderName = context. Request. QueryString ["caname"]; // obtain the modified text
String updateCol = context. Request. QueryString ["updateCol"]; // obtain the id of the previous td of the User-modified td (this id is the same as the name of the column in the database)
String SQL = "update eoPrintOrder set" + updateCol + "<a target =" _ blank "href =" mailto: = @ name ">=@ name </a> where <a target =" _ blank "href =" mailto: Id_order = @ id '; // "> Id_order = @ id"; // </a> with this SQL statement, you can modify SqlParameter [] pams = {
New SqlParameter ("@ name", newOrderName ),
New SqlParameter ("@ id", OrderId)
};


String data = DscySFL. DbHelp. ExecuteCommand (SQL, pams). ToString ();
Context. Response. Write (data );

}

Public bool IsReusable {
Get {
Return false;
}
} </P> <p >}</p>