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, но эти детали Вам нужно изучать самим.
    Поделиться публикацией

    Комментарии 12

      +1
      Ужас какой-то.
      Наверное стоило бы просто дать ссылку на сам плагин, а если вы хотели рассказать, то не мешало бы оформить, к примеру через source.virtser.net/
        0
        Спасибо за подсказку!
        0
        Мне кажется данная технология называется Edit In Place (редактирование на месте).
          0
          ок, хорошо поработал
            +2
            Есть более мощный плагин для аналогичных целей: Jeditable.
              0
              Спасибо за ссылку, отличный плагин, возьмем на вооружение.
              0
              А я считаю, что очень даже хорошо написано.
              Я бы так не смог.
                0
                А рабочий пример можно посмотреть?
                  0
                  Рабочий к сожалению не могу дать. Он реализован на стороне админки. К тому же есть коммерческая договоренность. Если есть конкретный вопрос, я готов ответить на него.
                    0
                    реализовывал подобное в одном проекте, только гораздо проще(задача такая была), вот код:
                    $(function(){
                    $('div.editdiv').click( function() {
                    var obj = $(this);
                    if (!$(obj).children().is(«form»)) {
                    var text = obj.html();
                    obj.empty()
                    .html(''+text+'');
                    }
                    });
                    });

                    $.fn.saveTextArea = function(editdiv) {
                    var edittext = $('#'+editdiv+' > form > textarea').val();
                    $('#'+editdiv).empty()
                    .html(edittext);
                    //тут аяксом сохраняем в БД
                    }
                    т.е. при клике на любом диве с классом editdiv, он очищается, и в нем появляется форма с его содержимым, при сабмите, форма сохраняется, а в див вставляется отредактированный текст…
                      0
                      упс, html порезало в предыдущем комменте =(
                      вот ссылка

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое