Fancybox 2 с динамическим содержимым json

Я пытаюсь добавить динамический контент в всплывающее окно Fancybox 2.0, когда кто-то нажимает кнопку. Я попробовал несколько вещей, но я не могу заставить это работать. Я всегда получаю «Запрошенный контент не может быть загружен». ошибка.Fancybox 2 с динамическим содержимым json

я сначала хочу, чтобы загрузить содержимое JSon при нажатии на кнопку, а затем открыть всплывающее окно с содержанием ...

ОБНОВЛЕНО ВОПРОС ТАК ЭТО дублируется

Что у меня есть:

HTML

<a href="#quick_cart" class="opener cart" id="productid_1234" data-fancybox-href=" url-to-product">Add to cart</a>

Jquery

$(document).ready(function() { 

      $('.opener').click(function(e){ 
      e.preventDefault(); 

      var url = $(this).data('fancybox-href') + '/?format=json'; 
      console.log(url); 

      $.fancybox({ 
       type: 'inline', 
       beforeLoad: function(){ 
       quick_cart(url); 
       } 
      }); 
      }); 
     }); 
     function quick_cart(url){ 

      $.getJSON(url, function (data){ 

      $('#quick_cart').append('<div>' + data.product.title + '</div>'); 

      });  
     }

Сценарий загружает правильный URL-адрес для содержимого json и заполняет скрытый div #quick_cart. Однако проблема заключается в том, что я получаю сообщение об ошибке «Запрошенный контент не может быть загружен». Я не могу понять, почему ...

Не может быть, что «тип: inline» не является правильным? Я попробовал несколько вещей и даже удалил эту строку, но не повезло. Когда я удаляю эту строку, всплывающее окно не появляется.

Что я делаю неправильно? Любая помощь очень ценится.

источник

2013-12-19 Meules

Существует список вопросов. Начнем с некоторых. 1). в 'var url = $ (this) .attr (" href ") + '/? format = json';', '$ (this)' должен ссылаться на селектор, потому что на данный момент это 'undefined'. 2). Вам не хватает, чтобы показать html элемента, откуда вы хотите получить атрибут 'href', как в номере [1] 3). '$ (this) .fancybox()' только связывает fancybox с '$ (this)', но это не вызывает его. Вместо этого вы скорее можете использовать '$ .fancybox()'. 4). У вас есть дополнительная конечная запятая в конце ваших опций API ** И ** добавочная свободная закрывающая '}' фигурная скобка в вашем коде (вы увидите синтаксическую ошибку) – JFK

@JFK: Хорошо спасибо за головы! Но в целом «настройка» - правильный способ сделать это? – Meules

Не видите, откуда вы получаете значение 'href' из' $ (this) .attr ("href") + '/? Format = json'? – JFK

ОК после буквально вытащил все мои волосы на этом. Поэтому, чтобы помочь кому-то еще в этом решении:

Код не знает, куда помещать HTML-код в функцию quick_cart. Поэтому достаточно простого атрибута href для кода fancybox. Как так:

$.fancybox({ 
    type: 'inline', 
    beforeLoad: function(){ 
    quick_cart(url); 
    }, 
    href: 'quick_cart' 
});

Надеется, что это может помочь кому-нибудь;)

источник

2013-12-30 15:15:31 Meules

Fancybox 2 с динамическим содержимым json

ответ

Смежные вопросы