0

I'm trying to embed this code: https://codepen.io/jme11/pen/zMVJVX

into my Wordpress about fitness, but I don't know why it's not working correctly -

I've downloaded the export of the code, which works perfectly in the standalone HTML (+ js and css) file (specifically the completed form will display in the results div.

I've then embedded the HTML in my Wordpress template page - it appears on the front end fine, I've properly linked in the css and js in the same order as in the HTML - and checking them in (View Source shows they are connected)

Completing the form and hitting calculate DOES do something (it shows amounts the protein / fat / carb field) - however, the results div (with calories per day) does not appear.

I think it might have something to do with jquery as I get this error in the console (but don't understand):

Uncaught TypeError: $(...).fadeOut is not a function
at calcDailyCals (script.js?ver=1.0:51)
at HTMLFormElement.<anonymous> (script.js:3)
at HTMLFormElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLFormElement.v.handle (jquery-3.4.1.slim.min.js:2)

Can anyone help? Just not sure why it would work in the standalone HTML file and not on a Wordpress page.

Thanks

Improve this question

2 Answers 2

Reset to default
0

To use jquery in Wordpress you have to use the jQuery function instead of $, this is done to avoid naming conflicts. A good way to return the jquery function to its original $ is to wrap the code inside a block like this:

jQuery(function($) {
    //code here
});
Improve this answer
2
  • Thanks, @Patareco - I've done that but get the same (Uncaught TypeError: $(...).fadeOut is not a function) error. Do you know how I can modify this code to allow it to work, even if it removes the fade and just appears? $('#m-results').fadeOut('fast',function(){ $(this).html('<h3>Estimated Daily Calories: ' + result + '</h3>').fadeIn('fast'); });
    – Mike
    Commented Apr 21, 2020 at 15:38
  • try adding this to the functions.php file of your theme: function theme_enqueue_myscripts() { wp_enqueue_script("jquery"); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_myscripts' );
    – Patareco
    Commented Apr 21, 2020 at 21:49
0

The jquery script added was conflicting with the slim jquery that was also being loaded - by bootstrap footer code.

I replaced the slim jquery in the bootstrap footer includes with the full min jquery and it worked.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.