jquery allows you to edit text by clicking on it and save the modifications to the database_jquery

You can find a lot of this method on the Internet, but many of them only have to click on the text to edit and save, but there is no complete code to write how to save it to the database. Because I have little talent and knowledge, it took me a long time to write and save the modified content to the database with only one SQL statement. Today I will share with you

This is the running picture

This is the front page 03.aspx page

Copy code The code is as follows:

< /tr>











< ;tr style="text-align: left;">

< /tr>

Order Name:	<%#Eval("OrderName")%>
Product type:	<%#Eval("ID_Product")%>	Status:	< ;%#Eval("OrderState_Send")%>	Print volume:	<%#Eval("OrderQty")%>
Receipt information:	<%#Eval("SendAddress")%>
Total amount:	<%#Eval("OrderMoney_Total")%>

This is js 03.js

Copy code The code is as follows:

$(function () {
//Get the class as caname Elements of
$(".caname").click(function () {
var td = $(this);
var txt = $.trim(td.text());
var input = $("");
td.html(input);
input.click(function () { return false ; });
//Get focus
input.trigger("focus");
//After the text box loses focus, submit the content and change it to text again
input.blur(function () {
var newtxt = $(this).val();
//Determine whether the text has been modified
if (newtxt != txt) {
td.html(newtxt);

//This section that does not require the use of a database is not required

//var Order_Id = $("#ID_Order").text();
var updateCol = $.trim(td. prev().attr("id"));//The main thing I want to say is: td.prev(); indicates the previous td of this td. The meaning of this code is the ID of the previous TD of the TD you clicked (if you don’t understand, you can see the previous 03.aspx page).
//Ajax changes the database asynchronously, adding the parameter date is to solve the cache problem
url = "../test/03.ashx?caname=" newtxt "&updateCol=" updateCol "&date=" new Date();




//Use the get() method to open a general handler, data accepts the returned parameters (the method that returns parameters in the general handler context.Response.Write(" Parameters to be returned");)
//The modification of the database is completed in the general handler
$.get(url, function (data) {
// if (data == "1" ) {
// alert("This category already exists!");
// td.html(txt);
// return;
// }
// alert( data);
alert("Modification successful");
td.html(newtxt);
});

Copy code The code is as follows:

This is the general handler page< ;span style="font-family:Times New Roman;"> 03.ashx

<%@ WebHandler Language="C#" Class="_03" %>

Copy code The code is as follows:

using System;
using System .Web;
using System.Data.SqlClient;

public class _03 : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int OrderId = 5;

string newOrderName = context.Request.QueryString["caname"];//Get the user's modified text
string updateCol = context.Request.QueryString["updateCol"];//Get the value of the id of the previous td modified by the user (this id is the same as the column name in the database)
string sql = "update eoPrintOrder set " updateCol " =@name where Id_order=@id";//Through this sql statement, you can modify the database 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;
}
}