locked
How to iterate through tab panels in javascript And find the tab name if no control is selected. RRS feed

  • Question

  • User-1202100973 posted

    Could someone give me a pointer as to how to loop through all the panels of my tab container in client-side javascript?

     I am not sure how to loop through the each tab Panel and do the validation

    Validation: To check at least 1 radio button/checkbox (At least 1 control) or Else I need to show an error message telling nothing is selected from Tab1 or Tab2

    Can any one please help me with it


    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" ClientIDMode="Static" runat="server"></asp:ScriptManager>
    <ajaxToolkit:TabContainer ID="TabContainer1" ClientIDMode="Static" runat="server">
    <ajaxToolkit:TabPanel ID="TabPanel1" ClientIDMode="Static" runat="server">
    <HeaderTemplate>Tab1</HeaderTemplate>
    <ContentTemplate>
    <asp:CheckBox ID="chk1" runat="server" />
    <asp:CheckBox ID="chk2" runat="server" />
    </ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
    <HeaderTemplate>Tab2</HeaderTemplate>
    <ContentTemplate>
    <asp:RadioButton ID="rbt1" ClientIDMode="Static" runat="server" />
    <asp:RadioButton ID="rbt2" ClientIDMode="Static" runat="server" />
    <asp:RadioButton ID="rbt3" ClientIDMode="Static" runat="server" />
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    <input id="Button1" type="button" value="button" onclick="IterateTabs()"/>


    </div>
    </form>

    <script type="text/javascript">
    function IterateTabs() {
    var tabBody = $find("<%=TabContainer1.ClientID%>")._body;
    var returnArr = tabBody.getElementsByTagName("input");
    for (i = 0; i < returnArr.length; i++) {
    if ((returnArr[i].type.toLowerCase() == "checkBox") ||(returnArr[i].type.toLowerCase() == "radio")) { // Here we assume that we only check the TextBox,you may expand it to check other controls
    alert("Element id:" + returnArr[i].id + " and value: " + returnArr[i].value);
    }
    }
    }
    </script>
    </body>
    </html>

    Tuesday, December 22, 2015 3:38 PM

Answers

  • User61956409 posted

    Hi Aditya_ven,

    If you use F12 developer tools to check the html of TabContainer, you will find it is rendered as

    You could refer to the following sample code to check whether use checked checkbox and radiobuttons.

    <script>
        function IterateTabs() {
            var checkboxischecked = false;
            var radiobuttonisselected = false;
            $(".ajax__tab_panel").each(function () {
    
                var cb = $(this).find(":checkbox").length;
                var cbn = $(this).find(":checkbox:checked").length;
                if (cb > 0 && cbn > 0) {
                    checkboxischecked = true;
                }
    
                var rd = $(this).find(":radio").length;
                var rdn = $(this).find(":radio:checked").length;
                if (rd > 0 && rdn > 0) {
                    radiobuttonisselected = true;
                }
            });
    
            if (!checkboxischecked) {
                alert("please check a checkbox");
            }
    
            if (!radiobuttonisselected) {
                alert("please check a radiobutton");
            }
        }
    </script>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2015 5:48 AM

All replies

  • User61956409 posted

    Hi Aditya_ven,

    If you use F12 developer tools to check the html of TabContainer, you will find it is rendered as

    You could refer to the following sample code to check whether use checked checkbox and radiobuttons.

    <script>
        function IterateTabs() {
            var checkboxischecked = false;
            var radiobuttonisselected = false;
            $(".ajax__tab_panel").each(function () {
    
                var cb = $(this).find(":checkbox").length;
                var cbn = $(this).find(":checkbox:checked").length;
                if (cb > 0 && cbn > 0) {
                    checkboxischecked = true;
                }
    
                var rd = $(this).find(":radio").length;
                var rdn = $(this).find(":radio:checked").length;
                if (rd > 0 && rdn > 0) {
                    radiobuttonisselected = true;
                }
            });
    
            if (!checkboxischecked) {
                alert("please check a checkbox");
            }
    
            if (!radiobuttonisselected) {
                alert("please check a radiobutton");
            }
        }
    </script>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2015 5:48 AM
  • User1633621018 posted

    Hi Aditya,

    for(tab in  $find("<%=TabContainer1.ClientID%>").get_tabs()){
           $find("<%=TabContainer1.ClientID%>")._tabs[tab];      //now you can get all the tabs.
    }

    But as we know, we cannot get the controls by iterating all the tabs because no such function or property provided yet.  Fortunately, we can use Dom object to find all the input elements on the client.  Here is my solution:

    1. Get the TabContainer._body which the content including input controls contained inside.  It is a Dom tree.
    2. Get all the input Controls from the Dom tree by using var returnArr =  tabBody.getElementsByTagName("input");
    3. Iterate all the input controls and do your validation here.



    Wednesday, December 23, 2015 6:12 AM
  • User-1202100973 posted

    Thank You Fei han for all the Help.

    It working as I am expecting . One last thing Can you please help me getting  the tab id for  which the validation is failing. 

    I am using the below code to get the tab id but its always showing me the first Tab id.

    var tabid = $(this).parent().find(".ajax__tab_panel").attr("id");

    <script type="text/javascript">
    function IterateTabs() {
    var checkboxischecked = false;
    var radiobuttonisselected = false;
    var tab = 1;
    $(".ajax__tab_panel").each(function () {

    var tabid = $(this).parent().find(".ajax__tab_panel").attr("id");
    // var tabiname = $(this).parent().find(".ajax__tab_panel").attr("name");
    alert(tabid);
    //alert(tabiname);
    var cb = $(this).find(":checkbox").length;
    if (cb > 0) {
    var cbn = $(this).find(":checkbox:checked").length;
    if (cb > 0 && cbn > 0) {
    checkboxischecked = true;
    }
    else {
    checkboxischecked = false;
    }
    }


    var rd = $(this).find(":radio").length;
    if (rd > 0) {
    var rdn = $(this).find(":radio:checked").length;
    if (rd > 0 && rdn > 0) {
    radiobuttonisselected = true;
    }
    else {
    radiobuttonisselected = false;
    }
    }
    tab = tab + 1;
    });

    if (!checkboxischecked) {
    alert("please check a checkbox");
    }

    if (!radiobuttonisselected) {
    alert("please check a radiobutton");
    }
    }
    </script>

    Wednesday, December 23, 2015 5:20 PM
  • User-1202100973 posted

    we need to use 

     var tabid = $(this).attr('id');

    To get its respective Tabid.

    And now every thing is working as I am expecting .

    Thank you Very much Fei Han.

     

    Wednesday, December 23, 2015 7:33 PM
  • User-1202100973 posted

    Thank you Pawan Pal . The Issue is resolved.

    Wednesday, December 23, 2015 7:34 PM
  • User61956409 posted

    Hi Aditya_ven,

    we need to use 

     var tabid = $(this).attr('id');

    Yes, you loop through all tab panels using 

    $(".ajax__tab_panel").each()

    So $(this) will help us find the current tab panel, we could use $(this).attr("id") to get the current tab panel id.

    Best Regards,

    Fei Han

    Friday, December 25, 2015 8:38 AM