0

I have a link on my page, which calls a login form inside Fancybox. Due to how scoping in the CMS "works", this needs to be called from a different page.

My first idea was to call it with AJAX, but the problem then, was that the page would redirect to the login page on submit, which is not what I want. It should simply refresh the current page.

My second idea then, was to iframe the form in. It's a bit more clumpsy, but seems to do the trick. Upon submit, it only refreshes the view in the iframe, instead of redirecting the user, which is one step forward

However, we still need to refresh the page, so that the content may be updated now that the user is logged in. I've tried binding a function to the .on(click) of the <submit>. I've also tried binding a function to onsubmit on the form itself. I even tried inlining it. Neither seem to do squat.

Should I give up and my dream of being a Javascript developer and fall back on a life of crime, or is there actually a real way to do what I'm trying to do?

I am using Fancybox v1.3 and jQuery v1.7.2.

$('a#myLoginTrigger').fancybox({
    type: 'iframe'      
});


$('form#myForm').on('submit', function(){
    alert('Sweet dude, I can run functions in here!');

    // I assume this will refresh the entire page, not just the iframe
    location.reload();

    // This has no effect whatsoever
    return false; 
});
2
  • 1
    I think the "life of crime" pays better than being a javascript developer. If you are going to bind an event "submit" to the form, it has to be done INSIDE the page that you open via "iframe" and NOT in the (calling) parent page; is this the way you are doing it?
    – JFK
    Commented Aug 24, 2012 at 18:57
  • @JFK I am beginning to suspect that — plus it's more fun! My theory was, that it didn't have to be on the target (iframe) page, as long as I use the .on() event handler. I can't really put it on the target page, as I want to manipulate the parent page (refresh the page). I hope that makes sense. I could possibly make it happen by triggering the .reload() on the onClose event, but that would require me to include jQuery and Fancybox on the page I'm calling so that I could force close it from there, and that whole story would just create unnecessary overhead.
    – Nix
    Commented Aug 24, 2012 at 20:21

2 Answers 2

1

Try this:

$('a#myLoginTrigger').fancybox({
    type: 'iframe',
    onComplete: function() {
        // Activate the form submit handler here
        $('form#myForm').on('submit', function(){
               alert('Sweet dude, I can run functions in here!');
        })
    }
});

The onComplete callback will be fired as soon as the lightbox is fully loaded. Thus, you can activate the form handling in that function.

3
  • What is the difference between running it on onComplete, as supposed to (document).ready()? To make sure the form actually exists in the DOM? Anyway, it doesn't run the function on submit as it should. I wonder why. :/
    – Nix
    Commented Aug 24, 2012 at 15:22
  • Probably because the form is in an iframe. Try loading it with AJAX instead.
    – Helge
    Commented Aug 27, 2012 at 14:40
  • Yeah, but that doesn't work either, as it redirects on submit (see question, 2nd paragraph). However, I eventually made it work by the powers of AJAX .post(). The reason it wouldn't work at first is partly due to an error on my behalf, and partly due to a bug in jQuery 1.7.2. I will post my solution later.
    – Nix
    Commented Aug 28, 2012 at 9:16
0

This is what I ended up doing:

$('a#loginTrigger').fancybox({
    type: 'ajax',
    href: '/Login.aspx #loginContainer'
});

$('body').on('submit', '#forLogin', function(e) {
    e.preventDefault();

    var url = $(this).attr('action');

    $.post(url, $(this).serialize(), function(data) {
        location.reload();
    })
});

First I use AJAX to load the form on the login page. Then, when the user submits the form, I cancel the default action, and AJAX-post it to the original page, and then reload the whole page.

A strange bug I encountered, was that jQuery couldn't figure out how to post it, if the action URL contains a question mark. To begin with, I tried posting to the page with /?ID=42 (the ID of my login page). The CMS can use both ID and the page title to navigate pages. Using the page title (login.aspx) worked fine.

However, this bug was fixed after updating from jQuery 1.7.2 to 1.8.0. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.