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:
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();
}
if you need return to non editable data when user try to edit an other row you must 2 two thing:
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.
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":
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)
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.