0

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呼び出しからのコンテンツをカラーボックスに挿入するにはどうすればよいですか？

4

2 に答える 2

2

私の問題の解決策：

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-15T13:08:47.187 に答える
0

編集2

カラーボックスのドキュメントを読みましたが、hrefプロパティとdataプロパティだけを指定することで、ajaxを使用してコンテンツを取得できることがわかりました。

http://www.jacklmoore.com/colorbox

編集このようにajax呼び出しをasyncfalseにしようとします

$.ajax({
  type: "POST",
  url: ajaxurl,
  data: the_data,
  success: function(sp_response) {
        return sp_response;
    },
  dataType: 'html',
  async: false
});
于 2013-02-15T12:36:18.983 に答える