如何加载AJAX内容到当前彩盒窗口？ [英] How to load AJAX content into current Colorbox window?

问题描述

我在寻找一排已经三天了答案。主要的原因是我有一个页面，链接上应加载彩盒与AJAX的内容，反过来它包含应该在同一个彩盒模式窗口中加载链接。到目前为止，我设法使它工作（部分）由这样的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（一个[相对='open_ajax']）。生活（点击，函数（）{
            $ .colorbox（{
                HREF：$（本）.attr（HREF）
            }）;
            返回false;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

它加载一个彩盒窗口，如果我点击一个链接，但在这个窗口中，如果我点击了链接，它会打开另一彩盒窗口。而我想要的内容要在当前的加载。请问AP preciate任何想法。感谢名单！

P.S。在主窗口中链接：

 ＆LT;一个标题=客户端详细信息相对=open_ajax的href =HTTP：//本地主机/客户/信息/ 123＆GT;客户详细资料...＆LT; / A＆GT;
 

而在彩盒环节都是一样的（这只是分页）：

 ＆LT;一个rel =open_ajax的href =HTTP：//本地主机/客户/信息/ 123/1＆GT; 1＆LT; / A＆GT;
＆其中;一个rel =open_ajax的href =的http：//本地主机/客户机/信息/ 123/2→2＆所述; / a取代;
＆其中;一个rel =open_ajax的href =的http：//本地主机/客户机/信息/ 123/3→3＆所述; / a取代;
＆其中;一个rel =open_ajax的href =的http：//本地主机/客户机/信息/ 123/4→4＆所述; / a取代;
＆LT;一个rel =open_ajax的href =HTTP：//本地主机/客户/信息/ 123/5＆GT; 5℃; / A＆GT;
 

解决方案

如果你需要加载内容到同一个彩盒而不是打开一个新的实例，我会通过确保事件处理程序的上下文打开彩盒启动是独特的，而不是挂在open_ajax在彩盒元素。

事情是这样的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（一个[相对='open_ajax']：没有（#colorbox一个[相对='open_ajax']））。生活（点击，函数（）{
            $ .colorbox（{
                HREF：$（本）.attr（HREF）
            }）;
            返回false;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

如果上述方法不工作，尝试使选择更具体的/独一无二的。

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

事情是这样的：

  $（'＃cboxLoadedContent一个[相对=open_ajax]）。住（点击，功能（五）{
    // prevent默认行为
    即preventDefault（）;

    VAR URL = $（本）.attr（HREF'）;

    $阿贾克斯（{
        键入：GET，
        网址：网址，
        数据类型：HTML，
        缓存：真正的，
        beforeSend：函数（）{
            $（'＃cboxLoadedContent）空（）。
            $（'＃cboxLoadingGraphic）显示（）。
        }，
        完成：函数（）{
            $（'＃cboxLoadingGraphic）隐藏（）。
        }，
        成功：功能（数据）{
            $（'＃cboxLoadedContent'）追加（数据）。
        }
    }）;

}）;
 

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:

<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!

P.S. Links in the main window:

<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>

解决方案

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.

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.

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

});

这篇关于如何加载AJAX内容到当前彩盒窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！