Загрузка динамического содержимого AJAX в Fancybox

сценарий:

пользователь вставляет свой zip в поле ввода, и при нажатии волшебной кнопки он видит магазины, ближайшие к его местоположению. Я называю службу совершенно прекрасной и загружаю ее с некоторым AJAX-goodness. Все хорошо.

теперь, вместо того, чтобы вставлять результаты где-то на странице, Я хочу, чтобы он отображался в Fancybox. Я просто не могу заставить это работать.

JavaScript:

$('#button').on('click', function(){    
   // Function to build the URL edited out for simplicity       
   var nzData = '/url.com?Zip=8000 #module';

   $.fancybox({
      ajax: { 
         data: nzData
        }
    });
});

I ожидайте, что fancybox появится и покажет мне разметку из URL (nzData). Fancybox загружается, но вместо содержимого я получаю строку с надписью"запрошенный контент не может быть загружен. Пожалуйста, попробуйте позже.".

это не проблема с сервисом, поэтому я подозреваю, что это просто я что-то упускаю или насилую API Fancybox. Так что я делаю не так?

EDIT: я забыл упомянуть, я использую старую версию Fancybox (v1.3.4).

7
ajax fancybox jquery

9 ответов

Я знаю, что это старый вопрос, но мне недавно пришлось иметь дело с чем-то подобным. Вот что я сделал, чтобы загрузить ajax в fancybox.

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});
14

fancybox использует параметр "ajax", где вы можете передать свою конфигурацию (как описано в jQuery)

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});
9

Если вы хотите загрузить url как ajax, вы должны установить тип -

$.fancybox({
  href : nzData,
  type : 'ajax'
});
8

Я закончил загрузку содержимого в скрытый контейнер на странице, а затем отображение этого содержимого в Fancybox.

$('#button').on('click', function(){    
   var nzData = '/url.com?Zip=8000 #module';

     $('#foo').load(nzData, function(){
       var foo = $('#foo').html(); 
       $.fancybox(foo);
    });

});
4

мне было интересно сделать то же самое. Я пришел к аналогичному решению, однако оно отличается от любых других, рекомендованных здесь. После просмотра документации для обоих API это должно работать в V1 или V2.

$('#button').on('click', function(){    
    $('#foo').load('/content.html', function(){

        var $source = $(this);

        $.fancybox({
            content: $source,
            width: 550,
            title: 'Your Title',
            etc...
        });
    });
});

затем ваш контейнер для данных.

<div id="foo" style="display: none;"></div>
2

попробуй:

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
1

Если вы хотите, чтобы отобразить nzData внутри fancybox, затем используйте

$.fancybox(nzData,{
 // fancybox options
});
0

https://stackoverflow.com/a/10546683/955745

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
0

вот как я это сделал:

вам понадобится три элемента:

1) вам нужен div, который служит контейнером для fancybox, назовем его #fancycontainer

2)#fancylink является скрытым <a> С href в fancybox div(в этом случае href="#fancycontainer")

3)#button-это кликабельный элемент, который загружает все.

добавьте следующий код в функцию onload:

$('#fancynlink').fancybox();

$('#button').click(function(){
  $.ajax({
    //OPTIONS...
    //..........
    success: function(data){
      //Here goes the code that fills the fancybox div
      $('#fancycontainer').append(blablabla.....);
      //And this launches the fancybox after everything has loaded
      $('#fancylink').trigger('click');
    }
});

надеюсь, это поможет кому-то

-1