Reputation: 5265
I have an asp:Listview
that I've populated with data. On clicking a row, one of the cells of the table
is replaced with an asp:TextBox
to allow editing of the selected value and focus is set on the textbox. So far, so good.
When I don't click, I can edit the value as intended. However, when I click the input
control again, its content disappears.
$(document).ready(function () {
$('tr[id*="itemRow"]').click(function () {
$clickedRow = $(this);
var invNr = $clickedRow.find('span[id$="InvoiceNumber"]').text(),
newInvNr,
oldHtml = $clickedRow.find('span[id$="InvoiceNumber"]').html();
$clickedRow.find('span[id$="InvoiceNumber"]').html('<asp:TextBox ID="editInvNr" runat="server"></asp:TextBox>');
$clickedRow.find('input[id$="editInvNr"]').val(invNr).focus().focusout(function () {
//capture new invoice nr
newInvNr = $(this).val();
//switch textbox back to span using new invoice nr
$clickedRow.find('span[id$="InvoiceNumber"]').html(newInvNr);
//check if anything changed, if so update it in the db
if (newInvNr != invNr) {
//update new value to db
}
});
});
});
In the jsfiddle here, I've replaced the insertion of an asp:TextBox
with a regular html input
element, the results are identical. You can click the "1" in the last column to see what I see.
I feel like I'm overlooking some built-in behavior for textbox controls and if I am, then I apologize for my lack of knowledge.
In any case, I'd like some pointers on how to prevent this to happen. Much appreciated
Upvotes: 3
Views: 133
Reputation: 7591
Exit the function when you detect a click in the textbox:
if($clickedRow.find('input[id$="editInvNr"]').length > 0)
return;
Upvotes: 1