Dynamisches Akkordeon Menü mit Jquery 1.4.2

Question

Hi ich baue ein Jquery Akkordeon Menü mit VS2008 und MVC2.

Meine Forderung ist, den Inhalt des Akkordeons zu aktualisieren und es neu zu besiedeln, wenn ein Benutzer ein Element aus einer Dropdownlist wählt

Hierzu ich einen jquery Ajax-Aufruf bin mit den wie Daten mit Tags und liefert unter

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

Das erste Mal auf Seite laden das Akkordeon sieht gut aus. Aber wenn ich den Inhalt dynamisch ändern sieht es awfull mit seltsamen CSS

hier ist mein Ajax-Aufruf

 $('#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); } 
      }); 

     }); 

bin ich etwas falsch?

Answer 1

Vielen Dank allen für Ihre Hilfe. Ich habe es endlich richtig verstanden. Eigentlich habe ich ein bisschen CSS verpasst.

Mein IE zeigte nicht die HTML mit irgendwelchen CSS überhaupt. So war es schwierig herauszufinden, ob sich etwas geändert hat oder nicht. Danke an Tuan, der mir den Tag gerettet hat. Als ich anfing, Firebug zu benutzen, war es klar, dass ein Custom CSS fehlte. Hier ist der aktualisierte Code nur für den Fall, dass jemand interessiert ist.

$('#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); } 
     }); 

    }); 

Und hier ist das CSS für die Akkordeon-Menüpunkte.

.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 2

Es kann verschiedene Gründe dafür geben. Hier ist eine mögliche Ursache: Wenn Sie JavaScript zum Formatieren (Hinzufügen von CSS-Klassen usw.) verwenden, wird Ihr Akkordeon-Menü normalerweise beim Laden der Seite ausgeführt. Rufen Sie dann die Formatierungsfunktion erneut auf, nachdem Sie den geladenen Inhalt in Ihrem Erfolgsrückruf festgelegt haben.

Answer 3

Sie könnten versuchen, accordion() erneut aufzurufen, nachdem Sie den HTML-Code in Ihrem Ajax-Success-Handler festgelegt haben. Dies sollte die Stile wieder gelten:

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

Answer 4

Vergleichen Sie die html (vor Akkordeon() aufgerufen wird) Struktur des Elements #accordion mit dem Ergebnis html der Ajax-Aufruf. Zum Beispiel:

HTML-Struktur vor Akkordeon() aufgerufen wird:

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

ajax Ergebnis HTML-Struktur:

<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 5

löste ich mein Problem durch die Verwendung von zwei Aussage als

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