Question

I want to do inplace editing where I have regular text (coming from a Model) with an edit button next to it. When the edit button is clicked, I want a editable textbox to appear where the regular text was, and then commit a change via AJAX. I already solved how to commit, but I don’t know how to place the editing control accurately where the text was before. This probably easy for you JS gurus out there.

Besides the placement issue I wondered if I should fetch the appropriate edit box (textbox for regular text, calendar for dates etc.) via AJAX when the edit button is clicked or would it be better to just send it off with the page and keep it hidden until needed? Or can I reuse a single instance on the client side somehow?

Sorry this is kind of two questions in one but they are tightly related.

Thank you!

Answer 1

I would recommend JEditable I have used it before and it works very well.

An example:

The Markup

<div class="editable_text" id="my_text">My Text</div><a href="#" class="trigger_editable">Edit</a>

The Jquery

$(".editable_text").editable("YOUREDITURLHERE", { event : "edit" });
$(".trigger_editable").bind("click", function() {
        $(this).prev().trigger("edit");
});

Hope this helps.