locked
How to initialize a jquery element which is part of a FormView? RRS feed

  • Question

  • User260076833 posted

    Hello,

    in a WebForm, I use the following JS snippet to use a TextBox as a spinner for easy number entering:

    <script type="text/javascript">
        function init()
        {
          $('#' + '<% = txt_Count.ClientID%>').spinner({ min: 0, step: 5 });
        }
    
        $(document).ready(init);
    </script>
    

    However, in another WebForm the TextBox "txt_Count" is part of a FormView and not visible when $(document).ready is called.

    How can I solve this?

    Thanks
    Magnus

    Friday, October 7, 2016 5:35 AM

Answers

  • User260076833 posted

    Yeah I found it!

    You can put the JS initialization code into the EditTemplate section of the FormView:

    <asp:FormView ID="frm" runat="server" ...>
    
        <ItemTemplate>
          <%-- no spinner here --%>
        </ItemTemplate>
    
        <EditTemplate>
            <script>
                $(function ()
                {
                 $('#' + '<%=frm.FindControl("myTextBox").ClientID%>').spinner({ min: 0, step: 1 });
                });
            </script>
    
            <asp:TextBox id="myTextBox" .../>
        </EditTemplate>
    
    </asp:FormView>

    I didn't know that you can do things like this!

    It's cool!

    Magnus

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 11, 2016 7:22 AM

All replies

  • User-691209617 posted

    Hi Yeoman,

    Your problem is that asp:FormView create an iframe.

    So jquery can't find your txt_Count, because it's not in main frame.

    As said in this tutorial, to access element in an iframe with jquery you have to do something like this:

    $(document).ready(function(){
        $('#iframeID').load(function(){
            $('#iframeID').contents().find('#' + '<% = txt_Count.ClientID%>').spinner({ min: 0, step: 5 });
        });
    });

    Hope this resolve your issue

    Friday, October 7, 2016 8:29 PM
  • User-1838255255 posted

    Hi  Yeoman,

    It is run perfect in independent textbox page , that because ID is ‘TextBox1’ . You put textbox inside FormView1, then it id will become ‘Formview1_TextBox1’(you can view by F12 in IE) , so can’t directly access it  by TextBox1's ID in jQuery , you could modify your code like this :

    <head runat="server">
    
        <title></title>
    
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <script>
    
           $(function () {
    
                $('#' + '<%=FormView1.FindControl("TextBox1").ClientID%>').spinner({ min: 0, step: 3 });
    
            });
    
        </script>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
            <div>
    
                <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="MigrationId,ContextKey">
    
                    <ItemTemplate>
    
                        <asp:TextBox ID="TextBox1" runat="server" Text="12"></asp:TextBox>
    
                    </ItemTemplate>
    
                </asp:FormView>
    
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MoviesConnectionString %>" SelectCommand="SELECT * FROM [__MigrationHistory]"></asp:SqlDataSource>
    
            </div>
    
        </form>
    
    </body>
    

    Screen Shot:

     

    Best Regards,

    Eric Du

    Sunday, October 9, 2016 8:30 AM
  • User260076833 posted

    Hi Eric,

    thank you, but unfortunately the text box does not exist yet when the JS code is executed.

    The ItemTemplate contains a non-editable Label, while the EditTemplate contains a TextBox. When the FormView first opens, it shows the ItemTemplate. Then, when the user clicks on "Edit", the EditTemplate is shown.

    So when the JS code is executed, the text box is not found (null) and an exception is thrown. I tried to catch the null value:

      <script>
    
          $(function ()
          {
              var t = '<%=frm.FindControl("TextBox1");%>';
    
              if (t == null)
                  return;
    
              var s = t.getAttribute('id');
    
              $('#' + s).spinner({ min: 0, step: 3 });
    
           });
    
        </script>
    

    I don't know why, but this causes an error ") expected" in the line where frm.FindControl is called.

    My idea is that the code aborts when the text box is not found, and I hope the JS code is executed again, when the EditTemplate is shown.

    What's wrong with the code above?

    Thanks
    Magnus

    Monday, October 10, 2016 5:53 AM
  • User260076833 posted

    Hi Codemovement,

    thanks, but I don't know the iframeID. Furhermore, the FormView is part of a User defined control, which in turn is part of another page with a master page. So I believe it will be difficult to "hard-code" an ID here...

    Magnus

    Monday, October 10, 2016 5:56 AM
  • User260076833 posted

    Hello,

    no idea what's wrong with the JS code above?

    If I'm in the wrong forum, please let me know...

    Magnus

    Tuesday, October 11, 2016 4:41 AM
  • User260076833 posted

    Yeah I found it!

    You can put the JS initialization code into the EditTemplate section of the FormView:

    <asp:FormView ID="frm" runat="server" ...>
    
        <ItemTemplate>
          <%-- no spinner here --%>
        </ItemTemplate>
    
        <EditTemplate>
            <script>
                $(function ()
                {
                 $('#' + '<%=frm.FindControl("myTextBox").ClientID%>').spinner({ min: 0, step: 1 });
                });
            </script>
    
            <asp:TextBox id="myTextBox" .../>
        </EditTemplate>
    
    </asp:FormView>

    I didn't know that you can do things like this!

    It's cool!

    Magnus

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 11, 2016 7:22 AM