Как загрузить другой HTML-файл в Magnific Popup с помощью функции AJAX?

Как загрузить другой файл HTML (на том же сервере) во всплывающем окне Magnific, тип AJAX? Я просмотрел исходный код http://dimsemenov.com/plugins/magnific-popup/ но я не могу заставить его работать. Другие типы всплывающих окон, такие как изображения, видео и фреймы, работают нормально. Я, вероятно, пропустил некоторые важные коды AJAX? После нажатия на ссылку всплывающее окно показывает текст «Загрузка...» и не загружает HTML-файл.

Вот упрощенный код.

<a href="ajax.html" class="popup-ajax">Open ajax</a>

JS:

$('.popup-ajax').magnificPopup({
    type: 'ajax'
});

файл ajax.html:

<div id="ajax-content" class="example-popup">
    <p>Content</p>
</div>

CSS для файла ajax/всплывающего окна:

.example-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

У меня нет никаких знаний об AJAX, поэтому пример кода был бы очень полезен. Любая помощь будет оценена по достоинству. Спасибо!

Изменить: не знал, что AJAX не работает без (локального) сервера. Это немного неловко, но я оставлю это сообщение для тех, кто сделает ту же ошибку.


person Community    schedule 29.10.2013    source источник


Ответы (1)


Вот так, правильно делаешь. Если по-прежнему не получается, проверьте правильность класса и загруженность js-файлов.

Проверьте также консоль ошибок, если у вас есть какие-либо ошибки JS, прежде чем она не будет работать.

person Gestudio Cloud    schedule 31.10.2013
comment
Спасибо за ваш ответ! Это была моя собственная глупая ошибка, что я сначала не протестировал его на (локальном) сервере. Не знал, что AJAX не работает без (локального) сервера. Как-то неловко, урок усвоен. - person ; 31.10.2013
comment
ajax не нуждается ни в каком http-сервере, он может работать, запрашивая локальные файлы. Вы можете проверить это, загрузив любой пакет модального окна с демонстрационными версиями, всегда есть демонстрация, использующая ajax с относительными локальными URL-адресами. ;) - person Gestudio Cloud; 18.02.2014