Grid Inline editing with JavaScript, weird behaviour

Question

I made this invoice page. There is a repeater that generates a table. There are invoice item descriptions coming into td tags encapsulated with div tags like this:

<asp:Repeater ID="Repeater1" runat="server">
           <ItemTemplate> 
            <tr>
             <td class="griditem text">
                 <div class="invoiceDescription" id='<%# "item-" + Eval("ID") %>' value='<%# Eval("ID") %>' onclick="InvoiceItemClicked(this);">
                    <%# Eval("Description") %>
                 </div>
             </td>
             <td class="gridnumb text r">
             <%# String.Format("{0:n}", Eval("Quantity"))%>
             </td>
             <td class="gridnumb text r">
             <%# String.Format("{0:c}", Eval("UnitCost"))%>
             </td>
             <td class="gridnumb text r">
             <%# String.Format("{0:c}", Eval("Total"))%>
             </td>
            </tr>
           </ItemTemplate>
          </asp:Repeater>

If you see the first line, I call a javascript onclick. The function is like this (uses jQuery):

function InvoiceItemClicked(elm) {
        var textbox = document.createElement('input');
        textbox.setAttribute('type', 'text');
        textbox.value = $(elm).text();
        $(elm).html(textbox);
    }

This is the first time I try to do sth like this, and it worked in the first shot. It transforms lines into textboxes with same text set into them. But the problem is when the generated textbox is clicked (focus), the text inside it disappears.

I will also appreciate any other best practices to do this inline editing. I need to then update the items via webservices etc..

Thanks in advance.

Answer 1

yep my bad!

function InvoiceItemClicked(elm) { var b = $(elm).hasClass('invoiceDescriptionEditing'); if(!b) { var textbox = document.createElement('input'); textbox.setAttribute('type', 'text'); textbox.setAttribute('id', 'txt'); $(textbox).css('width', '550px'); textbox.value = $(elm).text(); $(elm).html(textbox);

            $(elm).removeClass('invoiceDescriptionEditable');
            $(elm).addClass('invoiceDescriptionEditing');
        }

    }

this is aight! :)