Javascript/jQuery Loading in but not executing on custom Theme

Howdy!

First thing I noticed was that you are using $() at the beginning of your custom script. WordPress uses the noConflict way as to not break other things. This is what came to mind shortly after: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

You’d use:

jQuery.noConflict();
 
(function( $ ) {
    // Your jQuery code here, using the $
})( jQuery );

There have been a few others who have posted similar things as well. Let us know if that helps!

Unfortunately that didn’t help ?? It still is not executing the scripts, I saw the similar posts but none of those helped, I was attempting to do:

jQuery(document).ready(function ($) {});

but that didn’t seem to work either

When I go to your site and look in the console I see 11 errors all of them 404 errors and all of them are for loading fonts.

custom.js?ver=5.4:35 Uncaught TypeError: $(...).superslides is not a function
    at custom.js?ver=5.4:35
    at custom.js?ver=5.4:220
(anonymous) @ custom.js?ver=5.4:35
(anonymous) @ custom.js?ver=5.4:220
3(index):453 GET https://ec2-3-10-217-166.eu-west-2.compute.amazonaws.com/wp-content/themes/greenshop/assets/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)
3(index):1 GET https://ec2-3-10-217-166.eu-west-2.compute.amazonaws.com/wp-content/themes/greenshop/assets/webfonts/fa-solid-900.woff net::ERR_ABORTED 404 (Not Found)
(index):453 GET https://ec2-3-10-217-166.eu-west-2.compute.amazonaws.com/wp-content/themes/images/ins-bg.jpg 404 (Not Found)
3(index):1 GET https://ec2-3-10-217-166.eu-west-2.compute.amazonaws.com/wp-content/themes/greenshop/assets/webfonts/fa-solid-900.ttf net::ERR_ABORTED 404 (Not Found)

Hello, yes I reinstalled wordpress to see if that would help, I have not moved over my font files, this helps with the missing font awesome icons on my site but no change to the missing javascript unfortunately… same with the re-install, no change.

any other 404 errors are for a specific group of photos that I haven’t updated their location in the HTML but while I dont think it has any effect on the javascript I’m willing to try literally anything at this point because I’m at a total loss…

What happens if you try to load up just one JS file with a simple line of code?

Don’t think I’ve encountered this in a long time lol

Alright so I created the following scripts to run tests:

alert("Javascript Test");

AND

jQuery.noConflict();

(function( $ ) {
$.extend({ alert: function (message, title) {
    $("<div></div>").dialog( {
      buttons: { "Ok": function () { $(this).dialog("close"); } },
      close: function (event, ui) { $(this).remove(); },
      resizable: false,
      title: title,
      modal: true
    }).text(message);
  }
  })
})(jQuery);

*did these in separate documents and enqueued them separately

The Javascript one worked like a charm so it would seem whatever the problem is, its exclusive to the jQuery, I also tried changing out the $ for jQuery with no luck

Now most of my jQuery stuff came from external sources so I’m not 100% sure I coded that alert test correctly so let me know if that could be the problem as well, but all of my other jQuery code other than small snippits here and there is from github sources, such as the news ticker. I think I’ll try to see what I can do about simplifying the code and turning it into javascript instead since it seems jQuery is the issue here.

• This reply was modified 4 years, 7 months ago by pastelintel.
• This reply was modified 4 years, 7 months ago by pastelintel.

Oh that _is_ super interesting :thinking_face:

Wonder what would happen if you use:

jQuery(document).ready(function($){
  console.log('we are here');
  var node1 = $('body');
  console.log('the body tag', node1);
});

I do feel like I’ve had to do something similar or seen something similar but it has been a few years for me ??

the problems in your functions.php file. You enqueued all your functions using

get_stylesheet_directory_uri() you should have used get_template_directory_uri() for all your scripts

• This reply was modified 4 years, 7 months ago by mrtom414.

TL;DR: I sort of solved my own problem, DEPENDENCIES, if you’re having problems try removing them cause they may not be need

Hello,

@mrtom414, unfortunately I have tried every get_x_directory_uri in the book, tried stylesheet, scripts, template, etc. Currently it is set to template (I updated it after posting the question) and the jquery is still not functional so that’s not the issue either.

The scripts are all properly enqueued or none of them would be working, including the javascript. They also would not be visible at the bottom of the auto-generated html

@jcastaneda I decided just to replace all of it with javascript instead of jQuery, but when I tried this it didn’t work at first, so just out of curiosity I removed my dependencies all together and what do you know, it worked!

so because I already replaced the super obvious parts of my jQuery with the javascript I cant 100% tell if it has fixed the problem but my sticky header is now working again ?? so I’d say it probably is fixed

That’s awesome news!

Glad you were able to solve that riddle ??