Gravity Forms Enhanced User Interface Not Working In Popup

May 13, 2019

Gravity Forms Enhanced User Interface Not Working In Popup


This post was originally created on our sister site WP Cover.
View Original Article
May 13, 2019

Today we’re going to tackle an issue that, in all honesty, took me a bit of time to uncover in a recent project I was involved in. Gravity Forms uses the jQuery UI library to deliver an enhanced user interface for some of their fields. In most cases, this works right out of the box without any further adjustments but in the case of a form being loaded in a popup which doesn’t initiate until after the page load, it can cause issues.

In this particular case, the client wanted a multi-select enhanced user interface where the form was opened in a popup when the user clicked a button. While the research and searching took some time, the solution was very simple. I just needed to recall the jQuery Chosen library after the Gravity Form field became visible. To accomplish, I created a new javascript file in my theme called gform-contact.js. I then enqueued that file in my themes functions.php like so:

wp_enqueue_script( 'contact-validation', get_template_directory_uri() . '/assets/js/gform-contact.js', array( 'gform_gravityforms', 'gform_chosen' ), '1.85', true );

Notice that I set the dependencies of gravity forms and gravity forms chosen script to avoid errors.

Within this gform-contact.js file, I added the following:

jQuery(document).ready(function(jQuery) {
	jQuery("#input_36_30").chosen({no_results_text: "No results found"});
});

You can copy and paste the above and simply change out the target input ID to the field that uses the enhanced interface. In my case, it was in form 36 and field 30.

Save the file and you’re good to go. The chosen library will be called when the input ID becomes visible, thus re-initiating the enhanced interface on that field.

The post Gravity Forms Enhanced User Interface Not Working In Popup appeared first on WP Cover.

Additional News

Perfect!

Let's get started. Fill out the form below to email us or request a call back.


FREE: 10 Step Guide To Choosing A Web Design Company

FREE: 10 Step Guide To Choosing A Web Design Company

Download your free e-book. Learn the questions you should be asking prior to partnering with a web design company. Enter your email address and we'll send it to you right away!

We've sent the e-book to your email address!