Code made for jQuery 1.4 not working in jQuery 1.8.3

[axer17]

I was following Chris’s “Dynamic Page/Replacing Content” guide (https://css-tricks.com/dynamic-page-replacing-content/), and everything was working fine. Then I added jQuery for something else on my site and I had to use version 1.8.3 (the latest one). Chris’s tutorial tells you to use version 1.4 (because the tutorial is from 2010).

Anyway, these couple of code lines in the jQuery (straight from Chris’s tutorial) don’t work:

$(“nav a”).removeClass(“current”);
$(“nav a[href='”+newHash+”‘]”).addClass(“current”);

This code, for some reason, isn’t playing well with jQuery 1.8.3. Was there some sort of language scripting update in jQuery since 1.4 to 1.8.3? I know for a fact that this is the problem. I switched my jQuery link to 1.4 and suddenly this class switching code works perfectly fine, but my other image gallery (for which I need the latest version of jQuery) stops working. So I need to have 1.8.3, but also need to ensure that this class switching code works. I’ve triple-checked with Firebug and this is indeed the problem.

To add to the confusion, the code from the tutorial doesn’t work at all on Chrome. If you’ve read through it, you’ll see that it adds a hashtag at the end of the url, then fades out the current page content, and fades in the destination page content. Works like a charm on Firefox, absolutely nothing on Chrome. But it works totally fine on Chrome on my Android device. Weird, I know. I cleared out my cache and everything, tested locally and on a web server, yet desktop Chrome won’t listen.

But does anyone know anything about the jQuery 1.4 to 1.8.3 problem?
Any help/tips/advice appreciated!
Thanks in advance.

[axer17]

@jamy_za: Thanks! I changed it to .on(), with the correct parameter order, but it still doesn’t fix the problem. The problem that in the navigation, the link corresponding to the page that the user is on does not get the “.current” class added to it (which that line of code which I posted in my original question should do). I noticed that .bind() should also be replaced with .on(). I did that, but still doesn’t work.

What other functions in that jQuery code from that tutorial are outdated since 1.4? Sorry, I’m not very experienced with jQuery. I thought this would be a simple copy+paste but apparently a lot has changed with jQuery versions.

[axer17]

@jamy_za: Thanks so much!! You’re a lifesaver. It works like a charm on Firefox and IE9, exactly the way I want it to. One last quick question: Do you happen to know of any reason why the jQuery won’t run at all on Chrome? I’m running Fancybox2 as well, and Chrome won’t even run that or this page-fade script. Is it a security issue that’s caused by us messing with the url?

These are the scripts I’ve got in my head right now:

First one is simply the jQuery library (calling it without the http so that it works with https). Second and third script are for this page-fade effect. Third and fourth ones are for fancybox2, and the last one just tells it to run the fancybox function once the page loads.

I uploaded the site to an actual server and checked it, and Chrome won’t run any of the jQuery. It doesn’t even do the hashtag url change, it just goes straight to that page as if there was no jQuery/AJAX. Works perfectly fine in Firefox and IE9 though. Chrome just won’t run the jQuery/AJAX. I don’t need a vhost if I’m accessing the site straight from a web server with the actual url, do I? Do you happen to know why Chrome won’t play nice? Thanks again for all your help.

[axer17]

Figured out why Chrome wasn’t running in jQuery. I debugged it in console and it said “Origin Null is not allowed by Access-Control-Allow-Origin” on all the jQuery links in the head tag. Looked it up and this happens because apparently Chrome and Safari (and consequently -webkit-) have tighter security controls than Firefox/IE9 do. They won’t let you link locally via AJAX to other files in the site, even if they’re in the root directory.

The fix to this is to add “–allow-file-access-from-files” to your Chrome target. So, right click on Google Chrome, go to Properties, and paste that at the end of the Target textbox. It will look like this: C:UsersXXX_USERAppDataLocalGoogleChrome Applicationchrome.exe –allow-file-access-from-files.

Now run it locally and it should work. Note: Remove it after you’re done testing locally. It’s less secure with that script running. Apparently, the jQuery will run if the site is actually hosted on a web server. I’ll test it out and hopefully it’ll work fine on Chrome from any computer, not just mine.

[Author]

Posts