Solved

jQuery functions not working and not throwing any errors

Posted on 2011-09-02
36
705 Views
Last Modified: 2012-05-12
I'm trying to troubleshoot an issue where I have several jquery functions, like tabs, a slide show, and a mega menu that shows on hover that are not functioning.  I figured for some reason my scripts weren't loading, but they are. And I have an accordion function that is working.  As far as I can tell there are no errors the page either.

The weird thing is that everything was working that last time I looked (last week) and I haven't done anything new.  I've tried clearing my caches thinking that might be the problem.  I'm a bit "flabbergasted" and not sure where to look next.  The site is on a live server, but is under review and in a password protected directory.

Appreciate any insights on where to look for the problem.


Jules
PS
The site is using the CMS Expression Engine.  This shouldn't be an issue for this particular problem, just thought it might be worth noting.
0
Comment
Question by:Jules Webb
  • 15
  • 10
  • 9
  • +1
36 Comments
 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
Well... it's quite difficult to provide any insight without knowing what the code is or what it does.

My personal recommendation is that you try to follow the execution by placing several alert messages on it. Launch your page and see what alerts fires and when they do it.

This way you can shorten your search range until finding the line or lines of code that are failing. Once you know WHERE the problem is, it's easier to realize WHAT is it.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
My suggestion would be:
If you do not have Firefox already, go ahead and install it.  Once you have Firefox, go to the add-ons page:
https://addons.mozilla.org/en-US/firefox/search/?q=Web+Developer&cat=all

and install:
Web Developer
Firebug
HttpFox

Restart Firefox, then open the page in question. On the Web Developer toolbar click "Information > View Javascript".

It will show you all the javascript currently on the page. If for some reason it cannot find a specific file, it will show you some "html source code" with the "404 Page Not Found" error (but you have to look for it in the <title> tags).

The HttpFox will help you see any network traffic between your browser and the server. So if you are working with ajax, this will be extremely helpful.

Regards,
Hielo
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Place the keyword

debugger;

immediately before the code you suspect is not working. That will invoke the debugger (Firebug for FF, Script Debugger for IE).

You can then examine local vars, and step through the code to see it in action.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility


@hielo  --The only add-on I didn't have was the HttpFox.  I double checked my javascript and confirmed that it is loading.


@Badotz  --I tried the debugger; and I got "There are no breakpoints set in this page."


Since there were no errors when I was assembling the pages and all was working well I have to assume that the issues is not related to the code being incorrect.  What other reasons would javascript that previously worked and is definitely loading stop working?  It has to be some sort of conflict....   ( FYI: I load my script at the bottom of the page) .

I did an update to the EE (Expressin Engine CMS) core several weeks back, but that shouldn't effect the script loading on the front end of the website. I build the templates, no code is added automatically to the front end with version updates.  Yet to me this issue really seems like a conflict, maybe in the order that the javascript is loading, or like when 2 copies of jquery loads.  I checked and I don't see any duplicate scripts loading, and I haven't made any changes from the time when it was working.  

... sorry to be so wordy just thinking out loud.

Any other ideas on what I can look for next?

thanks for the help!!
Jules
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Perhaps no debugger is installed?

>>FYI: I load my script at the bottom of the page

Any particular reason? Try moving it into the <head...</head> section.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility

@Badotz

>> Perhaps no debugger is installed?
I'm using Firebug and under "Script" enabled is checked and so are "show break notifications" and  "track throw/catch".  Should there be something eles, am I missing something?


        >>  >>FYI: I load my script at the bottom of the page
>> Any particular reason? Try moving it into the <head...</head> section.

It has always been my understanding that this is "best practices" And I don't want my content loading to be held up while the javascript is loading. The html loads fast and it's down to that javascript in no time at all.  Why do you load in the head?

I did test the script loading in the head and the issue remained.

thanks
jules
0
 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
I'm aware that alert testing is far worst than using a debugger... however, are you even sure your javascript code is being loaded/executed?

Why don't you try to show alerts on the beginning of your javascript code and assure that it's being loaded?

Maybe your environment has changed someway and there are script paths that not works anymore...
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
>>I'm using Firebug

did you put
debugger;

Open in new window

on the line immediately befroe the suspect code?
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
@Bardobrave I added the alert below to the beginning and end of my script and both alerts showed in the browser window.
alert('But wait, there\'s more...');

Open in new window


@ Badotz
>> on the line immediately befroe the suspect code?
yes and it's the only breakpoint
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
So put the keyword
debugger;

Open in new window

in place of the first alert statement.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
@Badotz

I attached an image so you can see what I do
debugger.jpg
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
OK, then that is a breakpoint.

You can examine local vars, step through the code (and watch it not work) or anything else your heart desires.

What more do you want?
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
Does this happen across all browsers?

If you disable the password on the site for just one "test load", does it work?

There are some plugins that are "packed" with both, the jquery library and the plugin code itself. Are you sure you are not ovewriting/re-importing the "core" jquery object definition?

Do you have multiple $(function(){}); or $(document).ready(function(){}); ? If yes, does if work if you call everything from a single instance (as opposed to multiple)?
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
@Badotz - My understanding of javascript is way lower than you are giving me credit for:) I thought it was suppose to stop there because that's where we put the debugger.  If I push play it goes right through with out flagging anything.  I have to assume that I just don't know how to use the tool


@hielo - yes, I've tested it in firefox, chrome, IE8, Opera, and Safari

I went ahead and removed the password on the directory if you'd like to take a look go to: http://light-n-sound.com/
I just don't want search engines indexing the site, but I can leave it off for the night.

EE addons don't add script to the page templates like wordpress addons. I have updated a few addons though so I guess that could be the issue, just can't figure out how.

Appreciate the help!
jules
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Well, then, I guess there is nothing more I can do for you.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
@ Badotz - being able to look at the site is not helpful?
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
For you - yes. For me - not so much.

Look, take charge of your project. It isn't up to me to "fix" it, only help you to do so.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
@Badotz  - "WOW"  I turned to experts exchange for help, a service I pay for.  But you're correct it isn't up to you, and you don't have any obligation to help or "fix" it.  I thought being able to look at the site would be helpful, you certainly can't fix it that way, but you could point out what I'm not seeing  --especially if I'm not using the debugging tools correctly. Javascript is a hole in my skill set that I have yet to conquer.   If my problem is not something you want to mess with no big deal, but you should edit out your negativity before you hit the submit button. "Look, take charge of your project." is TOTALLY uncalled for.

I hope you wake up a happier person tomorrow.

cheers!
jules
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 82

Expert Comment

by:hielo
Comment Utility
Did you install the Web Developer toolbar as suggested? When your page loads, to furthest right of the Web Developer Toolbar you will see an read circular icon with a white "x" whenever there are errors on the page. Click on it and the error window will popup and it will tell you what error are on your page.

ALTERNATIVELY (not yelling, just being emphatic), you can configure the tool to popup automatically whenever there is javascript error. On the Web Developer tool click

Tools > Edit Tools > Miscellaneous > Warnings and Errors
> Open error console when the current page generates a javascript error

Also, note that once the error console is opened (meaning the window popped up), if you do NOT close it and continue to troubleshoot/reload your page, it will keep "refreshing/appending" the latest errors to the end of the window.  I find it easier to clear the errors (without closing the window) in between refreshes.

JulesWebb-Q-27288439.png
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
Error: syntax error

Source File: http://light-n-sound.com/includes/js_jquery-hoverIntent

Line: 11, Column: 27

Source Code:
  cfg = $.extend(cfg, g ?  : f ); 

Open in new window


should be:

  cfg = $.extend(cfg, g ? g  : f );

=======================================
Error: syntax error

Source File: http://light-n-sound.com/includes/js_jquery-mousewheel

Line: 13, Column: 51

Source Code:
d,false);else this.onmousewheel=null}};b.fn.extend(,unmousewheel:function(a)})})(jQuery);

Open in new window


Should be onmousewheel, with an "O", not a "U"
d,false);else this.onmousewheel=null}};b.fn.extend(,onmousewheel:function(a)})})(jQuery);


======================================

As for the last error, you are better of just getting a new copy of that plugin. That error it points to is not a simply typo.  It seems to be missing a "segment" at the beginning.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
actually, even if you change unmousewheel to onmousewheel, it should still trigger an error. extend() expects object arguments.  The closest "fix" I can guess is:
b.fn.extend(,{onmousewheel:function(a)})

but if that does not fix it, I suggest you get a new copy of that plugin as well. It seems like someone has tampered with the ones you currently have.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hey hielo

Thanks for the help!

When your page loads, to furthest right of the Web Developer Toolbar you will see an read circular icon with a white "x" whenever there are errors on the page.
Never could find an icon with a white "x"  --but I was able to follow your instructions to configure the tool to popup automatically whenever there is javascript error.  That was a BIG help, thank you.

I found the discrepancy in the syntax you pointed out, and you're correct the files have somehow been tampered with.  My local copies did not reflect the broken syntax.  I took your advice and updated all three scripts.  And here is my big "BUT"  I can't get the browser to see my new updated copies.  I've cleared the cache in my CMS, and I've cleared  the browser cache.  I've also removed the Filesmatch Header set Cache-Control in my htaccess file, but I can't seem to get the browser to see the updated files.  Do you have any suggestions?

Thanks for the assist!
jules
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hello again

I just added "Hi" to the commented area at the top of js_jquery-hoverIntent.js and it shows up in the browser, but the code isn't the same.  I'm confused, I didn't know that script would render differently in the browser.  Is this a normal thing?  Sorry to be so uneducated in javascript, but I really do appreciate your patience.

first segment of code in browser
(function($);cfg=$.extend(cfg,g?:f);

first segment of code in my file
(function($){$.fn.hoverIntent=function(f,g)

Link to hoverIntent file online that I used
http://cherne.net/brian/resources/jquery.hoverIntent.minified.js

Cheers!
Jules
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
are you sure you are uploading to the correct location?
Currently your page is "importing" from the includes folder:
<script type="text/javascript" src="http://light-n-sound.com/includes/js_jquery-easing"></script>
<script type="text/javascript" src="http://light-n-sound.com/includes/js_jquery-hoverIntent"></script>
<script type="text/javascript" src="http://light-n-sound.com/includes/js_jquery-mousewheel"></script>

<script type="text/javascript" src="http://light-n-sound.com/includes/js_jquery-nivo-slider"></script>

Also notice that none of them are ".js", so if you are uploading a new copy of - say - hoverIntent.js as "hoverIntent.js", then your page will still download the OLD file (the one without the ".js" suffix).
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
are you sure you are uploading to the correct location?

I questioned that as well, which is why I added the "HI" to the hoverIntent to confirm the mapping. When I clicked on the js_jquery-hoverIntent link in your last post I was able to see the file, can you?

Also notice that none of them are ".js", so if you are uploading a new copy of - say - hoverIntent.js as "hoverIntent.js", then your page will still download the OLD file (the one without the ".js" suffix).

This is because I added the javascript as an EE template.  See attached image for view of interface. This shouldn't be part of the issue since scripts have been linked this way from the beginning of the project.
js-jquery-hoverIntent-ExpressonE.jpg
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
>>When I clicked on the js_jquery-hoverIntent link in your last post I was able to see the file, can you?

Yes, I can see the "HI" in the comments

>>Link to hoverIntent file online that I used
>>http://cherne.net/brian/resources/jquery.hoverIntent.minified.js
The version that the server is sending/serving is NOT the same as the one on cherne.net

The one on YOUR servers starts with:
(function($);cfg=$.extend(cfg,g?:f);

Notice that there's something missing after the question mark.

the one on cherne.net starts with:
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);

the stuff highlighted is missing on YOUR version of the file.

I am not familiar with EE, so can't help you there.  For testing purposes, instead of linking/using the EE, why don't you do it directly. Meaning, upload your own copy of  hoverIntent.js and link to it as:

<script type="text/javascript" src="/includes/hoverIntent.js"></script>
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
After reading your last comment it definitely seems like this is an EE issue.  After doing some searching on their forum I found that this is their issue and a fix is in the works.  For now I'm taking your advice and linking directly to the js files.  

....And of course I have a "But" ---I'm still getting an error in the jquery file at line 16.  I'm grabbing the minified version from google cdn so I don't understand what the issue could be.  Could you please take another look?

thanks for all your help!
Jules
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
Instead of importing from google, go to:
http://docs.jquery.com/Downloading_jQuery

and download your own local copy. Then upload it to your server.
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
OK so I've updated the jQuery library to v1.6.2 and linked to it locally.  But it's still throwing an error at 16.

This just doesn't seem right. I came to Experts Exchange because I thought the problem was related to the javascript, but if it's still looking like that's not the case I can post the issue to the EE forum.

a bit dazzzzed and confused! LOL
jules

0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
hmmm...no DOCTYPE in your page. Cute text file, though - says you're using HTML5. Are you sure your browser is?

hmmm...HTML validation errors here

hmmm...CSS validation errors here
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Reading "minified" code is a royal p.i.t.a., but this throws an error - and points to "b" -  in IE8 but not in FF6:

finally{b=[e,f],c=0}

Might be time to post on the jQuery forum and ask for help there?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
Comment Utility
>>OK so I've updated the jQuery library to v1.6.2 and linked to it locally.  But it's still throwing an error at 16.
Typically, when this happens you want to use the non-minified source so that you know exactly which line is causing the error and then debug it OR (if you are not a developer), specify which file and line on the non-minified version is giving problems and whatever other details you can provide.  The latter approach saves time to those willing to help.

On another note, it wouldn't be the first time that a js library has bugs.  In the future, when you uncover a potential bug in a library, you may want to start from an older function and work your way up.  Like you, I did see the error in the 1.6.2 version, so I immediately tried 1.3.1 and that version did not throw any errors (I did not tried any more versions though.  I found only two problems in 1.6.2.  Use the attached version).

Then there was an error in the jqueryTools library. Try the attached files.  For now work with the jquery as is in case there are more errors. That way it will indicate exactly where the problem is. Once you complete your project, then go back an minify it.

Regards,
Hielo
jquery-1.6.2.js
jquery.tools.1.2.5-all.min.js
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hey Hielo

Your files solved the issue, thank you.  And thanks for the added education on bringing up the error console and better practices troubleshooting the javascript.

Not to be nosy, just curious, but when you find errors like this in major libraries do you communicate your findings to them?

I'm still having some problems with one of the slideshows and some form validation not working correctly, but I think I can work it out.  If not, I'll be back :-)


Thank you so much for your help, time and PATIENCE!

jules
0
 
LVL 2

Author Closing Comment

by:Jules Webb
Comment Utility
Thank YOU!
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
>>but when you find errors like this in major libraries do you communicate your findings to them?
Yes - for the benefit of everyone.

Regards,
Hielo
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
I like that :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now