Ajax asynchronously changes the database

I made a small website some time ago and it was quite nice to have a small function in it. I would like to share it with you and ask you not to laugh at your ignorance.

This function looks like this: Click the category name to modify the category.

After clicking the category name, the original table is changed to an editable text box and all the content is selected. You can directly modify it. Press ENTER or click somewhere else to submit the modification.

If you do not change it, click elsewhere or press "ESC" or enter the key, it will return to the previous format. If the modification is repeated with other class names, the corresponding prompt will be displayed:

If the class name is correct, the modified content is displayed on the page and the database value is modified.

 

Before database modification after database Modification

 

JS usedCode

 

 

 /*  **************************************** * ***** Created: description: ************************************* ********  */  $ (  Function (){ //  It is equivalent to adding an onload event to the body tag of the page. $ (". Caname"). Click ( Function (){ //  Add the click function to the labels with caname classes on the page.         VaR Objtd = $ ( This  );  VaR Oldtext = $. Trim (objtd. Text ()); //  Save the old category name          VaR Input = $ ("<input type = 'text' value = '" + oldtext + "'/> "); //  Text Box HTML code Objtd.html (input ); //  The content of the current TD is changed to a text box.          //  Set the Click Event of the text box to invalid Input. Click (Function  (){  Return   False  ;});  //  Set the text box style Input.css ("border-width", "0px "); //  The border is 0. Input. Height (objtd. Height ()); //  The height of the text box is the height of the current TD cell. Input. Width (objtd. Width ()); //  The width is the width of the current TD cell. Input.css ("font-size", "16px ");//  The text size of the text box is 16 PX. Input.css ("text-align", "center "); //  Text Center Input. Trigger ("Focus"). Trigger ("select "); //  Select All          //  When the text box loses focus, it becomes text again Input. Blur ( Function  (){  VaR Newtext = $ ( This ). Val (); // Modified name              VaR Input_blur = $ ( This  );  //  Data submission is performed only when the old category name is different from the modified one.              If (Oldtext! = Newtext ){  //  Obtain the ID (serial number) of the class alias)                  VaR Caid = $. Trim (objtd. Prev (). Text ());  //  Ajax asynchronously changes the database                 VaR Url = "../handler/changecaname. ashx? Caname = "+ encodeuri (newtext) +" & caid = "+ caid +" & t = "+ New  Date (). gettime (); $. Get (URL,  Function  (Data ){  If (Data = "false" ) {Alert ( "Failed to modify category. Please check whether the category name is repeated! " ); Input_blur.trigger ( "Focus"). Trigger ("select "); //  Select all text boxes }Else  {$ ( "# Test"). Text ("" ); Objtd.html (newtext );}});}  Else  {  //  The text is consistent before and after, and the text box is changed to a label  Objtd.html (newtext );}});  //  Press a key in the text box. Input. keydown ( Function  (Event ){ VaR Jianzhi = Event. keycode;  VaR Input_keydown = $ ( This  );  Switch  (Jianzhi ){  Case 13: //  Press enter to submit the modified value to the database.                      //  $ ("# Test"). Text ("the key value you pressed is:" + jianzhi );                      VaR Newtext = input_keydown.val (); // Modified name                      //  Data submission is performed only when the old category name is different from the modified one.                      If (Oldtext! = Newtext ){  //  Obtain the ID (serial number) of the class alias)                          VaR Caid = $. Trim (objtd. Prev (). Text ());  //  Ajax asynchronously changes the database                          VaR Url = "../handler/changecaname. ashx? Caname = "+ encodeuri (newtext) +" & caid = "+ caid +" & t = "+New  Date (). gettime (); $. Get (URL,  Function  (Data ){  If (Data = "false" ) {Alert ( "Failed to modify category. Please check whether the category name is repeated! " ); Input_keydown.trigger ( "Focus"). Trigger ("select "); //  Select all text boxes } Else  {$ ( "# Test"). Text ("" ); Objtd.html (newtext );}});}  Else  {  //  The text is consistent before and after, and the text box is changed to a label  Objtd.html (newtext );}  Break  ;  Case 27: //  Press ESC to cancel modification and change the text box to a label. $ ("# Test"). Text (""); Objtd.html (oldtext );  Break  ;}});});});  //  Shield the Enter key $ (Document). keydown ( Function  (Event ){  Switch  (Event. keycode ){  Case 13: Return   False  ;}}); 

 

 

 

General ProcessingProgramCode

 

 Using  System;  Using  System. Collections. Generic;  Using  System. LINQ;  Using  System. Web;  Using  Model;  Using  Bll; Namespace  Web. Handler {  ///   <Summary>      ///  Abstract description of changecaname  ///   </Summary>      Public   Class  Changecaname: ihttphandler {  Public   Void  Processrequest (httpcontext context) {context. response. contenttype ="  Text/plain  "  ;  String Caid = context. Request. querystring [ "  Caid  "  ];  String Caname = context. server. urldecode (context. Request. querystring [ "  Caname  "  ]); Category ca =New  Category (CAID, caname );  //  Determine whether the class alias exists Categorymanger camgr = New  Categorymanger ();  If  (Camgr. isexist (caname )){  //  Exist Context. response. Write ( "  False  "  ); Return  ;}  //  Change Database category name              Bool B = Camgr. Update (CA );  If  (B) {context. response. Write (  "  True  "  );}  Else  {Context. response. Write ( "  False  "  );}}  Public   Bool  Isreusable {  Get  {  Return   False  ;}}}} 

 

Simple FunctionsBut it is very convenient to use.I personally think it is good.Please be careful not to make jokes..

In addition, the jquery function is required to achieve this effect. The jquery download is attached here. If you need it, you can use it.

Jquery source file