JavaScript Error preventing Gravity Form function

[Pete Ciliberto]

I have built a contact page on my website using Gravity Forms. When trying to submit a completed form at re-inspect.com/quote (clicking the GET Price Quote button), nothing happens. When the button is clicked, the circle at the top of the pages spins indefinitely. The form is not pushed out and we do not receive the form via email.

I have downloaded the GF Debug Add-on and it appears that the conflict is with the theme and not another plug-in. When all plug-ins are deactivated, and the theme is active, the contact page works flawlessly. I asked tech support at Gravity Forms for their help and this is the response I received:

I am attaching screen shots of what I found using the Chrome developers tools:

How do I go about resolving this issue with the theme?

Here are the versions in use:

Celestial Theme Version
1.1

Gravity Forms Version
1.9.15

WordPress Version
4.4.1
CaptureofJavaScriptError.jpg
CaptureofJavaScriptError2.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi there,

If that file is making problem on submitting form, then you can try this followiing steps:

1> There in st-bootstrap.js you have used .tooltip() and .popover() which is bootstrap plugin. So you need to load bootstrap.min.js of bootstrap before that file: @SEE Bootstrap javascript

wp_enqueue_script('celestial-bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '2.2.2', true);

Then only you need to enqueue st-bootstrap.js file providing jquery and celestial-bootstrap-js as dependency:
@SEE How to use wp_enqueue_script() functions?

wp_enqueue_script('celestial-bootstrap-st', get_template_directory_uri() . '/js/celestial-bootstrap-st.js', array('jquery','celestial-bootstrap-js' ), '2.2.2', true); 

let us know how it will goes.

Thanks

[Pete Ciliberto]

Thanks for the response. I am not proficient in HTML code. Can you show me where I need to load of bootstrap before that file? And also where I need to load file providing jquery and celestial-bootstrap-js as dependency?

I can access my File Manager and use the text editor to modify and save the code. However, I am not certain of precisely where to enter the code you have provided.

I have located the file and here is the code found in that file the the Google developer tools is saying there is an error:

// lets add some bootstrap styling to WordPress elements

jQuery(function($){
$( ‘table’ ).addClass( ‘table’ );
$( ‘#submit’ ).addClass( ‘btn btn-primary btn-small’ );
$( ‘#wp-calendar’ ).addClass( ‘table table-striped table-bordered’ );

// Bootstrap plugins
$( ‘#content [rel=”tooltip”]’ ).tooltip();
$( ‘#content [rel=”popover”]’ ).popover();
$( ‘.alert’ ).alert();
$( ‘.carousel-inner figure:first-child’ ).addClass( ‘active’ );
$( ‘.carousel’ ).carousel();

Is this the file where I am adding the lines of code indicated by you. If so, can you show me exactly where to enter them by modifying the code above?

Thanks.

[Sushil Adhikari]

Hi there,

First activate child theme and Go to sitefolder->wp-content->themes->celestial_child->Functions.php . Then add this following code on functions.php templates.

/**
 * Dequeue the jQuery UI script.
 *
 * Hooked to the wp_print_scripts action, with a late priority (100),
 * so that it is after the script was enqueued.
 */

function celestial_child_dequeue_script() {

  wp_dequeue_script( 'celestial-bootstrap-st' );
  
}
add_action( 'wp_enqueue_scripts', 'celestial_child_dequeue_script', 100);

/**
 * Proper way to enqueue scripts and styles
 */
function celestial_child_enqueue_scripts() {
	wp_enqueue_script('celestial-bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '2.2.2', true);
	wp_enqueue_script('celestial-bootstrap-st', get_template_directory_uri() . '/js/celestial-bootstrap-st.js', array('jquery','celestial-bootstrap-js' ), '2.2.2', true);
}

add_action( 'wp_enqueue_scripts', 'celestial_child_enqueue_scripts',999 );

Note: You can see this tutorial for reference How to use child theme?. and we are emphasizing to use child theme so your changes will not lost on theme update.

Thanks

[Pete Ciliberto]

When I attempted to make that change, I did not find the Functions.php in the celestial_child folder. I did find it in the main Celestial theme sitefolder so i made the change their to see if if would work (I know that I shouldn’t make the change in the main folder). I have attached a screen shot of the celestial_child folder. When I added the revised script to the Functions.php, the same issue is present. Please help.

childtheme.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi there,

Please use child theme that comes along with theme bundle, that is zipped file which comes when you download from celestial download link

It seems you had made many changes on themes name and its folder. So you need to keep this things on mind:
1> When you update your theme to the latest version, all the custom changes will lost.
2> After you installed child theme on your site, Functions.php file will be present on theme bundle itself,. As you have made changes theme name, be sure to change template attributes of child theme style,css file to st_celestial

Child theme that had created doesn’t seems to be build as per the wordpress.org standared , please @SEE https://codex.wordpress.org/Child_Themes

Let us know how it will goes.

Thanks

[Author]

Posts