The DOM, Jquery and Accordions
I have a page the makes an AJAX request, and returns some data from the database, once it is retruned I am trying to append it to a div and make an accordion, however all I am getting is the data back and no accordion here is my source code once the AJAX has run.(snippet)
<script type="text/javascript">
$(document).ready(function() {
//accordians for when the AJAX loads the content
// hides the main_menu as soon as the DOM is ready
// (a little sooner than page load)
$('#main_menu').hide();
// shows the slickbox on clicking the noted link
$('h3#show-menu a').click(function() {
$('#main_menu').toggle('slow');
return false;
});
//try and hide the left content when it is null
$("#left-content:empty").hide();
//style up the scroll bar
$('#left-content').jScrollPane();
//do some AJAX to call the method instead of the browser
$("a.navlink").click(function (ev) {
$(this).toggleClass("active");
ev.preventDefault();
var id = $(this).attr("id")
if ($(this).hasClass("active")) {
$("."+id).remove();
} else {
//$(this).toggleClass("active");
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$("#accordion").append(html);
$('#accordion').accordion({
active: 0,
header:'h2.Blog'
});
//alert(accordion())
开发者_如何转开发 }
});
}
});
});
</script>
</head>
<body>
<div style="left: -100em; position: absolute; width: 100em;"/>
<div id="wrapper">
<h3 id="show-menu">
</h3>
<div id="main_menu" style="display: block;">
</div>
<div id="left-content-holder">
</div>
<div id="right-content">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h2 class="Blog ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
</h2>
<div class="Blog ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 16px;" role="tabpanel">Hello World</div>
</div>
</div>
</div>
As you can see the data gets appended to the <div id="accordion"> and all the apropriate classes get given to the elements that should give it accordion functionality but I get nothing. Should i be creating the accordion from the DOM and theoretically the data is returned is not in the HTML and if so how would I go about doing this?
Thanks
Looks as though the accordion doesn't like things being appended onto it. Assuming you already have the accordion initiated, try destroying the accordion before you append the html to it in your success function.
$('#accordion').accordion('destroy');
before
$('#accordion').append(html);
Then you can re-initiate it as you're doing already.
加载中,请稍侯......
精彩评论