Note that there are some explanatory texts on larger screens.

plurals
  1. POAppended data does not seem to in markup when viewing source
    text
    copied!<p>I have a website with some AJAX on it, basically the users clicks on a link, and some AJAX goes and fires a method that returns some HTML as show below, as the title says the data that is returned does not seem to be going into the HTML, is this why my accordions are not being made? It is strange becuase results are being returned because they out put onto my screen.</p> <pre><code>$(document).ready(function() { // 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: "GET", success : function (html) { $("#accordion").append(html); $('#accordion').accordion({ active: 0, header:'h2' }); //alert(accordion()) } }); } }); }); </code></pre> <p>As I am sure you can gather from the code, the returned HTML is appended to the <code>&lt;div id="accordion&gt;</code> and then it is 'turned' into an accordion, however this is not happening, all I get are the classes getting added to the div that would give accordion functionality but I get no real functionality.</p> <p>I noticed that when I view source whether or not the AJAX has fired there is no content in <code>&lt;div id="accordion&gt;</code> even though I can see the returned data, how can I get the accordion to work?</p> <p>=======What gets returned by the AJAX======</p> <pre><code>?php if(isset($content)) { // var_dump($content); foreach($content as $row) { print "&lt;h2 class='$row[category_name]'&gt;&lt;a href='#'&gt;$row[category_name]&lt;/a&gt;&lt;/h2&gt;"; print "&lt;div class='$row[category_name]'&gt;$row[content_title]&lt;/div&gt;"; } } ?&gt; </code></pre> <p>=========Where the AJAX html goes=========</p> <pre><code> &lt;div id="right-content"&gt; &lt;div id="accordion"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload