New Version of Editable Plugin

October 18th, 2007

Alert! Alert! Another boring new release is out blog entry ahead. If you are bored already go ahead and download latest (1.5.0 at time of writing) Jeditable source, minified (recommended) or packed.

More info and should-be-better documentation at project page.

What is new or changed?

  • Added placeholder parameter. This can be html on plaintext string. It will be shown when editable element is empty.
  • Returned JavaScript is now executed. Allows us to do tricks like returning <script>alert(‘Saved!’)</from> from the save script.
  • Hacks which supported old getload and postload parameters are now removed. Use loadurl and loadtype instead.
  • Callback should now be given in options hash not as third parameter.

Usage of new or changed options below:

 $(".editable").editable("http://www.example.com/save.php", {
     placeholder : "Click me to edit",
     loadurl : "http://www.example.com/load.php",
     loadtype : "POST",
     callback: function(value, settings) {
         console.log(this);
         console.log(value);
         console.log(settings);
     }
 });
 

Thanks

Thanks to Ole Laursen, Dylan Verheul and Mariano Iglesias for providing patches and ideas!


15 Responses to “New Version of Editable Plugin”

  1. Torsten says:

    thanks for the plugin. great work! i hope i can use it soon.

  2. RR_QQ says:

    Hello! Please PLEASE help me solve this issue. I am using JEditable in some divs everything works fine EXCEPT, when using the callback functionality the “Saving….” part does NOT show up AND when i move my mouse and click on another window and the hover back with the mouse over my application that was just edited with jeditable the OLD value that was edited REAPPEARS. But the value edited was saved because its in the DB and if I refresh the page the correct value shows up. HELP! (I’m using PHP)

    var \$j = jQuery.noConflict(); \$j(document).ready(function() \{ \$j(’#$element_id’).editable(function(value, settings) \{

    var \$value = eval('(' + value + ')');
    });
    msg = \$j.ajax(\{ 
                type: \"POST\", 
                url: \"$url\" + \"/update\", 
                data: \"id=$element_id&value=\" + \$value[0] + \"&ajax\",
                async: false
            }).responseText;
    );
    //roi271192950000
    var responses = eval('(' + msg + ')');
    var resSize = responses.length;
    for (var i = 0; i < resSize; i++) {
       Element.update(responsesi, responsesi);
    }
    }, \{
    type   : '$type',
    indicator : 'Saving...'}
  3. Mika Tuupola says:

    RR_QQ : I have bit difficulties understanding nature of your problem. Maybe you can provide me with example page where the problems occurs?

  4. RR_QQ says:

    Hell there Mika, unfortunately I cannot provide you with a link since outside users cannot access it.

    Im trying to use the submitting to function instead of URL feature.

    Well the problem is this in detail:

    1. I have a div with a value (lets say the value is 82) that when clicked the jEditable functionality is executed and the value now appears in a text input box.

    2. I edit the value (I change it to say 777) and press enter to save.

    3. Problem One: The “indicator” label does not appear.

    4. The value is saved in the DB and appears in the page in place of the old value as it should.

    5. Now imagine you have a totally differnt browswer window (or any other program, say Notepad) open right next to the browser window that contains the jEditable functionality.

    6. You click on that other window.

    7. Then you decide to go back to the jEditable page so you hover your mouse over it.

    8. Problem Two: At this point the new value that you just edited and saved changes back to the old value that was displayed before you made any changes to it. In other words the “777” now turns back to “82”. If I refresh the page the appropriate saved value appears (“777”) and not hte “82” which is now saved in the DB as “777”.

    For some reason the code I pasted didn’t show up in its entirety so let me try displaying it one more time. Here it is:

    var \$j = jQuery.noConflict(); \$j(document).ready(function() \{ \$j(’#$element_id’).editable(function(value, settings) \{ });

    var \$value = eval('(' + value + ')');
    );
    msg = \$j.ajax(\{ 
            type: \"POST\", 
            url: \"$url\" + \"/updateAdRevenue\", 
            data: \"id=$element_id&value=\" + \$value[0] + \"&ajax\",
            async: false
        }).responseText;
    var responses = eval('(' + msg + ')');
    var resSize = responses.length;
    for (var i = 0; i < resSize; i++) {
       Element.update(responsesi, responsesi);
    }
    }, \{
    type   : '$type',
    indicator : 'Saving...'}
  5. RR_QQ says:

    Missing this part int he code at the end: “); });”

    Im using jEditable version 1.5.0

  6. Mika Tuupola says:

    I’m sorry. By just reading this description I cannot help. Would really need to see example page which reproduces the behaviour.

  7. Aaron Barker says:

    Great script, thank you for providing it.

    I just thought I’d suggest some consistency in your naming convention. You refer to the plugin as Editable (this entry’s title), Jeditable (on the project page… “Jedi table” is how that looks to me), and jEditable every once in a while as well (“Projects using jEditable” on project page and a few other times there as well).

    My vote would be for jEditable… but tis your plugin. The Jedi Table version is kinda bad IMHO though.

  8. Adam says:

    I have used Jeditable in several projects and love it. I have a question. Can you tell me how I can have a multiple select box? And have multiple options already selected?

  9. Joeri says:

    Hi, I’m having problems when posting data to php. Special characters (&éèàâô…) are screwed up when putting them into my MySQL database. Is there a way to replace special characters with ASCII name entities before posting the data? Any help is welcome. Tnx!

  10. Mika Tuupola says:

    Aaron: I recently changed naming from jEditable to Jeditable. It seems I have forgot to update some pages. Just a matter of personal preference.

  11. Joeri says:

    found a solution maybe not the most elegant, but it works… var submitdata = {}; var text = input.val(); text = text.replace(/[\340]/g, ”à”); text = text.replace(/[\341]/g, ”á”); text = text.replace(/[\342]/g, ”â”); ...

  12. Mika Tuupola says:

    Joeri: It is an utf-8 problem. Form is submitting utf-8 and your script is expecting something else (or vice versa).

    You should convert everything to use utf-8. If this is not possible convert all text to ISO8859 / Latin-1 in save script before you save to database.

    Adam: You can use custom input for that. Unfortunately I have not needed such thing myself yet so you have to write it yourself :) Some info on how to write custom inputs: Three Button Editable, Example Source and Custom Input Types for Edit in Place.

  13. Daniel says:

    This plugin, in all it’s magnificent awesomeness, is so fantastic I find myself thinking of it as JediTable, rather than jEditable or Jeditable.

    Thought you should know. Thank you!

  14. Dnew says:

    phenominal plugin.

    couple of issues …unfortunately cannot post example as of yet; but maybe you’ll have an idea how to solve.

    1.) when i add buttons to my textarea – they appear to the right instead of below. 2.) the cursor in the textarea is in super-rapid blinking mode (like something is being called repeatedly), instead of normal blinking. it’s not a real big issue, but i wonder why it would be doing that, and not seeming to in your examples.

    stuff here
  15. Dnew says:

    hmmm code did not showup in the post … not sure how to get that to show up….

Sorry, comments are closed for this article.