2

Could anyone recommend a JavaScript library or sample code for inline editing of multiple fields at the same time? I'm looking for something similar to Flickr, where when you click on either the name or description of a photo they both turn into texboxes and when the user clicks "save" both of them are saved.

I'm using jQuery, so a jQuery plugin would be nice, but not essential. I've already looked at https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery, but haven't found any that support multiple fields.

Community
  • 1
  • 1
EMP
  • 59,148
  • 53
  • 164
  • 220

2 Answers2

4

You can opt to not use a plugin. You can have something like: HTML:

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

Then you can write a similar jQuery in $(document).ready():

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

You can of course style them as much as you like.

(P.S. Code is tested and WORKING!)

Alex R.
  • 4,664
  • 4
  • 30
  • 40
  • Thanks. I did end up writing it myself in the end, was just hoping that somebody had already done the work for me. It was a little more complex than this, since I had many rows in a table and I wanted to edit all the columns in the row at once, not everything on the page. – EMP May 05 '11 at 12:02
  • @EMP: Not sure about how you really did it since no code was provided. In my example you can have jQuery script to make an entire row of inputs editable when you click on one. HTH – Alex R. May 06 '11 at 01:36
0

The editor by Joseph Scott works fairly well. Fairly customizable too due to the fact that everything is done with templates and CSS classes. See the demo here. (He did model this after FLickr.)

The Another In-Place Editor also looks promising also, although I have not tried it out myself.

JasCav
  • 34,458
  • 20
  • 113
  • 170
  • Thanks, I had a look at both of those, but could not find a way to edit multiple fields at a time. – EMP May 05 '11 at 12:03
  • @EMP - I just saw in your comment to Alex's response that you are editing columns and rows in a table. Have you looked a jqGrid? It provides this type of functionality (and a *whole* lot more). Of course, it's specifically designed for a grid (table) structure. – JasCav May 05 '11 at 13:57
  • I did think about jqGrid, yes, but it didn't quite fit with what I needed (though it's very good, I've used it before). – EMP May 06 '11 at 06:09