gform_enqueue_scripts injects script into iframe on validation error

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

Hey guys,

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

Thanks,
Jacob

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

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

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