jeditable textile textarea renderer issue

If you have ever played with jeditable, eventually you will get to this issue, which is dealing with the textarea. The Textile renderer on the official jeditable demo page works perfectly fine, but when I tried it I experienced quite some difficulty.

Basically the text I enter would NOT be what I see after pressing the ok button, due to the html rendering of the newline character. I found a lot of people sharing their pain all over the internet:

http://stackoverflow.com/questions/5277800/jeditable-handling-output-that-has-line-breaks
http://forum.jquery.com/topic/jeditable-jquery-question-regarding-textarea

After quite some time hacking around (especially on that demo page and its source), I finally got it working that way it’s supposed to be. Here is my solution.

First, your save and load php scripts should be doing what they have been doing. No change at all. Just make sure you have clean data in the database.

Second, in your page.php file (which renders your textarea), call a string replace function to change all substring “n” to “<br>n”. Below is the PHP code. It will give you the good initial values, rendered correctly by your browser. 

$s = str_replace("n", "
n", $s);



Third, add the following callback to your .editable attribute list. Basically, on the client side it renders the line breaks for you. 

callback: function(value, settings) { 
	var retval = value.replace(/n/gi, "
n"); 
	$(this).html(retval);
}

So it looks something like the following: 

$('.editable_textile').editable('save.php', { 
    indicator : '',
    loadurl   : 'load.php',
    type      : 'textarea',
    submit    : 'OK',
    callback: function(value, settings) { 
	var retval = value.replace(/n/gi, "
n"); 
	$(this).html(retval);
    },
    cancel    : 'Cancel',
});

Then you are done! Hope this can save you some time. 😉

8 thoughts on “jeditable textile textarea renderer issue”

  1. mark pollak says:

    hi
    this example isn’t working for me – the javascript when copied and pasted is not working – I’m pretty sure it is this line –
    var retval = value.replace(/n/gi, “n”);

    – i’m desperate to get this working on my site – could you please take a look at your code and let me know?
    thanks

    Like

  2. Hey Mark, try changing that line to the following see if it works? Basically I took away the double quote escaping.

    var retval = value.replace(/n/gi, “<br>n”);

    Like

  4. Hey Geffrey, your save script and load script should just do the plain saving and loading operations. That is to say, in your database table, you should not have any “<br>”s.

    While in the page where you generate your editable textarea, you will need to replace all “n” with “<br>”. Say if you have a page called EasyForm.php, that page needs to read your saved value from your db to say variable $my_str, then you call the str_replace function to replace all “n” in $my_str to “<br>”, then output that new $my_str to your textarea. That way, you have a correct initial html output.

    But that’s just the initial display. You will need to add the callback js function mentioned above to handle the string replacement for subsequent interactions with the textarea.

    Like

  6. masaki says:

    Hi I´ve published on jquery forum a cleanup on the textarea by vonverting back to new line and cleaning up extra new line may have.
    Here is the code
    data : function(value,settings) {
    value = value.replace(/(rn|n|r)/gm,””);
    var retval = value.replace(“”,”n”);
    return retval;
    },

    Like

  7. masaki says:

    Little adjust to replace all not just first
    data : function(value,settings) {
    value = value.replace(/(rn|n|r)/gm,””);
    var retval = value.replace(//gi,”n”);
    return retval;
    },

    Like

  8. actually for this work without issue the code needs both callback and data functions:
    data : function(value,settings) {
    value = value.replace(/(rn|n|r)/gi,””);
    var retval = value.replace(//gi,”n”);
    return retval;
    },
    callback: function(value, settings) {
    var retval = value.replace(/n/gi, ‘n’);
    $(this).html(retval);
    form.updater.start();
    }

    Like

Leave a comment