Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hi, I've created a Jquery Accordion using Asp.net mvc, and it's working fine. The accordion displays a list of employee names, and when i click on an item, it shows the details. I'd like to send an ajax request to get the employee details when they click on an item, instead of loading all the employee details at once. Please look at my code below.
 
Also, please tell me how to keep the first item in the accordion collapsed instead of showing the details, and is there any way to move the heading a bit to the right without using &nbsp ?
 
I would greatly appreciate any help - thanks.
    <div id="accordion">
        @foreach (var item in Model.Employees)
        {
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;@item.EmployeeName</h3>
            <div id = "accordiondiv">
                <p>Address: @item.Address</p>
                <p>Town: @item.Town</p>
                <p>Postcode: @item.PostCode</p>
                <p>PhoneNumber: @item.PhoneNumber</p>
            </div>
        }
    </div>
 
    <script>
    $(function () {
        $("Accordion").click(function (evt) {
                    $.ajax({
                    url: "/Accordion/GetEmployeeDetails",
                    type: 'POST',
                    data:
                 //need code to pass the employeeid that was clicked on the accordion,
                    success: function (data) {
                        $.each(data, function (i, val) {
                //need code to populate the respective accordion with the employee details
                        });
                    }
                });
            }
        });
    </script>
Posted 17-Jan-13 4:17am
Edited 17-Jan-13 4:28am
v2
Comments
Zoltán Zörgő at 17-Jan-13 16:24pm
   
Any progress?

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Have searched with google?
There are several solutions out there for how to populate accordion with ajax calls: http://lmgtfy.com/?q=accordion+jquery+ajax+load[^]
 
Add "employeeid" as a custom attribute to the header, than you can retrieve it in the code[^]. You can use the change event[^] instead of click.
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 334
1 Kornfeld Eliyahu Peter 325
2 Maciej Los 239
3 OriginalGriff 188
4 King Fisher 185
0 OriginalGriff 6,303
1 DamithSL 4,764
2 Maciej Los 4,306
3 Kornfeld Eliyahu Peter 3,914
4 Sergey Alexandrovich Kryukov 3,538


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 17 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100