JQuery :: Edit in Place

Не сочтите этот материал за профессиональное изложение. Это не так. Я просто хотел поделиться своим опытом с людьми, которые смогут его применять в своих проектах и делать Интернет проекты более удобными для использования.

Начнем:
Делали механизм для роликов с разработчиками. Суть простая: загружено множество роликов, а потом они проигрываются в плеере. Сами ролики на сервере представляют собой музыкальые файлы и записи в БД. Записи имеют свои св-ва.
Ниже речь пойдет только о двух: позиция ролика в общей очереди и название.
Чтобы редактировать позицию ролика не очень-то хотелось переходить на специальную страницу, где можно было бы отредактировать это св-во. Роликов было около 150 :) Представляете какую рутиную операцию приходилось бы делать.
Как раз на днях просматривал JQuery. Вообще до того момента я больше склонялся к mootools, но после более глубокого общениея с первым из этого списка решил, что остановлюсь на этом фреимфорке.


Вот что я использовал:

Пошел на сайт и перешел в раздел плагинов и нашел вот такой вот подходящий полностью для моих целей plugins.jquery.com/project/NindafEditableInput

Предварительно не забудьте скачать сам фреимфорк docs.jquery.com/Downloading_jQuery

Привел его к нужному мне виду:

$(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 = "<input id='" + namex + "' type='text' style='width: " + options.width + "' value='" + text_saved + "' />";
                        var btnSend = "<input type='submit' id='btnSave" + this.id + "' value='ок' />";
                        var btnCancel = "<input type='button' id='btnCancel" + this.id + "' value='отмена' />";
                        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('Повторите пожалуйста...');   
                           }
                           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).addClass(«highlight»)});
            $('.rolicCell').mouseout(function(){ $(this).removeClass(«highlight»)});
   });

* This source code was highlighted with Source Code Highlighter.

Если Вы возьмете этот код и подгрузите его, то получите следующее:

1.При событии onmouseover на элемент (в моемслучае это tr) с классом CSS .rolicCell будут добалены свойства из класса CSS .highlight, соответсвенно при событии onmouseout свойсва ксласса .highlight будут удалены с элемента.

2. Для каждого тега <strong> и <a> с классом .editable будет применен механизм «edit in place». Это означает, что при щелчке на этом элементе откроется поле <input> с текущем текстом, две кнопки OK и Отмена.

Теперь для обновления данных Вам необходимо:
1. Щелкнуть на элементе (в нашем слечае <strong class=" .editable"> или <a class=" .editable"&>)
2. Подтвердить нажатием на кнопку OK

Что происходит:

С помощью AJAXа данные отправляются на серверную часть (/modules/Player/action_ajax.php)

changePosition — это произвольный параметр. Он сообщает /modules/Player/action_ajax.php скрипту какой из его методов использовать для обработки отправленных данных.

У новичков могут возникнуть проблемы с кодировкой. Тогда при ответе из PHP указывайте принудительно кодировку:

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

Помните, что AJAX всегда использует UTF8 при передаче данных на сервер, а если у нас БД работает в windows-1251, то следует использовать php функцию преобразования кодировки iconv. К примеру:

$newTitle = iconv('UTF-8', 'windows-1251', $newTitle); Остальное впринципе по вкусу. Можете использовать вместо GET отправки POST, но эти детали Вам нужно изучать самим.