Dynamic Accordion Menu using Jquery 1.4.2

Go To StackoverFlow.com

0

Hi i am building a jquery accordion menu using VS2008 and MVC2.

My requirement is to refresh the contents of the accordion and repopulate it when a user selects an item from a dropdownlist

For this i am using a jquery ajax call which returns data with and tags like below

<h3>
  <a href="#">Masters</a>
</h3>
<div>
  <ul>
    <li>
      <a href="#" onclick="pageclick('..\TRAN\EmpMst.aspx',1)">Employee Master</a>
    </li>
    <li>
......
...

The first time on page load the accordion looks fine. But whenever i change the contents dynamically it looks awfull with weird CSS

Accordion Before & After Dynamic Update

here is my ajax call

        $('#moduleList').change(function() {
            var rootPath = '<%=Url.Content("~/")%>';
            $.ajax({
                type: "POST",
                url: rootPath + "Home/GetMenu/",
                data: { moduleid: $(this).val() },
                success: function(result) {
                    $('#accordion').html(result);
                    //$('#accordion').append(result);
                    $('#accordion').accordion('destroy');
                    $('#accordion').accordion({
                        fillSpace: true, collapsible: true
                    });
                },
                error: function(error) { alert(error); }
            });

        });

am i doing something wrong ?

2012-04-04 16:47
by Deb


0

Thanks everybody for your help. I finally got it right. Actually i missed a little CSS.

My IE was not showing the html with any css at all. So it was difficult to findout whether something is changed or not. Thanks to Tuan who saved my day. Once i started using Firebug it was crystal clear that a custom css was missing. Here is the updated Code just in case any one is interested.

    $('#moduleList').change(function() {
        var rootPath = '<%=Url.Content("~/")%>';
        $.ajax({
            type: "POST",
            url: rootPath + "Home/GetMenu/",
            data: { moduleid: $(this).val() },
            success: function(result) {
                $('#accordion').html(result);
                //$('#accordion').append(result);
                $('#accordion').accordion('destroy');
                $('#accordion div').addClass('navMiddle');  // I missed this at first
                $('#accordion').accordion({
                    fillSpace: true, collapsible: true
                });
            },
            error: function(error) { alert(error); }
        });

    });

And Here is the CSS for the Accordion menu items.

.navMiddle{
 position:relative;
}
.navMiddle ul {
    margin:0px;
    padding:0px;
    text-align:left;
    list-style:none;
}
.navMiddle ul li {
    font-size:11px;
    color:#003366;
    font-weight:normal;
    white-space:nowrap;
    position:relative;
    border-bottom:dotted 1px gray;
    padding-top:4px;
    padding-bottom:4px;
}
.navMiddle ul li:hover {
    background-color:#e5effa;
}
.navMiddle ul li a:link {
    text-decoration:none;
    color:#003366;
}
.navMiddle ul li a:visited {
    text-decoration:none;
    color:#003366;
    margin-top:3px;
}
2012-04-06 22:23
by Deb


2

You could try calling accordion() again after setting the html in your ajax success handler. This should re-apply the styles:

$("#accordion").accordion();
2012-04-04 19:59
by E. Barnes
I don't think OP is using jQueryUI - Tuan 2012-04-04 20:09
I am using jquery ui. and i tried calling $("#accordion").accordion(); on ajax success but with no luck. and i am using default styling too - Deb 2012-04-05 17:06
Sorry for the misunderstanding. What if you called .accordion('destroy') before .html(result) - Tuan 2012-04-05 19:11
no matter how many times i call .accordion('destroy') both before and after assigning the html, the tag sections render as plain html onl - Deb 2012-04-05 19:20
Have you used Firebug to compare the styles applied to the elements before and after - Tuan 2012-04-05 23:08


1

There might be several causes for this. Here is one possible cause: If you use JavaScript for styling(adding CSS class etc.) your accordion menu, and that usually run on page load. Then call the styling function again after setting the loaded content in your success callback.

2012-04-04 18:36
by Kibria
Kibria i am not using any scripts for styling. However i called $("#accordion").accordion(); from ajax success in the hope that it will re apply css and rebuild the accordion.It does not work. - Deb 2012-04-05 17:08


1

Compare the html(before invoking accordion()) structure of element #accordion with the result html of the ajax call. For example:

html structure before invoking accordion():

<h3> <a href="#">Masters</a> </h3>
<div>
 <ul>
      <li><a href="#">Employee Master</a> </li>
  </ul>
</div>

ajax result html structure:

<div> //this may destroy your CSS
   <h3> <a href="#">Masters</a> </h3>
   <div>
     <ul>
       <li><a href="#">Employee Master</a> </li>
     </ul>
   </div>
</div>
2012-04-06 05:24
by Kibria


0

I solved my problem by using two statement as

$('#accordion').accordion('destroy');
$("#accordion").accordion();
2013-03-14 14:13
by Ripusudan Chauhan Rips
Ads