Как загрузить содержимое AJAX в текущее окно Colorbox? - PullRequest
Новая
       9

Как загрузить содержимое AJAX в текущее окно Colorbox?

6 голосов
/ 11 марта 2011

Я ищу ответ уже три дня подряд. Дело в том, что у меня есть страница, ссылки на которую должны загружать Colorbox контентом AJAX, который, в свою очередь, содержит ссылки, которые должны быть загружены в том же модальном окне Colorbox. Пока мне удалось заставить это работать (частично) этим: 

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

Он загружает окно Colorbox, если я нажимаю на ссылку, но в этом окне, если я нажимаю на его ссылки, открывается другое окно Colorbox. И я хочу, чтобы содержимое было загружено в текущем. Буду признателен за любые мысли. Thanx!

P.S. Ссылки в главном окне: 

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

И ссылки в Colorbox все одинаковые (это просто нумерация страниц): 

<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 Ответ

16 голосов
/ 11 марта 2011

Если вам нужно загрузить содержимое в тот же Colorbox, а не открывать новый экземпляр, я бы начал с того, чтобы убедиться, что контекст обработчика событий для открытия Colorbox является эксклюзивным и не подключен к элементам 'open_ajax' в Colorbox.

Примерно так: 

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

Если вышеперечисленное не работает, попробуйте сделать селектор более конкретным / уникальным.

Затем AJAX в новом контенте прямо вЦветовая коробка у вас уже открыта.

Примерно так: 

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

});
...