jquery - jEditable での編集時に XHTML マークアップを無視する

Question

jEditable を使用してテーブルをインラインで編集しています。その 3 番目の列には電子メール アドレスが含まれています。この列にはプレーンテキストが含まれていますがmailto:、 jQuery を使用してリンクに変換されます。現在、jEditable がアクティブ化されている場合、ユーザーには次のように表示されます。<a href="mailto:example@example.net">example@example.net</a>

<td>変更を行うユーザーが HTML を処理する必要がなく、代わりにこれだけが表示されるように、jEditable にこれらの s をプレーンテキストとして処理させるにはどうすればよい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" ]]
    });
});

コードの大部分をお詫びしますが、そのほとんどは重要なようです。

Answer 1

テスト ページをセットアップすることはできませんが、ここにアイデアがあります。jEditable ソースを調べたところ、「onedit」というイベントがあります。このイベントは、実際の編集が実行される前にトリガーされます。このイベントをサブスクライブし、セルの内容を通常のテキストに変更します。コールバック関数で、mailto:link を持つように値を再フォーマットします。

何かのようなもの：

$(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：

ユーザーが編集をキャンセルしたときに、電子メール アドレスが正しくフォーマットされるようにコードを修正しました。これを実現するために、電子メールを含む TD に「emailAddress」クラスを追加します。このクラスは onreset メソッドでチェックされます。

Answer 2

前の回答を修正して完了しました 。onResetは少しトリッキーです。jEditableは、onReset 関数が終了した後、コンテナー (ここでは TD 要素) の元のコンテンツで上書き (復元) します。したがって、html/form を新しい値に置き換えるのではなく、この「バックアップ値」を上書きする必要があります。

さらに、その onReset コンテキストには $(this) オブジェクトはありません。これが 2 番目のトリックです。

$(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" ]]
    });
});