Is it possible to have jeditable popup instead of inline

Question

i have a html table. there are a lot of columns to fit in, many columns are showing images to represent the data. I have been using jeditable to allow users to click on the image and choose from a drop down or enter text into a textbox and update that field (which then renders the appropriate image in the returned content. (works great)

The one issue is that some of the columns width are really small so when you click on the image you get the textbox but its way to small (as its constrained by the table layout). you dont have enough room for the textbox (its only about 1/8 of an inch wide), i would somehow like the textbox to popup above the table (maybe in a small dialog or something) so i have more width to allow someone to enter longer text.

any suggestions?

Answer 1

You could have the actual editable DIV hidden in an absolute position above the column, and make the title to fire the editable

Something like this (nonworking code, posted just to illustrate the idea)

<div class="jeditable" id="firstcol">jEditable field</div>
<th><span class="jeditable-activate">Edit me</span></td>

And in jQuery:

$('.jeditable-activate').click(function() {
    $(this).prev().show().click();
});

Answer 2

jEditable has a width setting, which can be set to 'auto' (default), 'none' or to a number of pixels. So, if you do something like this:

  $(".click").editable(url, {
      indicator : "<img src='img/indicator.gif'>",
      tooltip   : "Click to edit...",
      width     : 400,
      style  : "inherit"
  });

you could adapt the editing width to suit your needs. This will of course expand the table, but I don't see this as a problem. I believe that this is preferred over having a dialog pop-up, since after all that is what edit-in-place is all about.

Answer 3

The cssclass or style settings of jeditable may do what you want - if the form that jeditable creates has absolute positioning the table won't get expanded.

If what you can get with css doesn't go far enough, it's reasonably easy to create your own custom version of any jquery plugin - just find the part that creates the form

var form = $('<form />');

and set it up to generate whatever html you need. Size and positioning adjustments shoud be relatively straightforward, though you'll probably need to change other parts of the code if you modify the structure significantly, such as by integrating the dialog plugin.