Question

Using jQuery plugin jEditable. Problem I’m having is that I want whatever is editable to display the text instead of the html after I trigger the jEditable event.

For example if I have an element <span class="editable">Jack & Jill</span>, when I click it, I get Jack & Jill, but what I want is Jack & Jill as my value in the input so that the user doesn’t see HTML.

There must be something I can do with the data setting [perhaps a value.replace(); or something]. Right now I just have it returning the the value.

CODE

$('.editable').each(function() {
      $(this).editable('url', {
                data: function(value, settings) {
                      var retval = value;
                      return retval;
                }

      });
});

Answer 1

When you render the page with php, it looks like you are using htmlspecialchars() or similar to translate & into its html entity equivalent &.

So when you edit it, instead of loading the information from the item on the page, you need to load it from an ajax call to your server (which will return the actual html, without running it through htmlspecialchars() or anything else).

Jeditable gives you a nice option for this, so try something like:

$('.editable').each(function() {
      $(this).editable('url', {
                loadurl  : 'http://www.example.com/returnUntouchedhtml.php',
                data: function(value, settings) {
                      var retval = value;
                      return retval;
                }

      });

});

You can find more examples/information on this page: http://www.appelsiini.net/projects/jeditable