Jquery tutorial (11) use the jquery Java Script library to implement Ajax-based "instant changes"

I have seen this before on the quirksmode websiteCodeLater, I saw a more Web 2.0 style solution on the 24 ways website. This time I will show you two ways to use jquery to implement the same function (or even better.

Target

A page designed with Ajax (or Ahah) technology, visitors can edit content on the (x) HTML page they see without leaving.

Solution

Click the text to edit, and a textarea with the SAVE and cancel buttons is displayed. The modified part is transmitted to a PHP script file on the server through ahah to update the database (MySQL or common files ).

Demo

Ajax-style instant modification demo 1

In this first demonstration, I used a div element with ID "editinplace. When you move the mouse over this area, the background color turns pale yellow. Click Text to start some Dom operations. The DIV element is replaced by a textarea element, which contains the original text.

Click the Save button to send new HTML content to the PHP script file on the server, and output the new text content (via $ _ post) again ).

In a real application environment, you should also add a security check before you can update the database and return the updated page content. colleagues tell jquery that the execution is successful.

In this example, all modifications are successful. The information sent to the PHP script is returned to the jquery code intact and displayed in a common warning window.

Explanation

The beginning part has been mentioned many times. If you do not want to use the document. Ready function provided by jquery, you can choose your favorite Init () function.

 
$(Document).Ready(Function(){Setclickable()Bytes ;})Bytes ;
 

The setclickable () function is executed on the first page. Its task is to do the following:

Find the DIV element with the ID "editinplace" and tell jquery to perform some operations when these divs are clicked.

 
Function setclickable() {$('# Editinplace').Click(Function() {
 

The task of reading the HTML code inside the DIV is handed over to the HTML () function of jquery. These html codes are added to form the SAVE and cancel buttons in textarea.

 
VaR textarea ='<Div> <textarea rows = "10" Cols = "60">'+ $(This).Html()+'</Textarea>'Using VaR button ='<Div> <input type = "button" value = "save" class = "savebutton"/> or <input type = "button" value = "cancel" class = "cancelbutton "/> </div>'Required var revert = $(This).Html()Bytes ;
 

Similarly, the HTML code found inside the DIV will be assigned to a variable called "revert. This variable is used to output the original text in the event where the cancel button is pressed.

 
VaR revert = $
 

(This).Html()Bytes ;

Jquery's Dom function "after" is used to place the newly generated textarea HTML code after the DIV element we specified. I followed the chain and added a remove () method to remove the DIV element to save code.

 
$(This).After(Textarea + button).Remove()Bytes ;
 

When using jquery, I use the object name to locate the SAVE and cancel button objects. I instruct jquery to trigger the last function "savechanges" when any button is pressed ". I told jquery what to do when the DIV element is clicked, but I didn't add a semicolon at the end because I want to chain other methods behind this Div operation statement.

$('. Savebutton').Click(Function(){Savechanges(This,False)Bytes ;})Billing $('. Cancelbutton').Click(Function(){Savechanges(This, Revert)Bytes ;})Bytes ;})
 

I chained a simple Mouseover and mouseout event and told jquery to add and remove an object when the mouse pointer passes over the DIV element we specified (ID = editinplace.

.  Mouseover   ( function  ( )  { $  (  This  ) .  addclass   (  "editable"  )  margin } ) .  mouseout   ( function  ( )  { $  (  This  ) .  removeclass   (  "editable"  )  margin } )  margin } margin  // end of function setclickable  

The function "savechanges" takes the button object as the first parameter, while the cancel parameter takes two values, false or the HTML code content stored in the revert variable.

 
Function savechanges(OBJ, cancel) {
 

If cancel is false, the function saves the changes and sends the changes to the PHP script on the server in HTML format. Here I use a built-in Dom function of jquery to extract textarea content: parent () and siblings ().

 
If(! Cancel) {VaR T = $(OBJ).Parent().Siblings(0).Val()Bytes ;
 

Dom basics are beyond the scope of this series of tutorials, but in this application I just told jquery that "the object (Save button) has a parent element (DIV )... Find it. That element has one or more same-level DOM tree objects... I just want to find the first one. Then extract all the content of that object ."

(Wait... If you are not familiar with Dom-style code, my comments may not be easy to understand. I suggest you Google "dom Java Script" or other related information before .)

These HTML values are assigned to the T variable. Now we need to send it to test2.php through the POST method.

 
$.Post("Test2.php",{Content: T}, Function(Txt){Alert(Txt)Bytes ;})
 

Bytes ;}

If cancel has a value, it must be the original HTML content stored in the revert variable. Therefore, at this time, I want the variable t to become the original HTML content.

 
Else {VaR T = Cancel success ;}
 

The next step is to place a new Div element with the ID "editinplace" through the DOM function provided by jquery, which then contains the textarea element... Delete the DIV element.

$(OBJ).Parent().Parent().After('<Div id = "editinplace">'+ T +'</Div>').Remove()
 

In the shell, this tells jquery to Jump twice in the DOM tree. After attaching the HTML code to the object at the location, remove the object ."

Finally, call the setclickable function again and disable the savechange () function. The setclickable () function indicates resetting onmouseover, onmouseout, and onclick events to the initial state.

 
Setclickable()Bytes ;}
 

Example 2

The second method is very similar but a little complicated.

Example 2

The huge independent Div element is not used. In this example, the p label of each section is transformed into a separate editable area.

The difficulty here is how you specify the correct section P tag when sending data to the server script.

Here I solve the problem by numbering each P tag and sending this number to the PHP script on the server. In the alert window, you will see how the PHP script "knows" which P tag contains the modified content.

Known issues

In practical applications, when using similar functions, you must first verify the validity of the changed content before sending data to the server. Obviously, we deliberately ignore this content here.