PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

ajax not working with hidden div method v1.5

  1. Okay I have gotten my form to finally popup in a modal window with fancybox but will not refresh page in modal window. Here's what I got :

    fancybox function written within jquery.fancybox-v1.3.4.js at very bottom

    $(document).ready(function() {
    
    		$("a#cnt").fancybox({
    			'transitionIn'	:	'elastic',
    			'transitionOut'	:	'elastic',
    			'speedIn'		:	600,
    			'speedOut'		:	200,
    			'overlayShow'	:	false
    		});
    
    	});

    Next, I put a hidden div within footer.php of wordpress template directory

    <div id="contact-form" style="display:none"> <?php gravity_form(1, true, true); ?> </div>

    Then I created a post and made a test link to hidden div

    <a href="#gform_wrapper_1" id="cnt">contact</a>

    note that I used #gform_wrapper_1 because this is what is returned to the browser.

    Okay so where did I got wrong ?

    Michael Sablatura

    Posted 13 years ago on Saturday February 5, 2011 | Permalink
  2. So I have almost figured it out ...

    I changed my hidden div code to

    <div id="contact-form" style="display:none"> <?php gravity_form(1, true, true, true, true, true); ?> </div>

    Note the extra values in the array, thank you eclipse.

    After I submit the form it gives me the success message, great. Then I close the fancybox success message. Next, without refreshing the page I click on the same link to test again and it opens my entire home page in a fancybox.

    So, I click link, fancybox opens, enter data in fancybox form, submit, get success message, close fancybox, click link again, my entire homepage opens in a fancybox. What's the problem?

    Posted 13 years ago on Sunday February 6, 2011 | Permalink
  3. Ignore my request in the other thread for a link to your form and please post that here. :)

    Posted 13 years ago on Sunday February 6, 2011 | Permalink
  4. Here is the test site, just click on the contact link of first post.

    http://audiovisualreference.com/test.com/

    Posted 13 years ago on Sunday February 6, 2011 | Permalink
  5. You know, I think it has something to do with my onClosed function in contact-form.js

    jQuery(document).ready(function() {
    
    	jQuery("a#cnt").fancybox({
    		'autoDimensions' : true,
    		'overlayOpacity' : '0.9',
    		'overlayColor' : '#000',
    		'hideOnContentClick' : false,
    		'autoScale' : true,
    		'transitionIn' : 600,
    		'transitionOut' : 400,
    		'scrolling' : 'no',
    		'centerOnScroll' : true,
    		'padding' : 20,
    		'onClosed' : function() {
    			window.location.reload(true);
    			;
    		}
    
    	});
    
    });

    When the window is reloaded after close of success message the url points to :

    http://audiovisualreference.com/test.com/#gform_wrapper_1

    instead of :

    http://audiovisualreference.com/test.com/

    Is this the problem ?

    Posted 13 years ago on Sunday February 6, 2011 | Permalink
  6. Hi Michael, this is what I'm seeing when I click on the link the first time: http://grab.by/8OSi

    I see the same thing when I click on it again. Were you able to resolve the issue with the entire site displaying inside the fancybox and the previous contents showing up?

    Posted 13 years ago on Monday February 7, 2011 | Permalink
  7. Here are the steps that make the entire homepage show up in the fancybox.

    1. Click on contact link.

    2. enter data and click submit.

    3. after submit success message pops up. close success message.

    4. click on contact link again and entire homepage shows up in fancybox.

    Just tried and it's still happening.

    Now if I redirect to another page on a successful completion of the form, then go back to homepage it works. Any thoughts?

    Thanks,

    Michael Sablatura

    Posted 13 years ago on Monday February 7, 2011 | Permalink
  8. firstbasedesign
    Member

    Michael, how did you get your fancybox popup to stay fixed on the page? Mine jumps all round the bloomin page!!!

    http://poie.thinkbigcreative.co.uk/

    (Small link on there 'click for form')

    For example if you click without filling fields, when the error message pops up the modal/form jumps down the page. What the hell?!?!?

    Any thought?

    many thanks

    Posted 13 years ago on Tuesday February 8, 2011 | Permalink
  9. Hi Michael,

    I'm still unable to create the issue where the entire site appears inside the fancybox. What I'm seeing is the fancy box taking up the left half of screen in all browsers (Firefox, Chrome, IE8, Safari). It sounds like there is some sort of configuration error with the way you have set up fancybox and without being able to recreate the reported issue on my end there isn't much advice I can offer.

    Posted 13 years ago on Tuesday February 8, 2011 | Permalink