Question

Here is my code inside of a jquery function:

$("form").submit(function() {


    if(form.First_Name.value == ""){
        alert("Please fill in your First Name.");
        form.First_Name.focus();
        return false;
    }
    if(form.Last_Name.value == ""){
        alert("Please fill in your Last Name.");
        form.Last_Name.focus();
        return false;
    }
    if(form.Customer_eMail952.value == ""){
        alert("Please fill in your Email.");
        form.Customer_eMail952.focus();
        return false;
    }else{
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(form.Customer_eMail952.value)) {
            alert("Invalid Email");
            form.Customer_eMail952.focus();
            return false;
        }
    }
    var submittedURL = 'http://www.google.com';
    $.fancybox.open({'href': submittedURL, 'type': 'iframe'});
});

The function will run without any errors, but when the iframe is shown it doesn’t display anything inside of it. Using FireBug It will show the correct href:

<iframe class="fancybox-iframe" scrolling="auto" frameborder="0" src="http://www.google.com" hspace="0" name="fancybox-frame1331232022953">

I am using fancybox 2.0, and fancybox is already open while this function is being called. It is being called after a form validation.

Why doesn’t the Iframe load? The What am I doing wrong?

Answer 1

I found a solution, I couldn’t get fancybox to work so I jquery’d it.

I replaced this code:

var submittedURL = 'http://www.google.com';
$.fancybox.open({'href': submittedURL, 'type': 'iframe'});

with this code:

$(".fancybox-inner").empty();
$(".fancybox-inner").append('<iframe src="'+submittedURL+'" class="fancybox-iframe" scrolling="auto" frameborder="0" hspace="0" />');
$.fancybox.update();

I realize this is a lame hack, but it works.