Hello, I am trying to get some data from a database on the fly and place it into a div
, currently my javascript file looks like this,
<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");
alert(url);
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$('#accordion').accordion('destroy');
$("#accordion").append(html).accordion({active:false, header:'h2', collapsible:true});
}
});
}
});
/*
* THIS IS CODE IN QUESTION
*/
$("a.contentlink").mouseover(function(){
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$('#abstract').append(html)
}
});
});
});
</script>
The code in question is last function that uses a.contentlink
as the selector, what I am wanting is for the user to enter the the element with their mouse and for that to trigger the ajax and the results to be appended to the `#abstract' container, the method gets called is currently,
public function get_content($content_id) {
$data['hello'] = "hello";
$this->load->view('template/abstract', $data);
}
At the moment I am just setting a simple variable when the function is called, but I am getting nothing back, can any body help?