web-dev-qa-db-fra.com

Chargement dynamique AJAX contenu dans Fancybox

Ce scénario:

L'utilisateur insère son zip dans un champ de saisie et, lorsqu'il clique sur le bouton magique, il peut voir les magasins les plus proches de son emplacement. J'appelle le service parfaitement bien et le charge avec une certaine qualité AJAX. Tout est bien.

Maintenant, au lieu d’insérer les résultats quelque part sur la page, je veux les afficher dans une Fancybox. Je ne peux tout simplement pas faire ce travail.

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
        }
    });
});

Je m'attends à ce que Fancybox apparaisse et me montre le balisage de l'URL (nzData). Fancybox se charge, mais au lieu de contenu, je reçois une chaîne disant " Le contenu demandé ne peut pas être chargé. Veuillez réessayer ultérieurement. ".

Ce n'est pas un problème avec le service, alors je suppose que c'est juste moi qui oublie quelque chose ou qui viole l'API Fancybox. Alors, qu'est-ce que je fais mal?

EDIT: J'ai oublié de mentionner, j'utilise l'ancienne version de Fancybox (v1.3.4). 

jqueryajaxfancybox
7
Nix

J'ai fini par charger le contenu dans un conteneur masqué sur la page, puis en affichant ce contenu dans une Fancybox.

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

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

});

Ce n’est pas très joli, je l’admets, mais c’est le seul moyen de le faire fonctionner. J'ai parlé à un autre développeur ce matin, qui avait eu recours à la même solution dans un problème similaire.

Pourtant, il doit y avoir une meilleure solution. Si quelqu'un le sait, j'aimerais l'entendre!

4
Nix

Je sais que c'est une vieille question, mais j'ai récemment dû faire face à quelque chose de similaire. Voici ce que j'ai fait pour charger ajax dans Fancybox.

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

fancybox utilise un paramètre "ajax" où vous pouvez transmettre votre configuration (comme décrit par jquery )

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

Si vous voulez charger l'URL en tant qu'ajax, vous devez définir le type - 

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

Je voulais faire la même chose. Je suis arrivé à une solution similaire, mais différente de toutes les autres recommandées ici. Après avoir examiné la documentation des deux API, cela devrait fonctionner dans V1 ou V2.

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

        var $source = $(this);

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

Ensuite, votre conteneur pour les données.

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

Essayer:

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

Si vous voulez afficher nzData dans fancybox, utilisez

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

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

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