如何将AJAX内容加载到当前的Colorbox窗口?

I'm searching for the answer for three days in a row already. The matter is that I have a page, links on which should load Colorbox with AJAX content that in its turn contains links that should be loaded in the same Colorbox modal window. So far I managed to make it work (partially) by this:

我已经连续三天在寻找答案了。问题是我有一个页面，该页面上的链接应该加载包含AJAX内容的Colorbox，这些内容反过来包含应该在相同的Colorbox模态窗口中加载的链接。到目前为止，我成功地(部分地)做到了这一点:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel='open_ajax']").live('click', function() {
            $.colorbox({
                href:$(this).attr('href')
            });
            return false;
        });
    });
</script>

It loads a Colorbox window, if I click on a link, but in this window, if I click on its links, it opens another Colorbox window. And I want the content to be loaded within the current one. Will appreciate any thoughts. Thanx!

它会加载一个Colorbox窗口，如果我点击一个链接，但是在这个窗口中，如果我点击它的链接，它会打开另一个Colorbox窗口。我希望内容被加载到当前的内容中。会欣赏任何想法。谢谢!

P.S. Links in the main window:

在主窗口的P.S.链接:

<a title="Client Details" rel="open_ajax" href="http://localhost/client/details/123">Client Details...</a>

And links in the Colorbox are all the same (it is simply pagination):

颜色框中的链接都是一样的(只是分页):

<a rel="open_ajax" href="http://localhost/client/details/123/1">1</a>
<a rel="open_ajax" href="http://localhost/client/details/123/2">2</a>
<a rel="open_ajax" href="http://localhost/client/details/123/3">3</a>
<a rel="open_ajax" href="http://localhost/client/details/123/4">4</a>
<a rel="open_ajax" href="http://localhost/client/details/123/5">5</a>

1 个解决方案

#1

If you need to load the content into the same Colorbox rather than opening a new instance, I would start by making sure that the event handler context to open the Colorbox was exclusive and not hooked onto the 'open_ajax' elements in the Colorbox.

如果您需要将内容加载到相同的Colorbox中，而不是打开一个新的实例，我将首先确保打开Colorbox的事件处理程序上下文是独占的，并且不与Colorbox中的“open_ajax”元素关联。

Something like this:

是这样的:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel='open_ajax']:not(#colorbox a[rel='open_ajax'])").live('click', function() {
            $.colorbox({
                href:$(this).attr('href')
            });
            return false;
        });
    });
</script>

If the above does not work try making the selector more specific/unique.

如果上面的方法不起作用，请尝试使选择器更特定/唯一。

Then AJAX in the new content directly into the Colorbox you already have open.

然后AJAX在新内容中直接进入你已经打开的Colorbox。

Something like this:

是这样的:

$('#cboxLoadedContent a[rel="open_ajax"]').live('click', function(e){
    // prevent default behaviour
    e.preventDefault();

    var url = $(this).attr('href'); 

    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'html',
        cache: true,
        beforeSend: function() {
            $('#cboxLoadedContent').empty();
            $('#cboxLoadingGraphic').show();
        },
        complete: function() {
            $('#cboxLoadingGraphic').hide();
        },
        success: function(data) {                  
            $('#cboxLoadedContent').append(data);
        }
    });

});