Wim Ombelets
Wim Ombelets

Reputation: 5265

prevent input control to empty on click

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

Answers (1)

nmat
nmat

Reputation: 7591

Exit the function when you detect a click in the textbox:

if($clickedRow.find('input[id$="editInvNr"]').length > 0)
    return;

Upvotes: 1

Related Questions