locked
How to identify a tab of tab table from back end to click it from back end? RRS feed

  • Question

  • User-1651604128 posted

    In my mvc web app, I have a tab table with 7 tabs, instead of user click the tab event, I need to simulate the click event from back end through javascript. but it does not work if I only use the tab id such as:  ("#tab3").click() (even it is working if user click the tab from the UI), I think javascript code needs to identify DOM to identify the hierarchy  of the tab.

    In my _Layout view, this is the content code:

     <div id="content" style="display: inline-block" class="site_font">
                @RenderBody()
            </div>

    and this is the tab table as a partial view called "ProdCommon.cshtml" to be used in each page (razor view)

    <div id="tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" class="nav_link" data_id="1"  href="#tab1">Product</a></li>
                <li><a data-toggle="tab"  class="nav_link" data_id="2"  href="#tab2">Invoice</a></li>
            @if (Model.ID != 0)
            {
                <li><a data-toggle="tab" class="nav_link" data_id="3" href="#tab3">Invoice1</a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="4" href="#tab4">Invoice2</a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="5" href="#tab5">Info </a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="6" href="#tab6"> List</a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="7" href="#tab7">Action </a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="8" href="#tab8">Info 2</a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="9" href="#tab9">Notes</a></li>
                <li><a data-toggle="tab" class="nav_link" data_id="10" href="#tab10">Log</a></li>
            }
    
        </ul>
        </div>

    and on each page (razor view), I insert the above partial view to create tab table. this is the razor view html.

     <div class="form-horizontal" style="width: 1100px; padding: 10px; margin:10px">
            @Html.Partial("~/Views/Shared/_ProdCommon.cshtml")
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade in active">
                    @Html.Partial("~/Views/Shared/_ProdEdit.cshtml")
                </div>
                <div id="tab2" class="tab-pane fade">
                    @Html.Partial("~/Views/Shared/Info/_InfoEdit.cshtml")
                </div>
                <div id="tab3" class="tab-pane fade">
                   xxxxx
    

    So now I need to identify the tab based on the ID tree structure.

    I tried this: $("#content #tabs #tab3").click(), but it does not work, appreciate any help,

    Thursday, February 21, 2019 2:01 PM

Answers

  • User475983607 posted

    Peter, you misunderstand how the Bootstrap tabs work and the jQuery/CSS selectors.  The first step is taking the time to read and understand the Bootstrap JavaScript documentation.  

    The following line of code is incorrect.  The click event should be assigned to the link(s) not the content.  Also $tab3 is not a child of #tabs.  I recommend learning jQuery selectors.

     $("#content #tabs #tab3").click()

    The jQuery selector syntax is...

    $('#content #tabs a[href="#tab3"]').click();

    Working example that selects "Messages" when the JavaScript application is loaded.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div id="content">
        <div>
            <div id="tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#tab3" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#tab4" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                </ul>
            </div>
            <div>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab1">Hom4</div>
                    <div role="tabpanel" class="tab-pane" id="tab2">Profile</div>
                    <div role="tabpanel" class="tab-pane" id="tab3">Messages</div>
                    <div role="tabpanel" class="tab-pane" id="tab4">Settings</div>
                </div>
            </div>
            </div>
        </div>
    
    @section scripts{
        <script>
            $('#content #tabs a[href="#tab3"]').click();
        </script>
    }


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 21, 2019 3:01 PM