3

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>
  • Can you explain more what you are trying to do? Is this on the frontend or admin side? What is your ultimate goal? – David Fritsch Apr 22 '14 at 22:55
  • @davidfritsch I reformated the question. – web-tiki Apr 22 '14 at 23:29
  • What is the URL you are using for the AJAX call? – bgies Apr 23 '14 at 0:09
  • @bgies I am using SEF URLs so the page I am calling is www.domain.com/module-item – web-tiki Apr 23 '14 at 9:23
5

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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.