Step 238. Library jQuery. The use of expansion modules. Extension library jQuery UI. Form. Jeditable widget

In this step we will look at the basic usage of this widget.

The material of this step is based on http://it-route.ru/jeditable_manual_ru/.

Extension Jeditable converts the elements that are not form elements, in the input fields available for editing when the user performs some action, such as clicking or double-clicking. Changed the element content is automatically sent to the server.

Addresses where it is possible to take component: http://www.appelsiini.net/projects/jeditable/ or http://plugins.jquery.com/project/jeditable/.

This editor works in the following way: the user clicks the left mouse button on the block page text. The block of text becomes a form. The user edits contents and presses the button to Send. The new text is sent to the server and so is saved. Form reverts back to a block of text.

Fig.1. The result of the script

The full text of this example can be found here.

Consider the basic principles of operation of this script.

For example we will use the following HTMLcode:

  
QUEEN
Queen - the popular British rock band that achieved wide fame in the mid 70-ies of XX century, is one of the most successful bands in the history of rock music.

The only required parameter is the address that will receive the edited text:

 // Jeditable $(document).ready(function(){ $('.edit').editable('../cgi-bin/echo.php'); }); 

The above code does the following: elements with class editbecome editable form. The edit begins with a single Selska the left mouse button on this element. Edit widget in the form is of type text. Width and length of the element coincides with the size of the original text block. If the user clicks the mouse outside of the form – changes are discarded and the form removed. The same effect happens if the user presses ESC. When the user presses ENTER, sending the modified form data to the script echo.phpat the specified address.

Let’s add some parameters.

Use the element textarea for blocks with class edit_area. They will also be the image that will appear in the data loading process to the server. Elements with class edit will have images instead of text …Saving. As a bonus let’s add the clues. They tell users what to do.

 // Jeditable $(document).ready(function(){ $('.edit').editable('../cgi-bin/echo.php', { indicator : 'Saving...', tooltip : 'Click to edit...' }); $('.edit_area').editable('../cgi-bin/echo.php', { type : 'textarea', cancel : 'Cancel', submit : 'OK', indicator : ", tooltip : 'Click to edit...' }); }); 

Fig.1. The result of the script

The full text of this example can be found here.

We give additionally the text file echo.php:

  

Note that here we use the function iconv() to convert text. This is necessary in order to correctly display the Cyrillic alphabet.

These two examples are enough for most needs. For those for whom this is not enough – let’s continue.

In the next step we will continue to examine this question.

The previous step the Content of the Next step