JQUERY+AJAX+PHP+MYSQL Implementation Classification list management (next) _jquery

In the previous article, we explained in detail how to implement list management additions and deletions, you can see that the front-end page through Ajax and background communication, based on the background processing results in response to front-end page interaction, this is a very typical Ajax and JSON application examples.
This article will continue with the example in the previous article to complete the edit operation.
Edit Item Action
When the user clicks the Edit button, the item becomes edited immediately, an input box appears, the user can re-enter the new content, click the "Save" button to complete the edit operation, or cancel the edit status by clicking the "Cancel" button.
First, by clicking the Edit button, you implement the edit state, in the Global.js $ (function () {...}) Add the following code:

Edit Option 
$ (". Edit"). Live (' click ', Function () { 
  $ (this). Removeclass (' edit '). addclass (' OKs '). attr (' title ', ' Save '); 
  $ (this). Prev (). Removeclass (' del '). addclass (' cancer '). attr (' title ', ' Cancel '); 
  var str = $ (this). Parent (). text (); 
  var input = "<input type= ' text ' class= ' input ' value= '" +str+ "'/>"; 
  $ (this). Next (). Wrapinner (input); 
}); 

As you can see from the code, the class style of the Edit button and the Delete button is changed, the title property is modified, and the category name is wrapped in an input box (Wrapinner), which results in an edit state.
To submit the modified content to the background processing, the following event will occur by clicking the Save button, see the code:

//Edit processing $ (". OKs"). Live (' click ', function () {var input_str = $ (this). Parent (). Find (' Input 
  '). Val (); 
    if (input_str== "") {jnotify ("Please enter category name!"); 
  return false; 
  var str = escape (INPUT_STR); 
  var id = $ (this). Parent (). attr ("rel"); 
     
  var URL = "Post.php?action=edit"; 
  var btn = $ (this); 
        $.ajax ({type: "POST", Url:url, Data: "title=" +str+ "&id=" +id, Success:function (msg) { 
          if (msg==1) {jsuccess ("Edit succeeded!"); var STRs = "<span class= ' del ' title= ' delete ' ></span><span class= ' edit ' title= ' editor ' ></SPAN>&L 
          T;span class= ' txt ' > ' +input_str+ ' </span>; 
        Btn.parent (). HTML (STRs); 
          }else{jnotify ("Operation failed!"); 
        return false; 
} 
      } 
  }); 
}); 

By clicking the Save button in the edit state, you first get the contents of the input box, prompt the user for input if nothing is entered, and then encode the user's input, and obtain the ID for the edited item, passing the input and ID as parameters. Ajax submits to the background post.php processing, and responds to the information returned in the background, if the return succeeds, prompts the user to "edit successfully", and then unlocks the edit state, and prompts the user to "fail" if the return fails.
Background post.php processing Edit Item operation is similar to the new item in the previous article, the code is as follows:

Case ' edit '://Edit Item 
  $id = $_post[' id ']; 
  $title = Unidecode ($_post[' title '], ' utf-8 '); 
  $title = Htmlspecialchars ($title, ent_quotes); 
  $query = mysql_query ("Update catalist set title= ' $title ' where cid= ' $id '"); 
  if ($query) { 
    echo ' 1 '; 
  } else{ 
    echo ' 2 '; 
  } 
  Break 

The above code fragment is added to the post.php switch statement, the code receives the ID and title parameters from the front end, decodes the title parameter, updates the corresponding item in the datasheet, and outputs the execution results to the foreground.
To cancel the edit state, execute the following code by clicking Cancel:

Cancel edit 
$ ('. Cancer '). Live (' click ', Function () { 
  var li = $ (this). Parent (). HTML (); 
  var str_1 = $ (this). Parent (). Find (' input '). Val (); 
  var STRs = "<span class= ' del ' title= ' delete ' ></span><span class= ' edit ' title= ' editor ' > 
  </span> <span class= ' txt ' > ' +str_1+ ' </span> '; 
  $ (this). Parent (). HTML (STRs); 
}); 

In fact, the code reassembled a string, replacing the assembled string with the edit state, which cancels the edit state.
Through such a practical case, we can experience the advantages of front-end technology, the user completed each step is so friendly, this is a user experience one aspect. The jquery library makes AJAX operations so simple that the jquery live method is used in the code to bind the dynamic creation of DOM elements.

The above two is a small series for everyone to organize the jquery+ajax+php+mysql to achieve a classified list management of all the content, I hope to help you learn.