Anteprima post - Trasmissione dati con AJAX e Fancybox

Question

Sto tentando di eseguire un'anteprima post, che verrà visualizzata in un nuovo iframe di Fancybox. Da un paio di settimane cerco aiuto o buone pratiche, ma non riesco a trovarlo.

Il mio problema principale è passare i dati dal modulo (prima dell'aggiornamento del database) alla finestra di Fancybox. Le mie abilità AJAX sono molto scarse, quindi forse il mio problema non è così difficile.

Si prega di verificare il codice:

$('.preview2').fancybox({ 
fitToView : false, 
width  : 905, 
height  : 505, 
autoSize : false, 
closeClick : false, 
openEffect : 'none', 
closeEffect : 'none', 
ajax: { 
    type: "POST", 
    cache : false, 
    url: "preview.php", 
    data: $('#postp').serialize() 
} 
}); 

e un link di chiamata:

<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a> 

Sono quasi sicuro che tutto va bene con il file preview.php, basta inviare le variabili e la stampa in posti giusti

Qualcuno può controllare la parte Fancybox/AJAX?

Answer 1

Come ho detto nei miei commenti, il pulsante di anteprima dovrebbe inviare il modulo tramite la tecnologia AJAX per ottenere i valori Anteprima Messaggio (useremo ajax invece di iframe) così:

<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a> 

allora si avrebbe bisogno di associare il pulsante di anteprima per un metodo manuale on("click") per inviare il modulo via ajax primo luogo .... e poi inviare i risultati in fancybox piace in secondo luogo:

$(document).ready(function() { 
    $('.preview2').on("click", function (e) { 
    e.preventDefault(); // avoids calling preview.php 
    $.ajax({ 
     type: "POST", 
     cache: false, 
     url: this.href, // preview.php 
     data: $("#postp").serializeArray(), // all form fields 
     success: function (data) { 
     // on success, post (preview) returned data in fancybox 
     $.fancybox(data, { 
      // fancybox API options 
      fitToView: false, 
      width: 905, 
      height: 505, 
      autoSize: false, 
      closeClick: false, 
      openEffect: 'none', 
      closeEffect: 'none' 
     }); // fancybox 
     } // success 
    }); // ajax 
    }); // on 
}); // ready 

Vedi DEMO (sentitevi liberi di esplorare il codice sorgente)

Answer 2

ho cercato un modo più interessante con fancybox che funziona,

nella pagina fancybox

var myvar; 
$(document).ready(function(){ 
    myvar = parent.$("#formvariwant").val(); 
}); 

Answer 3

non mi piace la soluzione , quindi posterò le mie indagini.

Perché il codice di scrittura con 1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href solo per chiamare fancybox in caso di successo, che ha già all this functions inside?

Se si decide di utilizzare Ajax invece di iframe (come in risposta accettata) si potrebbe semplicemente aggiungere type proprietà fancybox() chiamata, causa è beening selezionata, e superare tutti gli altri

$('.preview2').fancybox({ 
    type: "ajax", 
    ajax: { 
     data: $('#postp').serialize() 
    // url: "someurl.php" not needed here, it's taken from href 
    //     if you need it, e.g. you have a button, not a link 
    //     use "href" property that overrides everything 
    //     not attribute, cause it's invalid 
    } 
// href: "url_to_add_or_override_existing_one", 
// all other effects 
// afterLoad: function() { // other cool stuff } 
}); 

EDIT Come @JFK ha sottolineato che non è sufficiente, devi ottenere i dati del modulo ogni volta che fai clic sul link, quindi è necessario beforeLoad() anziché data.Finnaly:

$('.preview2').fancybox({ 
    type: "ajax", 
    beforeLoad: function() { 
     this.ajax.data = $('#postp').serialize(); 
    } 
}); 

è possibile rimuovere tutti data-* atrributes troppo

FIDDLE

BACIO