Ignoring XHTML markup when editing with jEditable

Question

I am using jEditable to edit a table inline, the third column of which contains email addresses. This column contains plaintext, but it is converted to mailto: links using jQuery . Currently, when jEditable is activated, the user sees this: <a href="mailto:[email protected]">[email protected]</a>

How do I force jEditable to treat these <td>s as plaintext, so that the user making the changes won't have to deal with HTML and will instead just see this: [email protected]?

This is the jQuery concerned:

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

I apologize for the big chunk of code, but most of it seemed important.

Answer 1

I am not able to setup a test page but here's an idea. I looked at the jEditable source and it has an event called 'onedit'. This event is triggered before the actual edit is performed. Subscribe to this event and change the content of the cell to normal text. In the callback function, reformat the value to have a mailto:link.

Something like:

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

EDIT 1:

From looking at the source, jEditable fires 'onreset' event if user clicks cancel. I have updated the code above. Try it.

EDIT 2:

Modified the code so that when user cancels editing, email address is formatted correctly. To achieve this, we add 'emailAddress' class to TDs which contains emails. This class is checked in the onreset method.