Игнорирование разметки XHTML при редактировании с помощью jEditable - PullRequest
Новая
       28

Игнорирование разметки XHTML при редактировании с помощью jEditable

1 голос
/ 16 июля 2009

Я использую jEditable для редактирования встроенной таблицы, третий столбец которой содержит адреса электронной почты. Этот столбец содержит открытый текст, но он преобразуется в mailto: ссылки с помощью jQuery. В настоящее время, когда активирована jEditable, пользователь видит это: <a href="mailto:example@example.net">example@example.net</a>

Как заставить jEditable обрабатывать эти <td> как открытый текст, чтобы пользователю, вносившему изменения, не приходилось иметь дело с HTML, а вместо этого он просто видит: example@example.net?

Это касается jQuery: 

$(document).ready(function() {  
    var init;
    $('table#data tbody td').editable( 'media/support/save.php', {
        event: "dblclick",
        submit: "OK",
        cancel: "Cancel",
        tooltip: "Double-click to edit...",
        "callback": function(sValue,y) {
            alert('The server has been updated.'); 
            var aPos = init.fnGetPosition(this); 
            init.fnUpdate( sValue, aPos[0], aPos[1] );
        }
    });

    var init = $("table#data").dataTable({
        "sDom": 'lfr<"clear">tip<"clear">T', 
        "bStateSave": true,
        "fnDrawCallback": function() {
            $('table#data tbody tr').each(function() {  
                var email = $(this).find('td:last');
                $(email).html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>');
            }); 
        },
        "aaSorting": [[ 0, "asc" ]]
    });
});

Я прошу прощения за большой кусок кода, но большая часть его показалась важной.

Ответы [ 2 ]

1 голос
/ 15 октября 2011

Я только исправил и дополнил предыдущий ответ: onReset немного сложнее, jEditable перезаписывает (восстанавливает) исходное содержимое контейнера (здесь TD-элемент) после завершения нашей функции onReset. Поэтому мы должны перезаписать это «резервное значение» вместо замены html / формы новым значением.

Кроме того, в этом контексте onReset нет объекта $ (this), это второй трюк. 

$(document).ready(function() {  
    var init;

    $('table#data tbody td').editable( 'media/support/save.php', {
            event: "dblclick",
            submit: "OK",

            //I am assuming that 'this' will refer to the 'TD' which user double clicked on.
            //If not, change the code accordingly.
            onedit : function(settings, self) { $(this).html($(this).text()); }

            onreset : function(settings, original) 
                      { 
                         //After onEdit function ends, jEditable saves automatically the current value into a "revert" attribute. This means that we get back the text formatted email after clicking on the Cancel button (and not the html formatted)!
                         //Instead of replacing the current FORM element, we should overwrite this backup value, which is stored in the form's parent element. JEditable restores automatically this value after this onReset function ends.

                         //We have added 'emailAddress class to our TD in initial setup.
                         //When user cancels editing and the cancelled cell has the 'emailAddress' class,
                         //we format it to have mailto link.
                         curr_form = this[0];          //FORM object
                         par = curr_form.parentNode;   //TD object
                         if($(par).hasClass('emailAddress'))
                         {
                             par.revert = '<a href="mailto:' + par.revert + '">' + par.revert + '</a>';
                         }
                      },

            cancel: "Cancel",
            tooltip: "Double-click to edit...",
            "callback": function(sValue,y) {
                    alert('The server has been updated.'); 

                    //If the edited cell was the email cell, then format the email with mailto link.
                    if($(this).hasClass('emailAddress'))
                    {
                         $(this).html('<a href="mailto:' + sValue + '">' + sValue + '</a>');
                         init.fnAdjustColumnSizing();
                    }   
            }
    });

    var init = $("table#data").dataTable({
        "sDom": 'lfr<"clear">tip<"clear">T', 
            "bStateSave": true,
            "fnDrawCallback": function() {
                $('table#data tbody tr').each(function() {  
                var email = $(this).find('td:last');
                    $(email)
                        .html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>')
                        .addClass('emailAddress'); //Add 'emailAddress' class so that we can idenfiy this cell during onreset of jEditable.

                    }); 
        },
        "aaSorting": [[ 0, "asc" ]]
    });
});
1 голос
/ 16 июля 2009

Я не могу настроить тестовую страницу, но вот идея. Я посмотрел на источник jEditable, и у него есть событие под названием onedit. Это событие срабатывает до фактического редактирования. Подпишитесь на это событие и измените содержимое ячейки на обычный текст. В функции обратного вызова переформатируйте значение, чтобы получить ссылку mailto: *. 1001 *

Что-то вроде: 

$(document).ready(function() {  
    var init;

    $('table#data tbody td').editable( 'media/support/save.php', {
            event: "dblclick",
            submit: "OK",

            //I am assuming that 'this' will refer to the 'TD' which user double clicked on.
            //If not, change the code accordingly.
            onedit : function(settings, self) { $(this).html($(this).text()); }

            onreset : function(settings, original) 
                      { 
                         //We have added 'emailAddress class to our TD in initial setup.
                         //When user cancels editing and the cancelled cell has the 'emailAddress' class,
                         //we format it to have mailto link.
                         if($(this).hasClass('emailAddress'))
                         {
                            $(this).html('<a href="mailto:' + $(this).text() + '">' + $(this).text() + '</a>')
                         }
                      },

            cancel: "Cancel",
            tooltip: "Double-click to edit...",
            "callback": function(sValue,y) {
                    alert('The server has been updated.'); 

                    //TODO: If the edited cell was the email cell, if yes, then format the email with mailto link.

                    var aPos = init.fnGetPosition(this); 
                    init.fnUpdate( sValue, aPos[0], aPos[1] );
            }
    });

    var init = $("table#data").dataTable({
        "sDom": 'lfr<"clear">tip<"clear">T', 
            "bStateSave": true,
            "fnDrawCallback": function() {
                $('table#data tbody tr').each(function() {  
                var email = $(this).find('td:last');
                    $(email)
                        .html('<a href="mailto:' + $(email).text() + '">' + $(email).text() + '</a>')
                        .addClass('emailAddress'); //Add 'emailAddress' class so that we can idenfiy this cell during onreset of jEditable.

                    }); 
        },
        "aaSorting": [[ 0, "asc" ]]
    });
});

РЕДАКТИРОВАТЬ 1:

При просмотре источника jEditable запускает событие onreset, если пользователь нажимает кнопку отмены. Я обновил код выше. Попробуй.

РЕДАКТИРОВАТЬ 2:

Изменен код, так что когда пользователь отменяет редактирование, адрес электронной почты форматируется правильно. Чтобы достичь этого, мы добавляем класс «emailAddress» к TD, который содержит электронные письма. Этот класс проверяется в методе onreset.

...