Post Vorschau - Daten mit AJAX und Fancybox

Question

Ich versuche, eine Post-Vorschau, die in einem neuen Fancybox iframe erscheint. Seit einigen Wochen ich bin auf der Suche nach etwas Hilfe oder Best Practices, aber ich kann es nicht finden.

Mein Hauptproblem ist, die Daten von Form zu übergeben (vor Datenbank aktualisieren) zu Fancybox Fenstern. Meine AJAX-Fähigkeiten sind sehr schlecht, also ist mein Problem vielleicht nicht so schwer.

Bitte überprüfen Sie den Code:

$('.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() 
} 
}); 

Und eine Berufung Link:

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

Ich bin fast sicher, dass alles mit preview.php Datei in Ordnung ist, nur die Variablen veröffentlichen und drucken in richtige Orte.

Kann jemand Fancybox/AJAX-Teil überprüfen?

Answer 1

Wie ich in meinen Kommentaren erwähnt, Ihr Vorschauknopf sollte das Formular über Ajax bringt die POST Vorschau Werte erhalten (wir ajax statt iframe verwenden werden) so:

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

Dann müssen Sie binden, um die Vorschau-Taste, um eine manuelle on("click") Methode das Formular über ajax zunächst vorlegen .... und dann die Ergebnisse in fancybox schreiben zweitens mag:

$(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 

Siehe DEMO (fühlen Sie sich frei, den Quellcode zu erkunden)

Answer 2

Ich habe versucht, eine interessantere Art und Weise mit fancybox, die

in der fancybox Seite

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

Answer 3

Ich mag es nicht, die Lösung funktioniert Also werde ich meine eigenen Untersuchungen veröffentlichen.

Warum das Schreiben von Code mit 1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href nur fancybox auf Erfolg zu nennen, die bereits all this functions inside hat?

Wenn Sie sich entscheiden, Ajax statt iframe zu verwenden (wie in akzeptierte Antwort) können Sie einfach hinzufügen type Eigenschaft fancybox() Anruf, weil es beening geprüft und übergeben alle anderen

$('.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 Wie @JFK zeigte es nicht genug ist, müssen Sie Formulardaten jedes Mal, wenn Sie auf den Link klicken, so beforeLoad() statt data benötigt bekommen.Finnaly:

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

können Sie entfernen alle data-* atrributes zu

FIDDLE

KISS