I use K2.
I have a menu item that leads to a page showing introtext and small images of the 4 latest articles from a category. This is set in the category parameters and the menu item leads to the category layout. I would like to display this content without reloading the page.
How can I make an ajax request when menu item is clicked so this content is appended to the following element?
<section id="ajax-content"></section>
I'm assuming your using JQuery. If your using Mootools let me know, and I'll update this. Your AJAX call can look something like this:
$.ajax({
url : urlToSend,
contentType : "application/json; charset=utf-8",
type : 'get',
cache : false,
success : function(data) {
successFunction(data);
},
error : function(data1, data2, data3) {
alert(data3);
}
});
Of course, change the contentType to be what you need. The type can also be "post" in which case you want to add another parameter data: your_data_to_be_passed_to_the_server,
Your successFunction can look like this:
successFunction : function(data) {
jQuery('#ajax-content').html(data);
},
Or you can just put the jQuery('#ajax-content').html(data); line into the AJAX success function if you are only using this for this one call.
You will handle most of this in your JavaScript.
In Joomla!, set a custom CSS class on the menu item in question. This is done with the Link CSS Style option in the Link Type Options of your menu item. You can then listen for a click on that link by referencing the style you set in your JavaScript. Remember to use event.preventDefault(); to ensure your menu item doesn't cause the page to reload.
