CODEWITHSUNDEEP
jqueryajaxfancybox
swg1cor14
swg1cor14

Reputation: 1722

Fancybox 2 Show ajax result as iframe

Ok so all the other questions either have to do with version 1 instead of version 2 or they are just calling a simple file with 1 variable. Essentially what I want to do is take the input fields and pass them to a PHP file withOUT submitting the form and displaying the html echo in a Fancybox.

On version 1.34 you used $.fancybox.showActivity. But that is not an option in version 2.

So I've tried the following:

$.ajax({ 
         url: "exec/preview.php",  
         data: $('#campaignform').serialize(),  
         dataType: "html",
         success: function(data){
            $.fancybox({
                               'content' : data,
                               'type' : 'iframe'
                            });
        }   
});

But I get The requested URL /[object Object] was not found on this server.

I've tried setting type to inline. all it does is act like its submitting the form. This is a PREVIEW before it actually publishes the campaign.

Changing the SUCCESS function to this:

success: function(data){
    $.fancybox(data,{
        'type' : 'iframe'
    });
}

Appends all the returned data in the URL of the iframe.

Any ideas?

Upvotes: 1

Views: 7954

Answers (2)

Zeno Popovici
Zeno Popovici

Reputation: 589

I fiddled around with this and it's tricky because there's no documentation whatsoever for FancyBox2.

I think this (ajax version) should work:

$("#your_form_id").submit(function() {
    $.fancybox({
        padding         : 0,
        autoSize        : true,
        minHeight       : 10,
        fitToView       : false,
        arrows          : false,
        href            : $(this).attr("action"), //Your form must have an action.
        type            : 'ajax',
        ajax            : {
                type    : "GET",
                cache   : false,
                data    : $(this).serializeArray(),
        },
        scrolling       : 'no',
        transitionIn    : 'none',
        transitionOut   : 'none'
    })
    return false;
});

Upvotes: 3

Ricardo Souza
Ricardo Souza

Reputation: 16456

Take a look at this: http://fancybox.net/blog#tip5

Scroll down a bit and you will see the exact same thing you are tring to do in the simple validation example.

Upvotes: 1

Related Questions