JQuery accordion - adding dropdown control to header to refresh AJAX data

[jacktripper]

I am pretty new to JQuery, but I have managed to at least get the accordion to work and load data via AJAX call when it first opens in my MVC project. Now I am running into an issue where I'd like to add a drop-down in the header so that the data shown is changed.

Problem 1: the header element <h3> causes the accordion to open, so when I click on the dropdown, the accordion fires each time. I can stop that with the event.StopPropagation function, but that doesn't help me much yet... because I can't figure out Problem 2 below.

Problem 2: done't fire the accordion, and instead run the AJAX call again to close/open or just open the accordion (if it is already closed) and populate the data.

Example: By default I show tasks in the next two weeks. I click the header and view them. Now I want to see tasks in the next 90 days. I select that in the dropdown, and I want the accordion to close and re-open with fresh data.

Has anyone tried something similar? Any ideas or maybe just point me to an example or similar post? I've been searching for hours on this without luck....

Here is my HTML code:

 <h3>
                    <a href="<%= Url.Action("Tasks", new {userId = MyUserId, endDate = DateTime.Now.AddDays(14) }) %>">Project Tasks</a>
                    <div id="search_div">
                            <% using (Html.BeginForm("Search", "Tasks", FormMethod.Post, new { id = "searchForm" })) { %>
                            <%= Html.DropDownList("TaskDateRange", new SelectList(listOfDateRanges), "2 weeks")%>
                           
                            <% } %>
                        </div>
                </h3>
                <div>
                    <p class="loading">
                        <img src="<%= Url.Image("loader.gif") %>" alt="" />
                        Loading... Please wait.
                    </p>
                </div>

Here is my JQuery code up to this point:

$("#myPage").accordion({
            collapsible: true,
            active: false,
            heightStyle: "content",
            autoHeight: false,
            animate: "bounceslide",
            change: function (e, ui) {
                url = $(ui.newHeader[0]).children('a').attr('href');
                var pLoader = $(ui.newContent[0]).find("p")[0];
                if (pLoader && $(pLoader).hasClass("loading")) {
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (html) {
                            var $newContent = $(ui.newHeader[0]).next();
                            $newContent.html(html);
                            $newContent.accordion({
                                collapsible: true,
                                active: false,
                                heightStyle: "content",
                                autoHeight: false,
                                animate: "bounceslide",
                                header: "h4",
                            });
                    });
                }
            }
        });

 

[jpadie]

instead of the asp can you post the generated html.