Question

我想在彩盒中加载ajax响应。单击时应打开颜色框并显示加载图像，直到获取并显示内容为止。

我的代码：

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调用中的内容插入到颜色框中？

Answer 1

我的问题的解决方案：

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

Answer 2

编辑2

我读过colorbox文档，发现只需提供href属性和data属性就可以使用ajax获取内容。

http://www.jacklmoore.com/colorbox

EDIT 尝试像这样使用ajax调用async false

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

将ajax内容加载到colorbox中

2 个答案: