Step 241. Library jQuery. The use of expansion modules. Extension library jQuery UI. Form. Widget Jeditable (the end)

In this step we will review the basic properties and events of this widget.

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

You can get complete control over Ajaxrequests. For this you need to replace the url with the function. Other parameters remain unchanged.

 $('.editable').editable(function(value, settings) { console.log(this); console.log(value); console.log(settings); return(value); }, { type : 'textarea', submit : 'OK'}); 

It is worth noting that the function must return a string. Usually this is the edited text. It will be shown on the page after editing.

We list some of the parameters that are used in this widget.

  • (String) method – the method used when the edited content is sent. The default value is POST.

  • (Function) callback function called after the form is submitted. It receives two parameters. Value contains the submitted text. Settings contains the settings of the plugin. Inside the function this refers to the original selected element.
     $('.editable').editable('http://www.example.com/save.php', { type : 'textarea', submit : 'OK', callback : function(value, settings) { console.log(this); console.log(value); console.log(settings); } }); 
  • (String) name – the name of the sent parameter, which contains the edited text. The default value.
     $('.editable').editable('http:www.example.com/save.php', { name : 'new_value' }); 
  • (String) id – the name of the upload parameter that contains the id of the editable element. The default value of id.
     $('.editable').editable('http://www.example.com/save.php', { id : 'element_id' }); 
  • (Mixed) submitdata is an optional parameter. Can contain both data and a function that returns the data.
     $(".editable").editable("http://www.example.com/save.php", { submitdata : {foo: "bar"}; }); $(".editable").editable("http://www.example.com/save.php", { submitdata : function(value, settings) { return {foo: "bar"}; } }); 
  • (String) type – the type of element for data entry. By default, this is one of the following: text, textarea or select. Additional types can be added using the custom API.
  • (Integer) rows – number of rows in the textarea.
  • (Integer) cols – number of columns in the textarea.
  • (Integer) height – the height of the input element in pixels. The default value is auto. This means that the height is automatically calculated. You can set the value to none.
  • (Integer) width – width of the input element in pixels. The default value is auto. This means that the width is calculated automatically. You can set the value to none.
  • (String) loadurl – usually the contents of the form will be the same as the contents of an editable element. However, this option will allow to load data from an external URL.
     $(".editable").editable("http://www.example.com/save.php", { loadurl : "http://www.example.com/load.php" }); 

    It is worth noting that the ID of the edited element will be automatically added to the query. For example, the URL might look like this:

     http://www.example.com/load.php?id=element_id 
  • (String) loadtype – the type of query when using loadurl. The default is GET. You can also use GET or POST.
  • (Mixed) loaddata – additional parameter when using loadurl. Can contain both data and function, the returned data.
     $(".editable").editable("http://www.example.com/save.php", { loaddata : {foo: "bar"}; }); $(".editable").editable("http://www.example.com/save.php", { loaddata : function(value, settings) { return {foo: "bar"}; } }); 
  • (Mixed) data – the form data is transmitted for editing. Can contain as a string, and the function returned a string. It can be useful. when it is necessary to change the data before editing.
     $(".editable").editable("http://www.example.com/save.php", { data : "Lorem ipsum"; }); $(".editable").editable("http://www.example.com/save.php", { data: function(value, settings) { // Convert 
    
    to newline.
    var retval = value.replace(//gi, 'n'); return retval; } });

By default, when the user clicks outside of editable area, all changes are discarded. You can control this by setting the parameter onblur. Possible values:

  • cancel – clicking outside editable area cancels changes. Pressing the submit button sends the data.
  • submit – clicking outside editable area submits the data.
  • ignore – click outside editable area is ignored. Pressing ESC cancels changes. Pressing the submit button sends the data.

The event, which begins after the edit may be specified in the options event. All events from jQuery are supported. Most commonly used click and dblclick.

In the next step we consider the extension of Masked Input.

The previous step the Content of the Next step