There is a View:

Schools.cshtml

<table> <tr> <td> <label>Район:</label> </td> <td> @Html.DropDownListFor(x => x.AreaNames, Model.AreaNames, "--Выбрать--", new { @id = "ddlArea"}) </td> </tr> <tr> <td> <label>Образовательная организация:</label> </td> <td id="School"> @Html.DropDownListFor(x => x.SchoolNames, new List<SelectListItem>(), "--Выбрать--", new { @id = "ddlSchool", @class="ttt" }); </td> </tr> </table> <p></p> <div id="tabs"> <ul> <li><a href="#tabs-1">Отчеты</a></li> <li><a href="#tabs-2">Реквизиты</a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> </div> <script> $(document).ready(function () { $("#tabs").tabs(); }); $('#School').change(function () { var schoolid = $("#ddlSchool").val(); $.ajax({ url: "/Report/GetRMschoolPV?_schoolID=" + schoolid, type: "GET", success: function (data) { $("#tabs-1").html(data); } }) $.ajax({ url: "/Home/GetSchoolinfoPV?_schoolID=" + schoolid, type: "GET", success: function (data) { $("#tabs-2").html(data); } }) }); ... </script>

When changing the value in the School drop-down list, two AJAX functions are called, which receive two partial views from the server and place them in the appropriate tabs. A partial view that places the tabs-1 tab has an Accordion widget:

_RMschool.cshtml

 @model IEnumerable<Monit95App.Services.Work.Concrete.RMschool> <head> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui") </head> <body> <br /> <div id="accordion"> <h3>2016/2017 учебный год</h3> <div> <table class="table table-striped"> <thead class="thead-inverse"> <tr> <th>Проект</th> <th>Отчет</th> <th>Учебный год</th> </tr> </thead> @foreach (var reportMeta in Model.Where(x => x.year == "2016/2017").OrderByDescending(x => x.code)) { <tr> <td>@reportMeta.ProjectName</td> <td><a href="@reportMeta.WWWref" style="color:royalblue">@reportMeta.name</a></td> <td>@reportMeta.year</td> </tr> } </table> </div> <h3>2015/2016 учебный год</h3> <div> <table class="table"> <thead class="thead-inverse"> <tr> <th>Проект</th> <th>Отчет</th> <th>Учебный год</th> </tr> </thead> @foreach (var reportMeta in Model.Where(x => x.year == "2015/2016").OrderByDescending(x => x.code)) { <tr> <td>@reportMeta.ProjectName</td> <td><a href="@reportMeta.WWWref" style="color:royalblue">@reportMeta.name</a></td> <td>@reportMeta.year</td> </tr> } </table> </div> </div> </body> <script> $(function () { $("#accordion").accordion({ collapsible: true }); }); </script>

And everything works and is displayed correctly, if at the moment of selecting from the School list , the tabs-1 tab (reports) is active :

enter image description here

Question: But if, when choosing a school instead of the Отчеты tab, the Реквизиты tab is active, and then you can come across the Отчеты tab:

enter image description here

The partial view has been loaded into Reports, but the Accordion widget itself is not fully expanded. Why it happens?

The option that is offered here - first activate the accordion, and then the tabs

 $("#accordion").accordion(); $("#tabs").tabs();

does not quite fit, because I have an accordion in a partial view and it’s already rendered in the tabs.

    1 answer 1

    As it turned out: the accordion widget works correctly if at the moment of loading it into the tab it is exactly this tab - Отчеты is active .

    Decision

     $('#School').change(function () { $('#tabs').tabs({ active: 0 }); $("[tabindex='-1']").removeClass('ui-state-active'); $("[tabindex='-1']").removeClass('ui-tabs-active');

    Explanation

    Those. before pouring any data into the tabs :

    1. First, the first tab is activated, where we have our accordion;
    2. And then the backlight for the Details tab is removed. If this is not done, then the screen will contain the contents of the first tab, and those highlighted in blue will be both.