Ajax加载多个div(WordPress)

时间:2011-11-10 09:50:25

标签: ajax wordpress

我正在使用ajax脚本从其他页面加载内容,而无需重新加载浏览器。

目前我正在检索#inside div的内容,但我正在使用全背景幻灯片(#full),需要加载。

也许这可以通过加载#full div的内容来实现,但我不知道如何做到这一点。

这是我的代码:

 // Self-Executing Anonymous Function to avoid more globals
  (function() {

// Home link isn't dynamic, so default set class name to it to match how dynamic classes    work in WordPress
$(".home li.home").removeClass("home").addClass("current_page_item");

// Add spinner via JS, cuz would never need it otherweise
$("body").append("<img src='http://themeclubhouse.digwp.com/images/ajax-loader.gif' id='ajax-loader' />");

var 
$mainContent     = $("#wrapper"),
$ajaxSpinner     = $("#ajax-loader"),
$searchInput     = $("#s"),
$allLinks        = $("a"),
$el;

// Auto-clear search field
$searchInput.focus(function() {
if ($(this).val() == "Search...") {
    $(this).val("");
}
});

$('a:urlInternal').live('click', function(e) { 

// Caching
$el = $(this);

if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {         
    var path = $(this).attr('href').replace(base, '');
    $.address.value(path);
    $(".current_page_item").removeClass("current_page_item");
    $allLinks.removeClass("current_link");
    $el.addClass("current_link").parent().addClass("current_page_item");
    return false;
}

// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();

});  

 // Fancy ALL AJAX Stuff
$.address.change(function(event) {  
if (event.value) {
    $ajaxSpinner.fadeIn();
    $mainContent
        .empty()
        .load(base + event.value + ' #content', function() {
            $ajaxSpinner.fadeOut();
            $mainContent.fadeIn();
        });  
} 

var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
    var diff = current.replace(base, '');
    location = base + '/#' + diff;
}
  }); 

})(); // End SEAF

1 个答案:

答案 0 :(得分:1)

尝试重复该过程:

// Fancy ALL AJAX Stuff
$.address.change(function(event) {  
if (event.value) {
    //load ajax image
    $ajaxSpinner.fadeIn();

    $mainContent.empty().load(base + event.value + ' #content', function() {
    $ajaxSpinner.fadeOut();
    $mainContent.fadeIn();
    });

    // repeat here

    //load another div
    $mainContent.empty().load(base + event.value + ' #mydiv1', function() {
    $mainContent
    });

    //load another div
    $mainContent.empty().load(base + event.value + ' #mydiv2', function() {
    $mainContent
  });
}

让我知道它是否有效,Ciao! :)