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.

Form in a jQuery Dialog Popup

  1. drewbaker
    Member

    Hey Guys,
    I'm trying to load a form in a jQuery UI Dialog box using the follow jQuery code. The problem is the form loads, and you can fill it out, but it seems that on form submission, the page will reload and the data was never submitted.

    jQuery(document).ready(function($) {
    	$('#submit-photo').each(function() {
    		var $link = $(this);
    		var $dialog = $('<div></div>')
    			.load($link.attr('href'))
    			.dialog({
    				autoOpen: false,
    				title: $link.attr('title'),
    				width: 500,
    				height: 300
    			});
    
    		$link.click(function() {
    			$dialog.dialog('open');
    
    			return false;
    		});
    	});
    });

    Which is called using this link:

    <a id="submit-photo" href="<?php bloginfo('url'); ?>/parkpage/hotham/submit-photo" title="Submit Your Mt Hotham Park Photo"><img src="<?php bloginfo('template_directory'); ?>/images/parkpage/camera.png" alt="Upload Photo" width="45" height="50" longdesc="Upload your own photo." /></a>

    The above links to a page "submit-photo", that contains the form.

    You can see it in action by going to the following page. Click on the little camera half way down the page to see the form load in a dialog box.
    http://dev.popmag.com.au/blog/parkpage/hotham

    I'm not sure if it's even possible to use a gravity form in a jQuery UI Dialog box, but it would be awesome if it is possible! Thanks.

    Posted 14 years ago on Sunday May 9, 2010 | Permalink
  2. Any reason you are using jQuery UI Dialog box instead of something like FancyBox? We have a tutorial on how to get Gravity Forms working with FancyBox.

    http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/

    Posted 14 years ago on Sunday May 9, 2010 | Permalink
  3. drewbaker
    Member

    I was just using a jQuery Dialog box because I didn't want to have to load another script. But FancyBox looks pretty sweet, so I think I'll just do that. Thanks very much Carl!

    Posted 14 years ago on Monday May 10, 2010 | Permalink
  4. Hi,

    I need to start looking at the front end of my site. I came upon this thread while looking for a way to put a GForm into a modal dialog. Still coming up to speed on jquery and other javascript stuff..

    I'm curious if this should be possible to do with jquery-ui as the poster asked. Since Wordpress itself includes that plug-in it would seem preferable to use it in apps. I notice GF uses jquery-ui too for configuration. Carl, were you suggesting to look at Fancybox as an example or as a better solution?

    Thanks!

    Posted 12 years ago on Thursday December 8, 2011 | Permalink
  5. Personally, I think FancyBox is a better solution as it was intended to handle a much larger variety of content types. jQuery UI's dialog box seems geared towards smaller amounts of content.

    Posted 12 years ago on Thursday December 8, 2011 | Permalink
  6. I'm also trying to accomplish this with the jquery-ui dialog. Fancybox is great, but I don't want to use it.

    I've tried this, but with no luck yet: http://pastie.org/4373610

    Any ideas?

    Posted 12 years ago on Wednesday August 1, 2012 | Permalink
  7. Frankie, can you post a link to where this is online with your form currently?

    Posted 12 years ago on Wednesday August 1, 2012 | Permalink
  8. Hey Chris, thanks for the reply. Well, I'm working on a local env at the moment, so nothing is accessible.

    I think I found my problem. I've been trying to utilize a jquery-ui button from outside the <form> element. Just styling the GF submit button how I want it will be easier than trying to integrate an external .submit() event.

    Posted 12 years ago on Wednesday August 1, 2012 | Permalink
  9. Sounds like a good approach. Let us know if you need help with that. We will need to see it online though to be able to help you best.

    Posted 12 years ago on Wednesday August 1, 2012 | Permalink