使用AJAX加载项目组合项而无需重新加载页面

时间:2012-05-04 14:46:42

标签: javascript ajax joomla

我有一堆投资组合项目在此页面上按标签排序。 Link to the site。该网站使用Joomla 2.5构建,我有一个组件,负责显示每个项目组合项目。 我需要做的是加载每个相应的项目组合项而不重新加载页面。所以基本上这里是具有AJAX调用的javascript函数

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

问题实际上不是AJAX调用原因和标记的click事件,这个事件没有问题。问题是在每次ajax调用后触发javascript函数aaaa()。很抱歉,如果我不清楚,但问题是在每次ajax调用后触发函数aaa(),此函数为每个项目组合项创建滑块。

1 个答案:

答案 0 :(得分:2)

删除包装图片的href标记的现有<a>属性。然后,在为他们提供unqiue id后,通过javascript将click处理程序添加到每个<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();}