ページをリロードせずにAJAXでポートフォリオ商品をロード

Question

このページには、ポートフォリオ品目がタブとしてソートされています。 Link to the site。このサイトはJoomla 2.5で構築されており、各ポートフォリオの項目を表示するコンポーネントがあります。 私がする必要があるのは、ページをリロードせずにそれぞれのポートフォリオ項目を読み込むことです。だから、基本的には、ここでAJAX呼び出し

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();} 

を持っているJavaScript関数は、実際には問題はAJAX呼び出しの原因とタグのクリックイベントではありませんが、このイベントでは問題ありません。問題は、各ajax呼び出しの後にjavascript関数aaaa（）を起動することです。申し訳ありませんが、問題が各ajax呼び出しの後で関数aaa（）を起動することである場合、この関数は各ポートフォリオ項目のスライダーを作成します。

Answer 1

イメージをラップする<a>タグの既存のhref属性を削除します。次に、ハンドラをjavacriptを介して、それぞれ<a>タグに追加します。これにより、新しいページにリダイレクトするのではなく、画像をクリックするときにajaxが呼び出されます。

aaa関数を呼び出す場合は、メソッドを投稿していないため、問題はスコープとみなされます。 aaaに正しいスコープを与えるために、ajax_portfolioに余分なパラメータを渡してこれを実現することができます。

JQuery例を示します。

<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();}