jquery - Dynamic Accordion Menu using Jquery 1.4.2

Question

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

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 ?

Answer 1

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

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

Answer 2

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.

Answer 3

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>

Answer 4

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;
}

Answer 5

I solved my problem by using two statement as

$('#accordion').accordion('destroy');
$("#accordion").accordion();