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.

How to get Ajax to work, when embedding direct into template file

  1. firstbasedesign
    Member

    Hi Guys,

    Can't seem to get the Ajax to fire when I use the form directly in (ie; contact.php) a template file, all good when I insert into post/page via WP??

    thanks

    Marc

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  2. To clarify, you're adding the ajax parameter to your function call properly, but it's not working?

    <?php gravity_form(1, false, false, false, '', true); ?>

    More info on the function call parameters is here if that's not the case.

    http://forum.gravityhelp.com/topic/how-do-i-send-dynamic-values-with-the-gravity_form-function#post-10887

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  3. firstbasedesign
    Member

    Hi,

    This is the code I have at present in my homepage template file ...

    <?php gravity_form(2,false,false,false,null,true); ?>

    thanks.

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  4. What version of Gravity Forms are you using? The issue is going to be the necessary JS isn't getting called on the page. Whenever you use the function call to display a form you have to manually enqueue the necessary JS and CSS because the function call cannot do that because it fires too late in the page execution process. This is why the shortcode works, it is able to enqueue the necessary javascript.

    The version of Gravity Forms you are running helps determine the best way to enqueue these scripts as 1.5 has a helper function that makes it easier.

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  5. firstbasedesign
    Member

    Hi,

    I'm running the latest version (I think) downloaded from the site a couple of days ago.

    thanks

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  6. There are 2 versions available for download on this site. The 1.4.5 public release and the 1.5 development release. You can find out what version you are running by going to Settings under Forms in your WordPress dashboard or by going to the Plugins list page and seeing what version is activated.

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  7. firstbasedesign
    Member

    I will go ahead and download the 1.5 dev release.

    Then what will I be needing to do to get the Ajax to fire (as mentioned above)?

    thanks in advance.

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  8. Once you install Gravity Forms v1.5 the function you would use to enqueue the proper scripts looks like this:

    gravity_form_enqueue_scripts(id,true/false);

    You would replace the ID with the ID of the form you want to enqueue scripts for and you would use TRUE if you are using AJAX and FALSE if you are not. So for example if your form id was 1 and you wanted to use AJAX it would look like this:

    gravity_form_enqueue_scripts(1,true);

    If placing this function call in your themes template file doesn't work you may have to place it in your functions.php file. I'm not sure if the theme template file is able to enqueue or if it is executed too late in the process to do so.

    Please note this function is only in the latest Gravity Forms 1.5 development release and doesn't work with older versions.

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  9. firstbasedesign
    Member

    Will give it a go, and report back for future users!

    Posted 9 years ago on Friday February 4, 2011 | Permalink
  10. One thing to note, make sure you put gravity_form_enqueue_scripts(1,true); above wp_head();

    I imagine you are hiding a div within your template and calling it with something like a fancybox ? I used this in my footer.php file :

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

    This is how I link to this div

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

    used this for my fancybox script :

    // function for contact-form
    
    	$(document).ready(function() {
    
    		$("a#cnt").fancybox({
    			'transitionIn'		: 'none',
    			'transitionOut'		: 'none'
    
    		});
    
    	});

    I then edited the style of the form a bit with css

    #gform_1 {
    	font-size:150%;
    	width:100%;
    	height:100%;
    }

    after submitting the form successfully the thank you window pops up and I close the fancybox. Next, I tried the link again without refreshing the page and my entire home page showed up in the fancybox. The form works again after a page refresh, but my data that I already imputted in the first form submission remains in the fields. I guess I have two questions:

    1. How do I get my form to open multiple times after multiple submissions without having to refresh the page? Remember the second time my entire home page shows up in a fancybox.

    2. How do I get the data from first submission to clear out of the form on the 2nd form submission ?

    Thanks in advance,

    Michael Sablatura

    Posted 9 years ago on Sunday February 6, 2011 | Permalink
  11. Hi Michael, Can you share a link to your form?

    Posted 9 years ago on Sunday February 6, 2011 | Permalink
  12. firstbasedesign
    Member

    Thanks for the advice Michael, but it still doesn't seem to be working??? You can find it here ... http://www.poie.thinkbigcreative.co.uk/ It is the main content area, about half way down (ignore the wonky styling).

    Still seems as though the ajax is not firing, no spinner icon, no thank you message etc..

    :(

    Posted 9 years ago on Monday February 7, 2011 | Permalink
  13. Hi Firstbasedesign, I just checked out your form and I'm seeing two spinner icons and the confirmation message. In order to allow the form to be submitted multiple times, you could try saving the original form on page load to a javascript variable and then bind a function to the fancybox close event that replace the submitted form with the original form. There might be a better way, but that is an idea.

    This customization is outside the scope of standard support, but if you need a hand please feel free to send an email to us via our contact form and we can refer a developer to assist you.

    Posted 9 years ago on Tuesday February 8, 2011 | Permalink
  14. firstbasedesign
    Member

    Hi David,

    I basically dont want those two spinning icons, and are completely puzzled to why it is happening?!?! And my modal window jumps around when you submit the form??

    Really stumped, and frustrated in equal measures.

    thanks

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