将ajax内容加载到colorbox中

我想将ajax响应加载到colorbox中。 colorbox应该在点击时打开并显示加载图像，直到获取并显示内容。将ajax内容加载到colorbox中

我的代码：

jQuery(".likeBar").colorbox({initialWidth:'460px', initialHeight:'355px', width:'460px', height:'355px', overlayClose:true, html: function() { 
    var eventID = jQuery(this).data("id"); 
    var sp_response = ""; 
    var the_data = 
    { 
     action: 'get_likes', 
     eventID: eventID, 
     }; 
    jQuery.post(ajaxurl, the_data, function(sp_response) { 
     return sp_response; 
    }); 
} 
});

我的问题： 将抓取的内容将不会被显示在我的颜色框。 AJAX调用成功，内容被提取，但不显示。

我的问题： 如何将内容从ajax调用插入到colorbox？

来源

2013-02-15 Chris

的解决我的问题：

jQuery(".likeBar").click(function(){ 
    var eventID = jQuery(this).data("id"); 
    var sp_response = ""; 
    var the_data = 
    { 
     action: 'get_likes', 
     eventID: eventID, 
     tb_check_code: tb_check_code 
    }; 
    jQuery.post(ajaxurl, the_data).done(function(sp_response) { 
     jQuery('#sp_likebox' + eventID).html(sp_response); 
    }); 

    jQuery('#sp_likebox' + eventID).show(); 
    jQuery(this).colorbox({initialWidth:'460px', initialHeight:'355px', width:'460px', height:'355px', overlayClose:true, inline:true, href: '#sp_likebox' + eventID, title: 'Diesen Benutzern gefällt der Beitrag'}); 

    jQuery(this).colorbox({ 
     onCleanup:function(e){ 
      jQuery('#sp_likebox' + eventID).hide(); 
     } 
    }); 
});

来源

2013-02-15 13:08:47 Chris

EDIT 2

我读过颜色框文档，发现可以用ajax通过只提供href属性和数据属性来获取内容。

http://www.jacklmoore.com/colorbox

编辑尽量让Ajax调用异步假像这样

$.ajax({ 
    type: "POST", 
    url: ajaxurl, 
    data: the_data, 
    success: function(sp_response) { 
     return sp_response; 
    }, 
    dataType: 'html', 
    async: false 
});

来源

2013-02-15 12:36:18 Ateszki

我想要的颜色框下点击后立即打开而不是在ajax调用完成后。 – Chris 2013-02-15 12:39:05

然后尝试第二种方法，并用我的答案中的替换Jquery.post简写函数。它会加载内容，因为它会同步！ – Ateszki 2013-02-15 12:41:50

但是这会导致浏览器停滞，用户无法做其他任何事情。 – Chris 2013-02-15 12:44:44

将ajax内容加载到colorbox中

回答

相关问题