JQuery :: Edit in Place

Do not consider this material for professional presentation. This is not true. I just wanted to share my experience with people who can use it in their projects and make Internet projects more convenient for use.

Let's start: We
made a mechanism for videos with developers. The essence is simple: a lot of videos are loaded, and then they are played in the player. The videos themselves on the server are music files and records in the database. Records have their own.
Below we will focus on only two: the position of the video in the general queue and the name.
To edit the position of the video, I didn’t really want to go to a special page where you could edit this property. There were about 150 rollers :) Imagine what a routine operation would have to be done.
Just the other day I was browsing through jQuery. In general, up to that moment I was more inclined to mootools, but after a deeper communication with the first one from this list I decided that I would focus on this freymfork.


Here's what I used: I

went to the site and went to the plugins section and found one that is completely suitable for my purposes plugins.jquery.com/project/NindafEditableInput

First remember to download the freymfork itself docs.jquery.com/Downloading_jQuery Brought

it to me mind:

$ (document) .ready (function () {

         (function ($) {
            
          $ .fn.editable = function (options) {   
            
            var defaults = { 
               typex: "text",      
               url: "action_ajax.php",
               actionx: "nothing ",
               Id: 0,
               style_class:" editable ",      
               width:" 100px "
           }; 
          
           var options = $ .extend (defaults, options); 

            return this.each (function () {
               
               var obj = $ (this);
                     
               obj. addClass (options.style_class);      
               
               var text_saved = obj.html ();
               var namex = this.id + "editMode";
               var items = "";                  
                                          
               obj.click (function () {
                  switch (options.typex) {
                     case "text": {
                        var inputx = "";
                        var btnSend =" ";
                        var btnCancel =" ";
                        items = inputx + btnSend + btnCancel;
                        break;
                     }
                  } 
                  
                  obj.html (items);

                  $ (" # "+ namex) .focus (). select ( );         
                  $ ("# btnSave" + this.id, obj) .click (function () {
                     $ .ajax ({
                        type: "GET",          
                        data:           
                           {              
                              text_string: $ ("#" + namex) .val (),
                              actionx: options.actionx,
                              idx: options.id                                       
                           },
                        url: options.url,                
                        success: function (data) {
                           if (data> '') {
                              obj .html (data) .css ('background-color', '# 993399');                     
                           } else {
                              obj.html ('Please repeat ...');   
                           }
                           text_saved = data;      
                        },
                        error: function (objHttpRequest, error_str) {
                           obj.html (error_str);
                        }
                     });            
                  })            
                  
                  $ ("# btnCancel" + this.id, obj) .click (function () {
                     obj.hide ();
                     obj.show (). text (text_saved);
                     

                  })
                     
                  return false;
               });       
            });         
          };
         }) (jQuery);

   / * case events * /
   / * Change Title of Rolic * /
   $ ('a.editable'). each (function () {
            $ (this) .editable ({
               url: "/modules/Player/action_ajax.php",
               actionx: "changeTitle",
               id: $ (this) .attr ('title'),
               width: "250px"
               });
   });

   / * Change Position of Rolic * /
   $ ('strong.editable'). Each (function () {
            $ (this) .editable ({
               url: "/modules/Player/action_ajax.php",
               actionx: "changePosition",
               id: $ (this) .attr ('title'), // original position
               width: “20px”
               });
   });

            $ ('. rolicCell'). mouseover (function () {$ (this).
            $ ('. rolicCell'). mouseout (function () {$ (this) .removeClass ("highlight")});
   });

* This source code was highlighted with Source Code Highlighter .

If you take this code and load it, you will get the following:

1. When the onmouseover event occurs on an element (tr in my case) with the CSS class .rolicCell, the properties from the CSS class .highlight are added, respectively, with the onmouseout event the properties of the .highlight class will be deleted from the item.

2. For each tag and with the .editable class, the “edit in place” mechanism will be applied. This means that clicking on this item will open a fieldwith the current text, two OK and Cancel buttons.

Now to update the data you need:
1. Click on the item (in our case or )
2. Confirm by clicking on the OK button.

What happens:

Using AJAX, the data is sent to the server side (/modules/Player/action_ajax.php)

changePosition is arbitrary parameter. It tells the /modules/Player/action_ajax.php script which of its methods to use to process the sent data.

Beginners may have problems with the encoding. Then, when responding from PHP, specify the encoding forcibly:

header ('Content-type: application / html; charset = "windows-1251"', true);
die ($ newTitle);

Remember that AJAX always uses UTF8 when transferring data to the server, and if our database works in windows-1251, then use the php iconv encoding conversion function. For example:

$ newTitle = iconv ('UTF-8', 'windows-1251', $ newTitle); The rest is in principle to taste. You can use POST sending instead of GET, but you need to study these details yourself.