jquery button reset to normal form

Question

Jquery Dynamic fields generator

|S.No|Name|Button1|Button2|

first button clicked S.No label and name label should enable like textbox.

its working like charm but if i click second button that field is editable but the first field also editable not reset as the earlier state (to label)

if second or any button clicked all things restate to original form

Image below:

JQuery Code

function asd(dt1)
{
    var id = $("#id"+dt1).text();
    var x ='<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">';
    $("#id"+dt1).html(x);

    var name = $("#name"+dt1).text();
    var x ='<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">';
    $("#name"+dt1).html(x);


    $("#btnEdit"+dt1).hide();
    $("#btnDelete"+dt1).hide();
    $("#trTxtInsert").hide();
    $("#btnUpdate"+dt1).show();
    $("#btnCancel"+dt1).show();
}

Answer 1

if you need return to non editable data when user try to edit an other row you must 2 two thing:

1. Store somewhere the original data.
2. On onClick to an other edit button you need to trigger "click" to the cancel button of rows that are in "editing mode".

How to cache original data:

inside your td insert the data (name and id) inside a span like:

<td id="id1"><span class="dataCache">8</span></td>
<td id="name1"><span class="dataCache">LLL</span></td>

and than when user click on "edit" button hide this element and append te input instead use .html():

var id = $("#id"+dt1).text();
$("#id"+dt1).append('<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">');
$("#id"+dt1+" .cacheData").hide();

var name = $("#name"+dt1).text();
$("#name"+dt1).html('<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">');
$("#name"+dt1+" .cacheData").hide(); // edit

If someone click "cancel" button remove the input and .show() the .cacheData element.

For helping you in the reset of the editing row add a class on row that you edit:

$("#id"+dt1).parents("tr").addClass("editing");

and in the cancel function remove this class.

How to return to original

if some user click edit on an other row without save or cancel, you need to force the click to the cancel button of the row that are in the "edit mode":

• first: Add a common class to all "cancel button" to easy find it if needed;

• Secondo: in your asd function add this row, that find the row that are in the edit mode if there are some and force cancel button click.

    $(".editing .yourgeneralclassofcancelbutton").trigger("click");
  

I crate an example to show you an alternative to your code with a new HTML and new JS, take a look: http://jsfiddle.net/Frogmouth/rbkxcs47/. (for your inspiration)

How to disable other actions when one is "active"

Create an exception that control if there are some "tr" that are in "editing mode" and if there is one ignore the edit action.

function asd(dt1)
{
    if($("tr.editing").length > 0) return false; //some other is in edit mode, do nothing.

    $("#id"+dt1).parents("tr").addClass("editing"); //add editing

    var id = $("#id"+dt1).text();
    $("#id"+dt1).append('<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">');
    $("#id"+dt1+" .cacheData").hide();

    var name = $("#name"+dt1).text();
    $("#name"+dt1).html('<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">');
    $("#name"+dt1+" .cacheData").hide(); // edit

    $("#btnEdit"+dt1).hide();
    $("#btnDelete"+dt1).hide();
    $("#trTxtInsert").hide();
    $("#btnUpdate"+dt1).show();
    $("#btnCancel"+dt1).show();
}

Or, if you follow my fiddle I've create a new updated version: http://jsfiddle.net/Frogmouth/rbkxcs47/1/