ASP.NET MVC/jQuery: Inplace Editing

Question

Hello,

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

Not sure to understand the button placement problem. However, there are a number of jquery plugins designed for this purpose. One of these is Jeditable, find a demo here!

Answer 2

Store the markup for the edit in a variable, store the current markup before the edit in a variable (so you can revert if the cancel button is pressed) and then switch it out using jquery:

var editmarkupvariable = [editmarkup];
var revertmarkup = $("#item").html();
<div class="item">
   [markup]
</div>

$("#item").html(editmarkupvariable);

This tutorial gives more detail: http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-brary/15/

That should answer both your questions.

I would google for a jquery plugin to to do this, unless you have to hand code it. Here is one: http://aktagon.com/projects/jquery/in-place-edit

Answer 3

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.

Answer 4

If the problem is strictly text editing, why can't you use a single textarea for both purposes and toggle the disable attribute (and probably background-color & border styles) when the edit button is clicked?