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.

gform_enqueue_scripts injects script into iframe on validation error

  1. Hey guys,

    I'm sure you're slammed right now with 1.7 upgrade issues. Thanks for taking a minute to help me out. I appreciate it.

    I'm using the gform_enqueue_scripts hook to add a simple script to add html5 placeholder support to a form, which is loosely based on this tutorial: http://www.wpbeginner.com/wp-tutorials/how-to-add-placeholder-text-in-gravity-forms/

    I'm using the ajax submit feature. When I submit a form with errors, it looks like my custom script is injected into the iframe, which then throws an error due to jQuery not being loaded in the iframe.

    Is there a way to prevent my script from loading/enqueueing in the iframe? Or is there a way to load jQuery in the iframe?

    Sorry I don't have a link for you. I'm developing a site locally, but will upload it by end of day PST if I am able.

    Thanks!

    -Jacob

    Posted 5 years ago on Wednesday April 24, 2013 | Permalink
  2. Hey guys,

    Here's a link to the site with the error: http://hc.jacobdubail.com/

    If you submit the form (toward the bottom of the page) without filling in any fields, you'll see that their is a "jQuery is not defined" error in the console. jQuery is defined on the page, but not in the iFrame. How can I prevent my script from being called/enqueued in the iFrame?

    Many thanks,
    Jacob

    Posted 5 years ago on Sunday April 28, 2013 | Permalink
  3. Hey guys,

    Any ideas? Could you point me in the right direction?

    Thanks,
    Jacob

    Posted 5 years ago on Thursday May 9, 2013 | Permalink
  4. Richard Vav
    Administrator

    Hi Jacob,

    I am not sure scripts in the iframe is the problem, I tried using your placeholder function on an ajax form on my localhost install but I could only get it working by changing it like so

    <script>
    jQuery(document).bind('gform_post_render',function(){
        jQuery('#input_11_1').attr('placeholder','Name');
    });
    </script>

    Regards,
    Richard
    --
    Just another member of the community helping out where I can

    Posted 5 years ago on Friday May 10, 2013 | Permalink
  5. Hi richardvav,

    Thanks a lot for your reply. Sorry for my delayed response.

    I updated my script and am now getting the output you recommend. I'm still seeing this script injected into the iframe, though.

    Here's a screenshot from my dev tools in Chrome: http://i.imgur.com/MiJbGrF.png

    I'm still getting a "jQuery is not defined" error.

    Any idea how I can prevent scripts hooked to "gform_enqueue_scripts" from being inserted into the iframe?

    Thanks!

    -Jacob

    Posted 5 years ago on Wednesday May 15, 2013 | Permalink
  6. Richard Vav
    Administrator

    Jacob,

    Can you paste a copy of the full code you are using for this from your functions file?

    Posted 5 years ago on Wednesday May 15, 2013 | Permalink
  7. Sure can. Here you go:

    add_action("gform_field_standard_settings", "jtd_gform_placeholders", 10, 2);
    
    function jtd_gform_placeholders($position, $form_id){
    
      // Create settings on position 25 (right after Field Label)
      if ( $position == 25 ) {
      ?>
    
        <li class="admin_label_setting field_setting" style="display: list-item; ">
          <label for="field_placeholder">Placeholder Text
            <!-- Tooltip to help users understand what this field does -->
            <a href="javascript:void(0);" class="tooltip tooltip_form_field_placeholder" tooltip="<h6>Placeholder</h6>Enter the placeholder/default text for this field.">(?)</a>
          </label>
          <input type="text" id="field_placeholder" class="fieldwidth-3" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">
        </li>
      <?php
      }
    }
    
    /* Now we execute some javascript technicalitites for the field to load correctly */
    
    add_action("gform_editor_js", "jtd_gform_editor_js");
    function jtd_gform_editor_js(){
    ?>
      <script>
        //binding to the load field settings event to initialize the checkbox
        jQuery(document).bind("gform_load_field_settings", function(event, field, form){
          jQuery("#field_placeholder").val(field["placeholder"]);
        });
      </script>
    
    <?php
    }
    
    /* We use jQuery to read the placeholder value and inject it to its field */
    
    add_action('gform_enqueue_scripts',"jtd_gform_enqueue_scripts", 10, 2);
    function jtd_gform_enqueue_scripts( $form, $is_ajax ) {
    
      if ( $is_ajax ) :
    ?>
      <script>
        (function( $ ) {
        <?php
          /* Go through each one of the form fields */
          foreach($form['fields'] as $i=>$field) {
            /* Check if the field has an assigned placeholder */
            if(isset($field['placeholder']) && !empty($field['placeholder'])){
              /* If a placeholder text exists, inject it as a new property to the field using jQuery */
              ?>
              jQuery('#input_<?php echo $form['id']?>_<?php echo $field['id']?>')
                .attr('placeholder',"<?php echo $field['placeholder']?>");
            <?php
            }
          }
        ?>
        })(jQuery);
      </script>
    <?php
      endif; // $is_ajax
    }

    Hopefully that comes through correctly.

    Thanks again for your help!

    -Jacob

    Posted 5 years ago on Thursday May 16, 2013 | Permalink
  8. Richard Vav
    Administrator

    Jacob, I tried your script on my localhost setup using a clean install and the twenty twelve theme and for some reason the script is being printed in both the head and the body so I am getting the "jQuery is not defined" error when the page first loads and the placeholders aren't appearing.

    Anyway if I swap from gform_enqueue_scripts to gform_pre_render and I bind the function to gform_post_render as shown below, the script is only printed in the body and the placeholders now appear and also work if the form is submitted and fails validation due to the field being empty.

    add_filter('gform_pre_render', 'jtd_gform_enqueue_scripts');
    function jtd_gform_enqueue_scripts($form) {
    ?>
      <script>
        jQuery(document).bind('gform_post_render',function(){
        <?php
          /* Go through each one of the form fields */
          foreach($form['fields'] as $i=>$field) {
            /* Check if the field has an assigned placeholder */
            if(isset($field['placeholder']) && !empty($field['placeholder'])){
              /* If a placeholder text exists, inject it as a new property to the field using jQuery */
              ?>
              jQuery('#input_<?php echo $form['id']?>_<?php echo $field['id']?>')
                     .attr('placeholder',"<?php echo $field['placeholder']?>");
            <?php
            }
          }
        ?>
        });
      </script>
    <?php
         return $form;
    }

    However I still get the "jQuery is not defined" error when validation failed so it's not just gform_enqueue_scripts that results in the script being printed in the iframe and i'm at a loss as how to prevent it.

    Posted 5 years ago on Friday May 17, 2013 | Permalink
  9. Thanks richardvav!

    I appreciate your help. I'll give this new hook a try and report back.

    Wondering if any of the core developers can chime in to let us know if this is intended behavior or not.

    Thanks again!
    -Jacob

    Posted 5 years ago on Monday June 3, 2013 | Permalink
  10. Enqueueing initialization scripts is a bit tricky, especially when dealing with AJAX forms. The recommended way of doing it is using the add_init_script() function. This function will make sure the script is printed at the right time and executed when needed. Some scripts need to be executed only once when the page is loaded, and some will need to be executed every time a conditional logic operation takes place, and this function has a parameter that controls that.
    I have modified the sample code from richardvav above to use the add_init_script() function to give you an example.
    http://pastie.org/8031737

    I hope it is helpful and useful to all.

    Posted 5 years ago on Monday June 10, 2013 | Permalink
  11. Richard Vav
    Administrator

    Thanks Alex

    Posted 5 years ago on Tuesday June 11, 2013 | Permalink

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