This blog has been retired, new updates are happening at http://josephscott.org/
42

Edit In Place, Version 0.3.3

Posted on August 28th, 2006 / 42 Comments »

Changes in version 0.3.3:

  • Remove trailing newline from edit form (Sheldon)
  • Minified version of EditInPlace.js included in distribution files
  • New option: ajax_data

I’ve tried to keep the size of EditInPlace reasonable, but as more bug fixes and features get added there is only so much you can do. So starting with version 0.3.3 I’m including a minified (via JSMin) version of EditInPlace.js. This brings the JavaScript source from 10,304 bytes to 6,751 bytes.

The new ajax_data option allows you to provided additional data. I’ve had a few requests for this feature, thanks to Joe Lion for reminding me about it. The example page has been updated to show to use this new feature. It’s simple enough:

EditInPlace.makeEditable({
  id: 'edit_this_thing',
  ajax_data: {
    database_id: 12345,
    other_data: 'Some Other String Data'
  }
});

As always, you can browse the Edit In Place files, play with the example page or download the version 0.3.3 release.

42 Responses to “Edit In Place, Version 0.3.3”

  1. September 3rd, 2006 at 6:06 pm Jon Frisby

    Y’know, a handy option for select tags would be the ability to save the change when a new value is selected.

    Also, on_blur: ‘cancel’ doesn’t work for me in Safari — I can’t ever save any changes, even by hitting enter.

    -JF

  2. September 3rd, 2006 at 6:15 pm Jon Frisby

    Also, it would be nifty if you could incorporate Nick Dunn’s moo.fx patch as a toggle-able option.

    -JF

  3. September 4th, 2006 at 3:28 am Sachin Sagar Rai

    How to get the value of ajax_data in php file?
    I tried $_POST['ajax_data'], didn’t work
    Again tried $_POST['ajax_data'][0] thinking its an array, but still didn’t work. How to get the values of ajax_data?

    And
    Yes, the on_blur text element doesn’t save when Save button is pressed in Firefox(1.5.0.3)

  4. September 4th, 2006 at 8:14 am joseph

    Sachin-

    You can access the additional data by name. So the additional data is made available by name, like: $_POST["database_id"]

    Do you have an example up on the web where the on_blur and save button don’t work? I’ll add this to my to do list.

  5. September 4th, 2006 at 8:24 am joseph

    Jon Frisby-

    Adding events that help with the select field would be helpful. I’ll add that to my to do list.

    I’ll look around and see if there are known JavaScript event issues in Safari. I will note though that pressing enter is not the same as on_blur.

    I’m still a bit on fence when it comes to integrating moo.fx. I have been seriously considering it (and looked at bringing in Nick’s changes), but haven’t committed to doing it yet.

  6. September 4th, 2006 at 12:24 pm Sachin Sagar Rai

    Joseph,
    The on_blur not editing bug is in the example page itself.
    http://josephscott.org/code/js/eip/example.html

  7. September 6th, 2006 at 8:22 am Sachin Sagar Rai

    Joseph,
    The on_blur: ‘cancel’ still doesn’t work in your demo page
    http://josephscott.org/code/js/eip/example.html
    Did u fix it??

  8. September 6th, 2006 at 8:39 am joseph

    @Sachin – I haven’t had a chance to even look at it yet. I’m open to suggestions for a fix, other wise it will have to wait until I get the time to figure it out.

  9. September 12th, 2006 at 7:51 am Benjamin

    I’m running a mySQL SELECT query in php that outputs a table of my data. it seems like it should be easy to use your edit plugin to allow easy editing of the generated table. I imagine I would use ajax. any ideas?


    while (($row = mysql_fetch_array($myguestlist,MYSQL_ASSOC)) && ($i
    " valign="top">

  10. September 14th, 2006 at 11:32 am Sheldon

    Joseph,

    Just getting back into the swing of things but still very much enjoying working with EIP!! The new ajax_data option really makes this easy. Anyway, today’s issue is with “orig_text”. It’s in the defaults area with a comment saying “options that are managed for you”. I was thinking that “orig_text” would be passed along with “content” so I could compare content to orig_text and if they are the same I wouldn’t write to the database but it doesn’t seem to work that way. I could do it with ajax_data and just make an option called “oldcontent” but after I update the text once, the “oldcontent” isn’t right for the next update. I know this is all very confusing and the point of “orig_text” is so you can put it back into the new “input type=text” you create and also get the length from it so you know the size of the box it is in but I think it would be nice to have access to it as well as the “content” at the save_url.

    Thanks again.

    Sheldon

  11. September 14th, 2006 at 12:39 pm joseph

    @Sheldon- Sending orig_text in the XHR seems reasonable. Keep in mind that the scope is pretty limited though, perhaps describing it as previous text would be better.

  12. September 14th, 2006 at 2:13 pm Jason

    It doesn’t seem able to process + symbols, they get converted to spaces. Any idea how to solve this?

  13. October 1st, 2006 at 11:59 am KImmo

    Hi,

    I am wondering if it’s somehow possible to initialise EditInPlace in a div-layer loaded with Ajax.Updater from an external page?
    Event.observe(window, ‘load’, init, false) does not seem to work. Perhaps some other event should be observed?

  14. October 2nd, 2006 at 7:50 am joseph

    @KImmo- I think that as long as the browser will process JavaScript when your update is sent you could include an EditInPlace.makeEditable() call in your new layer that should work. Make sure that your makeEditable() call happens after your new layer gets added though. Can you setup an example test page somewhere so we can see exactly what is failing?

  15. October 19th, 2006 at 4:13 am remmelt

    @Sheldon
    Instead of sending double data back, you could use prepared statements. At least using PEAR’s MDB2 with MySQL, only ‘real’ changes are comitted to the database. I would think that any decent database has this facility. It also helps securing against XSS type attacks.

    My problem is with newlines. The example page has a textarea but doesn’t display any newlines on save. I fixed that using nl2br in my PHP script, but then on any consecutive edit the ’s are in the text… Which would freak the hell out of my users. Any idea how I can circumvent this? It’s the same for any htmlspecialchars.

  16. October 19th, 2006 at 4:14 am remmelt

    :) I meant the (smaller-than)br /(greater-than) tags.

  17. October 25th, 2006 at 2:57 am jake

    thanks – script is neat.

    but how to use this for eip of tables?
    lets say i want to edit row 2, column 4: i wonder how to assign those ids to make the appropriate mysql update.
    use something like “editfield_2_4″ as id? i dont know. please give advise or show a little example for an editable table.

  18. November 1st, 2006 at 12:02 pm John

    Hey,
    Amazingly useful tool! Just had a quick suggestion. Since EIP seems to take over the element pretty well, it’d be nice to have some way to run a javascript function after it finishes saving. So, for instance, if you eip a number, you can fire off the javascript to do some math elsewhere on the page. Of course, that adds a suggestion for data type validation (numeric, date, etc etc) but the former seems much more useful than the latter. Anyway, again great work. Thanks again!

  19. November 6th, 2006 at 5:29 pm allister

    checking this out now – but wanted to let you know the d/l link on the example page includes the .gz extension and the file doesnt…

    thanks for the hard work.

  20. November 13th, 2006 at 6:45 am Nick

    yeah it would be great to call another function after the AJAX call finishs. Also an example of the ajax_data would be useful

  21. November 13th, 2006 at 7:18 am Nick

    Sorry to be a bit clearer:

    It would be great if you could call from the ‘action’ page a JS function. Imagine you have a validation script on edit.php and you want to pass an error back to the calling page if the value passed in isn’t correct.

  22. November 13th, 2006 at 8:59 am Nick

    as a quick fix i added in defaults:

    error_message: ‘Error with field’,
    error_message_class: ‘message-bad-small’,
    error_id: ‘Error’,

    and

    if (t.responseText.match(“Error:”)) {
    error_id = id_opt['error_id'];
    Element.addClassName(error_id, id_opt['error_message_class']);
    $(error_id).innerHTML = id_opt['error_message'];
    }

    to the successful AJAX request (in the else).

    then called it like:

    EditInPlace.makeEditable( {
    type: ‘text’,
    id: ‘city’,
    save_url: ‘edit.cfm’,
    max_size: ‘20′,
    error_message: ‘there has been an error with \’city\”,
    error_id: ‘cityError’
    } );

  23. November 13th, 2006 at 9:13 am Nick

    NOTE: this requires you have:
    on the calling page if you’ve not specifed the error_id in the JS EIP call (this is the default).

    If you want a inline error use somehting like:

    Hove

  24. November 14th, 2006 at 2:17 am Nick

    I wonder if there is a way to make 3 fields editable on one click. For example say i have a phone number and the user clicks on it to edit. What i would then like is 3 boxes to appear: international code, area code and number. Then when they click the save button it saves all 3 fileds?

    Any ideas, suggestions?

    TIA

  25. November 14th, 2006 at 9:50 am joseph

    Being able to edit more than one field as a concept is certainly doable. However the current EditInPlace code is designed around editing one field at a time.

  26. November 15th, 2006 at 1:56 am Nick

    Joseph – any tips hints? I’ve created an extra id_opt['type'] that loops over a number sent in but i feel this is a hack?

  27. November 16th, 2006 at 11:04 am Mircea

    Well, that works for one record. But what if I have more than one records to be edited in place (one after another…like a grid)?

    How can I diferentiate which is which to be updated?? (for the example “You can edit this line with a single click.”)

    Any ideas? Thanks.

  28. December 2nd, 2006 at 6:39 am Fabrizio

    Hi! First sorry for my very bad English.
    I’m enjoying your beautiful library and I’ve just added a small piece of code to perform validation of data before submitting to server.
    It just consists of a new option in defaults:
    verify_func: false
    and a little bit of code in _saveClick function just after the var id_opt = EditInPlace._getOptionsReference(id); line:

    //Verify data
    if (id_opt['verify_func'] && typeof id_opt['verify_func']==’function’) {
    if (!id_opt['verify_func']($F(id + ‘_edit’),$(id+ ‘_edit’)))
    return;
    }

    If A ‘verify_func’ is found, it will be called passing the current field value and the current element. The function has to return true or false: if false the submitting is interrupted. The verify_func can display any error message, etc to the user.

    Hope you will find this little modification useful and you will include (even similar/better) in future versions of your EIP library.

    Fabrizio

  29. December 3rd, 2006 at 4:16 pm kosiakk

    line 248:
    var id_opt = EditInPlace.getOptionsReference(id);
    change to
    var id_opt = EditInPlace._getOptionsReference(id);

    line 261
    if(id_opt['is_empty'] == true) {
    can be simplified to
    if(id_opt['is_empty']) {

  30. December 6th, 2006 at 12:04 pm Adam Jimenez

    Hi,

    Would be great if it worked with a chunk of HTML.

    ie:

    This is a test.

    It kinda works – but it doesn’t mouseover properly.

  31. December 6th, 2006 at 12:07 pm Adam Jimenez

    Pressing escape to cancel would be good to.

  32. December 9th, 2006 at 7:35 am Lavi Avigdor

    UTF-8… currently the EIP does not support languages other then english.

    I’d be happy to see it fixed.

  33. December 14th, 2006 at 5:36 pm Jan Terje Nilsen

    Lavi Avigdor,

    for example, by adding:
    header(“Content-Type: application/xhtml+xml; charset=iso-8859-1″);
    on a line above:
    $id = $_POST["id"];
    in edit.php from the example files i would get support for Norwegian characters.

    I hope this helps you out a bit.

  34. January 19th, 2007 at 11:30 pm ileadu

    field += ‘onfocus=”this.select();”‘;

    lack a space

    field += ‘ onfocus=”this.select();”‘;

  35. January 19th, 2007 at 11:35 pm joseph

    ileadu-

    Good catch, I’ve added it to my fix/feature list.

    Thanks.

  36. February 3rd, 2007 at 6:44 pm Rodrigo

    What about save the field when return is pressed?

    After line 149 add

    Event.observe(id + ‘_edit’, ‘keypress’, function(event) {
    if (event.keyCode == Event.KEY_RETURN)
    EditInPlace._saveClick(false, id);
    });

  37. February 14th, 2007 at 2:41 pm sallam

    Thanks for a very useful script.
    But how can I get it to save the text that users typed or selected?
    Every time I reload the example page, it goes back to how it was.

    ps. is there any how-to instructions for that great script?

  38. February 14th, 2007 at 2:57 pm joseph

    sallam-

    The example page doesn’t save the changes anywhere, it just sends back the text it was provided. In production you’d save those changes in a database.

    For the client side view the source of the example page. The server side is pretty basic and there is a link on the example page to the PHP script that the example page uses. You can extend it from there.

  39. March 17th, 2007 at 8:55 am Barya

    Good job!

    It could be useful feature to add file upload control.
    For example, for images updating.

  40. October 30th, 2007 at 9:23 am Shawn

    I am having a little trouble with this. I did get it working fine on my own website I run at home. But now I am trying to get this implemented in our helpdesk website at my work because it would make editing inventory much easier.

    Everything works until I hit save, at that point for some reason the new text that gets displayed in place of the old is a copy of the entire page container and all. For some reason it thinks the innerHTML of the span is the html of the entire page.

    My boss used code igniter to design the site and I am not sure if that is causing the problem. Any ideas where to start looking for the solution?

  41. November 19th, 2007 at 1:50 pm alex

    I’m having this problem too :(
    Can anyone help us?

  42. September 16th, 2008 at 4:29 pm Deniz

    Please fix this UTF-8 problem! :((

Tags

Ads