Load portfolio items with AJAX without reloading the page

Question

I have a bunch of portfolio items sorted as tabs on this page. Link to the site . The site is built with Joomla 2.5 and I have a component that takes care of displaying each portfolio item. What I need to do is to load each respective portfolio item without reloading the page. So basically here is the javascript function that has the AJAX call

function ajax_portfolio($pid) {
var url = 'index.php?option=com_jms_portfolio&task=item.ajax_load_portfolio&tmpl=component&id=' + $pid;
alert(url);
var x = new Request({
    url: url, 
    method: 'post',
    evalScripts: true,
    evalResponse: true,  
    onSuccess: function(responseText){
        document.getElementById('ja-content-main').innerHTML = responseText;
        aaa();
    }

    }).send();}

The issue in fact is not the AJAX call cause and the click event of tag, there is no problem with this event. The problem is to fire the javascript function aaaa() after each ajax call. Sorry if I was not clear but the problem is to fire the function aaa() after each ajax call, this function creates the slider for each portfolio item.

Answer 1

Remove the existing href attribute of the <a> tags that wrap the images. Then, add the a click handler through javascript to each <a> tag after giving them a unqiue id. This will then cause the ajax to be called when clicking on the images instead of redirecting to a new page.

As for calling the aaa function, I assume the issue is scope since you have not posted the method. To give aaa the correct scope, you can pass an extra parameter to ajax_portfolio to acomplish this.

A JQuery example follows.

<a port_id="56"><img>...</img></a>

$(document).ready(function() {
  $("a").click(function() {
    ajax_portfolio($(this).attr("port_id"), $(this));
  });
});

// Add the $elem parameter here to track which element called this method.    
function ajax_portfolio($pid, $elem) {
  var url = ...;
  var x = new Request({
    url: url, 
    method: 'post',
    evalScripts: true,
    evalResponse: true,  
    onSuccess: function(responseText){
      document.getElementById('ja-content-main').innerHTML = responseText;
      // Pass the element that was clicked on to the aaa function.
      aaa($elem);
  }
}).send();}