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

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