6

Not sure if this is even possible, but I have a AJAX form like this fiddle:

http://jsfiddle.net/nicorellius/GfeEf/

On my website, it is working fine. I do a simple validation in the form with JavaScript, but if the user gets through the JavaScript, the user is presented with a Campaign Monitor webpage: either saying yay or nay to their validation.

When the user subscribes successfully, if the user clicks back or uses the CM back link, the fancyBox remains with data populated. Based on how I have the script written it should close after submission.

This is Firefox behavior in Linux and Windows. Chrome actually clears the page and removes the fancyBox form.  The AJAX section is here:

$.ajax({
    type       :  "POST",
    cache      :  false,
    url        :  "http://<comapny_name>.createsend.com/a/b/c/abcdef/",
    data       :  $(this).serializeArray(),
    //  I've tried both of these commented out pieces to no avail.
    //beforeSend :  function() {  
                      //$.fancybox.close(true);
                  //},
    //success    :  function(data) {
                      //$.fancybox.close(true);
                  //}
});

So despite adding:

success : function() {
              $.fancybox.close(true);
          }

to the AJAX script, I cannot get it to close after submission.

EDIT

I should note, too, that this phenomenon seems to occur with Firefox, Safari and Opera. Chrome behaves as I would expect (eg, when clicking the back link, I get the fresh page reload). The CM page is using javascript:history.go(-1) to send me back.

nicorellius
  • 3,715
  • 4
  • 48
  • 79

2 Answers2

2

I have no idea about Campaign Monitor but why not force close your fancybox on document load?

$(document).ready(function(){
  $.fancybox.close(true);
}
Ege Akpinar
  • 3,266
  • 1
  • 23
  • 29
  • The problem is when I click the CM link (which uses `javascript:history.go(-1)`) to go back the page doesn't reload, because I'm using a fancyBox AJAX popup. It seems to exist in the same state as when I left it. And since I'm using an HTML page for the content, adding the close function to that closes the fancyBox before it can open. – nicorellius Feb 27 '13 at 00:18
  • history.go(-1) should also reload the page. Can you try attaching to 'complete' callback, rather than success. Or instead of inside your .ajax call, you could possible call .close right after your .ajax call. I presume it would launch your ajax call with fancybox closed – Ege Akpinar Feb 27 '13 at 10:47
2

It looks like you might be wanting the code from the answer to this: How to close fancybox after Ajax Submit?

(Here is the part extracted & modified)

var fancyboxProxy = $.fancybox; //declared before $.ajax

//and then modify your success to:
success : function() {
          fancyboxProxy.close();
      }

I would also try a simple alert() or conosle.log() in your success function to determine you are receiving the success event, if you are receiving the event then you know it is specifically a problem with the code you are using to hide the fancybox.

Community
  • 1
  • 1
rmorse
  • 736
  • 6
  • 18
  • Thanks for the answer. I went ahead and tried what you suggested. As suspected, my success function doesn't seem to be called, as the `alert()` and `console.log()` aren't giving anything. – nicorellius Feb 27 '13 at 00:11
  • are you using firebug to debug your javascript? You should be looking at the console while testing as it may simply be a JS error somewhere that is causing the success event not to fire? – rmorse Feb 27 '13 at 11:13
  • Also try adding an error handler and seeing what the error is coming up - http://jsfiddle.net/YAAJd/1/ - this will fail in jsfiddle with an error because of cross domain policies but apply to your code and let me know the results! – rmorse Feb 27 '13 at 11:27