s_ainley87 Posted December 10, 2009 Share Posted December 10, 2009 Hello, 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 Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 10, 2009 Share Posted December 10, 2009 What happens if you change your else section to this? If it still doesnt work could you post all the html/js for the page. } else { var url = $(this).attr("href"); $("#accordion").load(url).accordion({ active: 0, header:'h2.Blog' }); } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.