How to add JavaScript functionality « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Lea Cohen
Member
I have a javascript file with the following code (for test):
```
$(document).ready(function() {
alert(1);
});
```
I try to include this file in my form, but the alert doesn't show up. I tried enqueuing the file as follows:
```
add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);
function my_gform_enqueue_scripts($form, $is_ajax=true){

wp_enqueue_script("auto-complete", get_bloginfo('template_directory').'/js/form.js', array(), '1',true);

}
```
but that doesn't work. I also tried adding a
<script> tag to the top of my page template (I'm using a special page template for my form):
```
<script src="<?php get_bloginfo('template_directory')?>/js/form.js" type="text/javascript"></script>
```
but that doesn't work either. What am I doing wrong?

The funny thing is that in both cases, the alert doesn't show up on the first time I load the form (the form is loaded via thickbox), but on the following times the alert does work
Posted 12 years ago on Sunday December 11, 2011 | Permalink
Chris Hajer
Key Master

Adding it to the page template should work no matter what, unrelated to Gravity Forms. If it does not work there, there might be a problem with the script. Can you post a link to your page and let us know how you have added the JavaScript code in your example? Is the script actually present in the source of the page when you view it?

The fact that you're loading it in a thickbox might have something to do with it. If you just load it in a page, does it work then?

Posted 12 years ago on Monday December 12, 2011 | Permalink
Lea Cohen
Member

It works fine on the page. when I open the form with thickbox - it doesn't work on the first time, only on subsequent times.

This is a link to the form , and this is a link to the page that opens the form with thickbox: http://dev.linux.ort.org.il/nanotest/blog/category/student-materials/ (you have to click the button on the right that says "Upload your own").

Thank you

Posted 12 years ago on Monday December 12, 2011 | Permalink
Chris Hajer
Key Master

Does your page template include the function call to wp_head()?

Posted 12 years ago on Monday December 12, 2011 | Permalink
Lea Cohen
Member

Yes, it does, as I added it and it fixed the conditional field problem. The direct link to the form is http://dev.linux.ort.org.il/nanotest/?page_id=213&width=790 (the link in my previous post was wrong )

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Lea Cohen
Member

OK, I tried something, and it worked: I moved the call to wp_head() to be before my script tags, and that helped. Now it works when the form is opened in its own page, but not when the it's opened with thickbox.

I saw that wp_head merely adds scripts and links, so I copied those scripts to my page template, and cancelled the call to wp_head. Then I saw that of course both wp_head and I call jQuery, just with different versions. So I removed the call that wp_head brought and only used mine, and now the form opens with thickbox, and my autocomplete runs...

But this seems like a workaround, and not the best way to do things, doesn't it?...

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Chris Hajer
Key Master

If moving your scripts to after the scripts are being included by wp_head, then the order of the scripts is probably wrong and there is an unmet dependency. For example, a script that relies on jQuery is being added before jQuery is included.

Hard-coding them is not the best way to go. You might want to enqueue your scripts so they're included in the proper order by wp_head(). Here is the documentation for using that WordPress function:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Look specifically at $deps or dependencies.

Posted 12 years ago on Tuesday December 13, 2011 | Permalink

Lea Cohen
Member

You're right. I enqueued them as follows:

if (is_page(213)){
             wp_enqueue_style('jQuery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
            wp_enqueue_style('forms', get_bloginfo('template_directory').'/css/forms.css', null, '1.0');
            wp_enqueue_script('jQuery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js','1',true);
            wp_enqueue_script("forms-js", get_bloginfo('template_directory').'/js/forms.js', array('jQuery-ui'), '1',true);

        }

The thing is, that my script - forms.js - includes all kinds of jQuery commands. Only the ones having to do with autocomplete don't work (i.e work only on 2nd load). The others work fine on each load.

Link to the JS file

Link to form

I'd appreciate you help

Posted 12 years ago on Thursday December 15, 2011 | Permalink

David Smith
Member

Hi leac,

The first thing I noticed was that you are loading the form via thickboxes ajax content method. This is where thickbox retrieves the actual content of the requested page and loads it into the thickbox window. This isn't an ideal approach for what you're trying to do because you essentially now have two copies of all the scripts loaded on the page; one copy from the page you're on and one copy from the form page you're loading.

I'd recommend using thickbox's iframe functionality to load the form page in an iframe. Let me know if the issues continue after you've done this.

Posted 12 years ago on Friday December 16, 2011 | Permalink
Lea Cohen
Member
Thank you! That seems to have solved my problem!

It seems, though, that I have a problem with the submission of the post. The post is created, but the user never gets to the thank-you confirmation, and the function that I run on gform_post_submission doesn't do its work. But if I *don't* enqueue the CSS and JS of the jQuery, then the submission works fine - the user gets the thank-you message, and the function runs.
This happens when I use my own page template. However when I switch to the default template, everything works fine.

This is my page template:
```
<?php
 /*
 Template Name: plain page
 */
?>
<!DOCTYPE html>
<html<?php language_attributes(); ?>>
<head charset="<?php bloginfo( 'charset' ); ?>">
  <title>Upload Form</title>

<?php

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
  </head>
<body>

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_content('read more'); ?>
  <?php endwhile; endif; ?>
  <?php wp_footer(); ?>

</body>
</html>
```
Posted 12 years ago on Sunday December 18, 2011 | Permalink
David Smith
Member

Hi leac,

I can't think of anything offhand that would prevent the confirmation or GF hooks from firing. If you send me your FTP info I can take a look: david@rocketgenius.com.

Posted 12 years ago on Monday December 19, 2011 | Permalink
Lea Cohen
Member

I uploaded to our production server, and surprisingly - everything works well... Maybe our dev server was just acting up :) Thank you very much for all your help.

Posted 12 years ago on Tuesday December 20, 2011 | Permalink
David Smith
Member

Awesome. Thanks for posting back. :)

Posted 12 years ago on Tuesday December 20, 2011 | Permalink

This topic has been resolved and has been closed to new replies.