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 Link to comment https://forums.phpfreaks.com/topic/184623-jquery-dom-and-accordionshelp/ 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' }); } Link to comment https://forums.phpfreaks.com/topic/184623-jquery-dom-and-accordionshelp/#findComment-974845 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.