[eluser]sico87[/eluser]
First of I would like to apologise, I am awful at putting my problems into words but I will try my best.
I am in the process of making a one page wesbite, to do this I am using ajax to GET some data from the data base. This is done by calling a method in the AJAX and then apending the results (which get put into a view) onto a
in the 'master page'.
Here is the code that does all the leg work, first of all the master page.
Code:
$this->load->view('template/main_menu.php');
$this->load->view('template/left-content.php');
$this->load->view('template/right-content.php');
The right content view
Code:
<div id="right-content">
<div id="accordion"></div>
</div>
The method that the AJAX calls
Code:
public function category($content_id) {
//$this->output->enable_profiler(TRUE);
if (intval($this->uri->segments[4])){
$content_id = $this->uri->segments[4];
} else {
$content_id = $this->uri->segments[7];
}
$data['content'] = $this->site_model->get_content($content_id);
$this->load->view("call", $data);
}
and finally the javascript
Code:
$(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: "GET",
success : function (html) {
$("#accordion").append(html);
$('#accordion').accordion({
active: 0,
header:'h2'
});
//alert(accordion())
}
});
}
});
});
It seems that the HTML that is returned is not being put into the markup as when I view source after getting the data (and seeing on screen nothing is appended to the div accordion like it should be.