set active accordion in Jquery

I am using MVC with C# also with jquery.

I am using an jquery accordion to see the list of employee details. On clicking an accordion it'll show the employee details.

When i click Edit of an Employee, it takes to the Employee details page and after save it'll have the EmployeeDetailsID in session. When i come back to the accordion page, the accordion with the last updated employee should be open by default (i.e. Accordion should be open based on the EmployeeDetailsID in session).

Please suggest me how to do.

Below is the code for reference.

<html>
<body>
<div class="accordion" id="accordion">
    <%if (Model != null && Model.EmployeeList != null && Model.EmployeeList.Count > 0)
              {
                  foreach (EmployeeDetails _employee in Model.EmployeeList)
                  {
    %>
    <h3>
        <div class="heading_acc">
            <a href="#" onclick="javascript:ShowEmployees(<%= _employee.EmployeeDetailsID %>);"
                id="aEmployee"><b><span class="dash_title_bar_right">
                    <%=Html.Encode(_employee.EmployeeName)%></b> </a>
        </div>
    </h3>
    <div>
        <div id="divReturns<%= _employee.EmployeeDetailsID %>">
            <table width="100%" class="list_contentregion">
                <tr>

                    <th class="dash_table_head">
                        Name
                    </th>
                    <th class="dash_table_head">
                        Role
                    </th>
                    <th class="dash_table_head">
                        Branch
                    </th>
                    <th class="dash_table_head">
                        Last Updated
                    </th>
                </tr>
                <tr id="trEmp<%= _employee.EmployeeDetailsID %>" class="dash_label">

                    <td>
                        <div id="lblName<%= _employee.EmployeeDetailsID %>">
                        </div>
                    </td>
                    <td>
                        <div id="lblRole<%= _employee.EmployeeDetailsID %>">
                        </div>
                    </td>
                    <td>
                        <div id="lblBranch<%= _employee.EmployeeDetailsID %>">
                        </div>
                    </td>
                    <td>
                        <div id="lblTime<%= _employee.EmployeeDetailsID %>">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <%}
              } %>
</div>

</body>
</html>

When you're editing your employee data I expect you're returning the user back to the correct page in your employee list.

On that assumption when your are looping through your list of employees you can check your _employee.EmployeeDetailsID value against the session variable and then write the Loop itteration number out to a <script> block that calls the following code.

$("#accordion").accordion( 'activate' , loopIndex);

The documentation for jQuery accordion can be found here as well as details of this method http://docs.jquery.com/UI/Accordion#method-activate

Please note from documentation I have read else where I don't think you should use session variables for this kind of thing.

I would recomend returning the variable as a routing value via the MVC routing system. see the following code as an example.

new { Controller = "Employee", Action = "List", Page = pageNumber, EmployeeId = EmployeeDetailsID }

ansaurus

tags:

views:

answers:

set active accordion in Jquery

related questions