Load formular with ajax and display it in fancybox lightbox

Just a code snippet:

The link:

<a href="#" id="the-opener-link" data-url="/link/to/form">Open form</a>

The JavaScript:

$('#the-opener-link').click(function(event) {

    $.fancybox.open({
        href:$(this).attr('data-url'),
        type: 'ajax',
        afterShow: function() {
            $(".fancybox-inner form").bind("submit", function () {
                $.fancybox.showLoading();
                $.ajax({
                    type: "POST",
                    cache: false,
                    url: $(this).attr('action'),
                    data: $(this).serializeArray(),
                    success: function (data) {
                        $.fancybox(data);
                    }
                });
                return false;
            });
        }
    });

    return false;
});

I’m using a data attribute to protect the form being indexed and used by bots/search engines.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Sven Wappler

TYPO3 Experte, symfony, Magento, SEO, Frontend und Backend

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert