Caricamento contenuti dinamici AJAX in Fancybox

Question

Questo scenario:

L'utente inserisce il suo zip in un ingresso-campo, e quando si fa clic sul pulsante magia, si arriva a vedere i negozi più vicini alla sua posizione. Chiamo perfettamente il servizio, e lo carico con un po 'di AJAX-bontà. Tutto bene.

Ora, invece di inserire i risultati da qualche parte sulla pagina, lo voglio visualizzato in una Fancybox. Semplicemente non posso farlo funzionare.

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

mi aspetto Fancybox a popup e mi mostra il markup dall'URL (nzData). Fancybox viene caricato, ma al posto del contenuto viene visualizzata una stringa che dice "Impossibile caricare il contenuto richiesto. Riprova più tardi.".

Non è un problema con il servizio, quindi sospetto che sia solo io a trascurare qualcosa o a violentare l'API di Fancybox. Quindi, cosa sto sbagliando?

EDIT: Ho dimenticato di menzionare, sto usando la vecchia versione di Fancybox (v1.3.4).

Answer 1

Ho finito per caricare il contenuto in un contenitore nascosto nella pagina e quindi visualizzare quel contenuto in una Fancybox.

Non è molto carino, lo ammetto, ma è l'unico modo per farlo funzionare. Ho parlato con un altro sviluppatore stamattina, che ha fatto ricorso alla stessa soluzione in un problema simile.

Tuttavia, ci deve essere una soluzione migliore. Se qualcuno lo sa, mi piacerebbe sentirlo!

Answer 2

Prova:

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

Answer 3

Se quello che vuoi è quello di visualizzare nzData all'interno fancybox, quindi utilizzare

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

Answer 4

Se si desidera caricare URL, ajax, è necessario impostare il tipo -

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

Answer 5

So che questa è una vecchia domanda, ma di recente ho dovuto occuparmi di qualcosa di simile. Ecco cosa ho fatto per caricare ajax in fancybox.

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

Answer 6

fancybox utilizza un parametro "Ajax", dove è possibile passare la configurazione (come viene descritto da jquery)

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

Answer 7

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

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

Answer 8

ero interessato a fare lo stesso cosa. Sono venuto a una soluzione simile, tuttavia è diverso da tutti gli altri consigliati qui. Dopo aver esaminato la documentazione per entrambe le API, questo dovrebbe funzionare in V1 o V2.

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

     var $source = $(this); 

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

Quindi, il contenitore per i dati.

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

Answer 9

è così che ho fatto:

avete bisogno di tre elementi:

1) è necessario un div che funge da contenitore per l'fancybox, chiamiamolo #fancycontainer

2) #fancylink è un nascosto con href al div fancybox (in questo caso href="#fancycontainer")

3) #button è il c elemento lickable che carica tutto.

Aggiungere il seguente codice nella funzione 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'); 
    } 
}); 

Spero che questo aiuti qualcuno