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 add JavaScript functionality

  1. 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 8 years ago on Sunday December 11, 2011 | Permalink
  2. 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 8 years ago on Monday December 12, 2011 | Permalink
  3. 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 8 years ago on Monday December 12, 2011 | Permalink
  4. Does your page template include the function call to wp_head()?

    Posted 8 years ago on Monday December 12, 2011 | Permalink
  5. 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 8 years ago on Tuesday December 13, 2011 | Permalink
  6. 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 8 years ago on Tuesday December 13, 2011 | Permalink
  7. 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 8 years ago on Tuesday December 13, 2011 | Permalink
  8. 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 8 years ago on Thursday December 15, 2011 | Permalink
  9. 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 8 years ago on Friday December 16, 2011 | Permalink
  10. 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 8 years ago on Sunday December 18, 2011 | Permalink
  11. 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 8 years ago on Monday December 19, 2011 | Permalink
  12. 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 8 years ago on Tuesday December 20, 2011 | Permalink
  13. Awesome. Thanks for posting back. :)

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

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