Comment charger un autre fichier HTML dans Magnific Popup avec la fonction AJAX? - jquery, html, ajax, popup, magnific-popup

Comment charger un autre fichier HTML (sur le même serveur) dans un type Magnific Popup, AJAX? J'ai regardé le code source de http://dimsemenov.com/plugins/magnific-popup/ mais je ne peux pas le faire fonctionner. Les autres types de popups fonctionnent bien, tels que les images, les vidéos et les iframes. Il me manque probablement des codes AJAX importants? Après avoir cliqué sur le lien, la fenêtre contextuelle affiche le texte "Chargement ..." et ne charge pas le fichier HTML.

Voici le code simplifié jusqu'à présent.

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

JS:

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

fichier ajax.html:

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

CSS pour le fichier / popup ajax:

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

Je ne connais pas AJAX, un exemple de code serait donc très utile. Toute aide serait la bienvenue. Merci!

Modifier: Je ne savais pas que AJAX ne fonctionnait pas sans serveur (local). C’est un peu gênant mais je laisserai ce message à d’autres qui feront la même erreur.

Réponses:

C’est ainsi que vous le faites correctement. Si vous ne pouvez toujours pas l’obtenir, vérifiez que la classe est correcte et que les fichiers js sont chargés.

Vérifiez également la console d’erreur, si vous avez des erreurs JS avant que cela ne fonctionne.