Hi,
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.
$(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())
}
});
}
});
});
As I am sure you can gather from the code, the returned HTML is appended to the <div id="accordion> 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.
I noticed that when I view source whether or not the AJAX has fired there is no content in <div id="accordion> even though I can see the returned data, how can I get the accordion to work?
=======What gets returned by the AJAX======
?php
if(isset($content)) {
// var_dump($content);
foreach($content as $row) {
print "<h2 class='$row[category_name]'><a href='#'>$row[category_name]</a></h2>";
print "<div class='$row[category_name]'>$row[content_title]</div>";
}
}
?>
=========Where the AJAX html goes=========
<div id="right-content">
<div id="accordion"></div>
</div>