JQuery not working?

Support
,
1

Hey Guys,

So I’m building a bakery website for fun and practice but I keep running into the error of my Jquery not working.

Website: https://itsumo-bakery.netlify.app/

The build always says successful and without errors

1:11:41 AM: Creating deploy upload records

1:11:42 AM: Starting post processing
1:11:42 AM: Post processing - HTML
1:11:42 AM: Post processing - header rules
1:11:42 AM: Post processing - redirect rules
1:11:42 AM: Post processing done
1:11:42 AM: Site is live :sparkles:

I’ve tried using the jquery CDN (currently on) and I also have the jquery library downloaded and saved under /js/jquery.js but non seem to work. The script currently will simply do an animation for the mobile hamburger menu but I would like to add more later on in the build but would like to fix the issue before proceeding.

image

Ideally, I’d like to have the scripts on my footer but whenever I add it there It doesn’t seem to read it. So I added it in the in the meantime and it reads, but doesn’t seem to fire.

The site works well on my live server (using VS code + live server plugging).

Things to note: I’m using another script file with vanilla javascript so I can build out the nav and footer once and pull it on other pages instead of copying the same HTML every time, located under js/includes.js. (I would like to use other options like .asp #include function but I am unsure how). If anyone knows of an easier solution that doesn’t really require PHP, or server-side. or if netlifty can support it. Do let me know.

I do not believe this other script (js/includes.js) is causing the issue as when I try to add the jquery script in the footer.html and pull it, it doesn’t work in the Live server. So I keep it locally in the index.

thanks ya’ll

2

Hi @J-kun,

I’m not seeing the problem you mentioned on your website anymore. Have you managed to fix it?

3

@J-kun Your site seems to be loading for me, but I’m seeing something different than what you’re describing.

For example, you show that you are loading jQuery from a local source, but on your site you are loading it from the CDN.

Also – and this is off-topic – your method of including page content via includes.js is inferior to the jQuery .load() feature, both in terms of SEO and valid HTML. If you’re loading jQuery anyway, it would have to be a special case to use a vanilla JS AJAX solution such as this when you have jQuery .load() “built in.”

1 Like
4

Hey @hrishikesh,
no, I haven’t fixed it.

image
image1514×612 258 KB

When clicking the hamburger on mobile it should animate and turn to an “X” and change back to normal when clicked again but it’s not working

5

@gregraven,

The site loads good and all, It’s just the “on click” for the hamburger, or rather, JQuery in itself that’s not working for me. As mentioned in the post, I have tried using both the CDN and the local JQuery library that I have downloaded. Currently the CDN is in the website but no work. If you copy/paste the script on the console and click the hamburger, you’ll see it working fine but it doesn’t work on page load as it should be.

image
image1514×612 258 KB

6

@J-kun If jQuery is loading but your code isn’t doing what you expect, that’s a coding problem, not a problem with Netlify. We’re not able to help troubleshoot any problem on any site hosted on Netlify, only those that arise due to the use or operation of Netlify. Sorry.

7

@gregraven

So I managed to make it work. A friend helped out and we put an event listener.

    function menuanim(){
        if($(".menu-cont").hasClass("menu-active")){
            $(".menu-cont").removeClass("menu-active");
            $(".menu-cont").addClass("menu-inactive");
        }
        else{
            $(".menu-cont").removeClass("menu-inactive");
            $(".menu-cont").addClass("menu-active");
        }
    }

image
image1543×800 294 KB

I also added the script/jquery on the footer and it’s working but not showing on the site, as seen in the image above. Not complaining but just curious if anyone knows why this happens and if it’s common.

Thanks for the assistance all,

1 Like
8

It’s there. You may not be seeing it because of browser caching, but it’s there.

1 Like