tags:

views:

469

answers:

3

This is the code I have:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtInsertComments" CssClass="expanding" runat="server" AutoPostBack="false" TextMode="MultiLine"></asp:TextBox>
    </div>
        <div id="commands">
            <table cellpadding="0" cellspacing="0" width="400px" id="tblCommands">
                <tr>
                    <td style="width: 50%; text-align: center;">
                        <asp:LinkButton ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false">Insert</asp:LinkButton>
                    </td>
                    <td style="width: 50%; text-align: center;">
                        <asp:LinkButton ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false">Cancel</asp:LinkButton>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
    <script type="text/javascript">
        $(function()
        {
         $("#commands").hide("normal");

         $("textarea[id$=txtInsertComments]").focus(function()
         {
          $("#commands").show("normal");
         });

        });
    </script>
</html>

First, when this page is loading, the div #command is loaded very quick and then disappears. I need the div to remain hidden until the textbox txtInsertComments control is clicked or gets focus.

Second, when the user click out of the textbox txtInsertComments or that the textbox lost focus, the div #command is still there and not hidden.

Any help is appreciated.

+1  A: 

Set display:none initially on #commands.

<div id="commands" style="display:none">....

For losing focus, just use the blur event:

$( el ).blur( function(){...} );
Jacob Relkin
A: 
$(document).ready(function() {
    $('#<%=txtInsertComments.ClientID%>').blur(function() 
       { $("#commands").hide() });
    $('#<%=txtInsertComments.ClientID%>').focus(function() 
       { $("#commands").show() });
});
Jimmeh
Many thanks for a quick response. It works!
Chuck
Okay, the code that you guys showed me works for basic asp.net page. Does anyone have experience using jQuery for nested ListView controls? This same jQuery does not work with nested ListView controls.
Chuck
+2  A: 

You can use CSS to hide the #command DIV until you want to show it:

<div id="commands" style="display:none">

Then use blur/focus to show/hide the #commands DIV:

$('#txtInsertComments').blur(function() {
    $("#commands").hide()
});

$('#txtInsertComments').focus(function() {
    $("#commands").show()
});
James