Getting past start on Javascript GF Hooks

Hi! I’m new to GF, but an old hand at software of many kinds, including web development. I’m helping a friend who is an Elite user… I’m a coder, he’s not. No prob.

Except… I am stuck at the starting gate.
My simple goal at this point: to get ANY javascript GF “hook” to fire.
What I’ve done:

  • Read lots of documentation
  • Tried lots of approaches
  • Debugged as far as seemed to make sense (Chrome dev tools, lots of “debugger;” and breakpoints)

Results so far:

  • My code runs. All of the setup seems to run (I get the expected console logs, and no errors)
  • However, none of the hooks EVER triggers.

Simple Questions

  • What am I missing or doing wrong?
  • Any hints on diagnostics? (For example, what’s a good way to verify that GF hooks have been properly set up?)

(FWIW, I am injecting the JavaScript using the GW Custom JavaScript plugin.)
Here’s my current test code:

console.log('setting up test');
debugger;

var formid="#gform_6";   //'#'+ jQuery('#content .entry-content form').attr('id');
var formnum="6";    // formid.replace(/[^0-9]/g,'');

jQuery(document).on('gform_post_render', function(event, form_id, current_page){
debugger;
console.log('saw post_render js');
});

console.log('set up postrender for '+formid);

debugger;
// Two ways...price chg, and every render

jQuery(document).on('gform_price_change_6', function(event, productIds, htmlInput){
debugger;
console.log('saw price change 6 via jQ');
});
gform.addFilter( 'gform_price_change', function(event, productIds, htmlInput){
    debugger;
    console.log('saw price change via addFilter');
});

console.log('A');


jQuery(document).on('gform_post_render_6', function(event, form_id, current_page){
    debugger;
    console.log('saw post render 6 via jQ');
});
gform.addFilter( 'gform_post_render', function(event, form_id, current_page){
    debugger;
    console.log('saw post render via addFilter');

    });
console.log('B');

// how about simple page load? 
jQuery(document).on('gform_page_loaded', function(event, form_id, current_page)           
{
    debugger;
    console.log('saw page loaded via jQ');
});
gform.addFilter( 'gform_page_loaded', function(event, form_id, current_page){
    debugger;
    console.log('saw page loaded via addFilter');
 });

console.log('C');

Hi Pete, let’s start with the basics.

Which JavaScript hook are you actually trying to use in your form?

Also, rather than the plugin you are using, have you tried embedded it in an HTML field in the form, or loading via the theme functions.php? If you let me know which hook you want to try, we can make sure that is working and maybe you will be able to tell why your other approaches are not working. Thank you.

Hi Chris!
I’m trying anything that works :slight_smile: … as you can see from the code I shared, I’m currently working with gform_post_render, gform_price_change, and (a bit out of desperation :wink: ) tried gform_page_loaded as well.

I have tried several plugins. Tried HTML field embedding. Haven’t yet tried theme functions.php (mostly because for stability, that would require managing a custom child theme… which seems silly for such a simple req’t.)

What is very confusing: I know for sure that my setup code is running. You can see the debug breakpoints I have set (“debugger;”) and the console log statements. ALL of the setup ones work just fine. But nothing from any of the hooks ever fire.

Am I misunderstanding something very basic?

  • I thought gform_post_render should fire every time the form is rendered or re-rendered on screen.
  • I thought gform_price_change should fire every time a product price is changed.
  • I don’t really expect gform_page_loaded should fire, since I’m not leaning on Ajax and not using multipage forms.

Shouldn’t at LEAST gform_post_render kick in once?

Hi Chris, (Apologies for the delay. In the RW, my wife had back surgery! :-D)

I have made significant progress, and have reduced the anomaly to a very simple case.

I think I will break this up into separate topics.

To finish the “getting past start” topic, here’s what I’ve learned:

Not sure why some methods work better than others, but:

  • Loading code via the (gravity-recommended) “Code Snippets” plugin works great.
  • Javascript code can be properly loaded either in the , or using pre_render.
  • Debugging in Chrome using javascript “debugger;” calls is nice.

Thanks!