Как я могу активировать Colorbox после успешной инъекции ajax? - PullRequest
Новая
       2

Как я могу активировать Colorbox после успешной инъекции ajax?

0 голосов
/ 15 марта 2011

Я вижу, что Colorbox может загружать внешний HTML, но при этом загружается только вся указанная страница.Я хотел бы добавить только часть страницы, необходимую для некоторых форм входа в систему и регистрации, а затем запустить Colorbox, только если процесс прошел успешно.

Я набросал следующее ... 

$('.gateway').click(function(e) {
  var _link = $(this);
  var $error = $('<div id="error" />');
  var $modal = $('<div id="modal" />');

  var $url = _link.attr('href') + ' #gateway'; 
    // I only want to load #gateway from the target page

  $modal.load($url, function (response, status, xhr) {
    if (status == 'success') {
      $('body').append($modal);
      $modal.hide().colorbox({
        width:'60%', 
        inline:true, 
        href:'#gateway',
        onLoad:function(){ $modal.show(); },
        onCleanup:function(){ 
          $modal.remove(); 
          $error.remove(); 
        }
      });
    }
    if (status == 'error') {
      var $msg = 'Sorry, something went wrong: ';
      $error.html($msg + xhr.status + ' ' + xhr.statusText);
      // Do something with this message!
    }
  });

  e.preventDefault();
});

$modal правильно вводит правильное содержимое #gateway, но Colorbox ничего не делает.Я чувствую, что исказил свои события и методы здесь.Я предполагаю, что метод Colorbox (это правильная терминология?) Отвечает только на событие click, а не на последующее успешное событие загрузки.

Буду признателен, если кто-нибудь поможет мне, чтобы Colorbox отреагировал на событие загрузки или показал мне более элегантный способ достичь того, чего я хочу!

1 Ответ

1 голос
/ 16 марта 2011

ColorBox использует метод загрузки jQuery для его функциональности ajax, поэтому вы можете использовать его, чтобы просто извлечь фрагмент из вашего HTML-документа. Вместо всего, что вы опубликовали, попробуйте это: 

$('.gateway').colorbox({
    width:'60%', 
    href: function(){ return $(this).attr('href') + ' #gateway';}
});

Если запрос ajax не выполнен, colorbox сообщит об этом. Если вы решите, что вам нужна настраиваемая обработка ошибок, вы можете сделать запрос ajax / load для своего фрагмента HTML и передать его непосредственно в свойство html colorbox, вместо добавления его в DOM и попытки использовать встроенное свойство.

...