Javascript loading locally but not on server

Question

I have looked at similar threads but have yet to find a solution to this problem.

The website is working perfectly on my local machine (Mac), but I have uploaded a website via FTP (hosted by 1&1) and when I view the site in the browser (latest Chrome/Firefox/Safari) the scripts are not loading for the image slider (AnythingSlider).

View the website

Apologies if this is answered elsewhere.

you haven't created the dom ready event... use defer option in script block... your code will run after all the js files loaded from the server — Dasarp, May 18 '12 at 10:17
I agre with Dasarp, because you paths are ok, i checked and i also ave the error on anythingslider... but when i copy that js source (anythingslider) and paste it ok console the it runs ok and i have anythingslider working, therefor it must be some resource that the js uses and is not loaded yet — neu-rah, May 18 '12 at 10:30

score 4 · Answer 1 · answered May 18 '12 at 10:28

4

Checking your script you have the following error:

Uncaught TypeError: Object [object Object] has no method 'anythingSlider'

You need to remove your second jQuery call:

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

This will prevent jQuery from "restarting", which will prevent you from losing the anythingSlider function.

answered May 18 '12 at 10:28

Curtis

101,612
66
270
352

focus on `window.jQuery ||` part -> this inclusion is not doing any damage because it is first chaking if there is an existing jQuery and including new jQuery only if there is no jQuery -> the main trouble is the include at line 155. – sarveshseri May 18 '12 at 10:36
True, the includes at lines 153 & 155 should be removed instead and `window.jQuery` check is supposed to be safe: http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go – jfrej May 18 '12 at 11:06
Hi guys, thanks for your help. Maybe you could enlighten me as to why, if you view, http://www.spiritdigital.co.uk/CV/index.html again, the two middle buttons of the AnythingSlider navigation take a second to return to their correct position? I have trawled through the margins etc. but no clues, thanks. – Audity May 18 '12 at 13:37

score 3 · Accepted Answer · answered May 18 '12 at 10:27

3

line 155 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

line 20:

<script src="js/libs/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

Don't include jQuery twice. The jquery on line 155 is being included after anythingslider. So it is resetting the jquery object ( It no longer has anythinslider). remove this line 155 jquery and change line 34 like this

<script>    
    $(document).ready(function(){
        $('#slider').anythingSlider();
    });
</script>

answered May 18 '12 at 10:27

sarveshseri

13,738
28
47

I don't think OP needs to change `$(function(){..`. This seems perfectly valid to me. – Curtis May 18 '12 at 10:29
yup `$(function(){}` is kind of a shortcut for `$(document).ready(function(){}` but it sometimes causes trouble... better to be safe then sorry.. – sarveshseri May 18 '12 at 10:33
@Curt could you explain some more specific ? – Dasarp May 18 '12 at 10:33
@SarveshKumarSingh Do you have any reference to that? I use `$(function()` quite heavily so would be interested in knowing some facts regarding this. – Curtis May 18 '12 at 10:34
agree here, don't reload jquery – neu-rah May 18 '12 at 10:38
@Curt I was talking about the cases when you use jQuery with Phonegape etc for Android App development.. from there I have made a habit to use `$(document).ready(function(){}`. – sarveshseri May 18 '12 at 10:46
Thank you for all your help, you guys are awesome. The solution that worked for me was from Sarvesh. – Audity May 18 '12 at 11:09

score 1 · Answer 3 · answered May 18 '12 at 10:46

1

*DUDE! what are you doing with ur scripts and css*
1.i agree with curt.
there are 4 places where you have included jquery and not evenywhere there is a check for existing jquery availability.
2.i have checked all your script files are loading correctly. so the problem isnt of loading the files. with it you are using incorrect urls to load you script. 3.finally you should use $(document).ready() event for anything tht needs to be executed after dom ready

answered May 18 '12 at 10:46

Parv Sharma

12,581
4
48
80

Thanks, yeah I completely agree, the code is a bit of a mess. Thanks for the heads up about dom ready tip. – Audity May 18 '12 at 13:33

score 0 · Answer 4 · edited Jul 16 '12 at 13:39

0

Try this code

<script defer type="text/javascript">
    // DOM Ready
    $(document).ready(function () {
        $('#slider').anythingSlider();
    });
</script>

edited Jul 16 '12 at 13:39

Wouter Dorgelo

11,770
11
62
80

answered May 18 '12 at 10:20

Dasarp

194
1
5

I was about to give this answer. – Ramesh May 18 '12 at 10:22
What does this suppose to do? I haven't seen the **defer** before – Johntor May 18 '12 at 10:23
@Johntor the defer block will execute after all the js code(referred js files) parsed in the page – Dasarp May 18 '12 at 10:28
And so would the OPs current code. This won't fix the problem. Check the console. – Curtis May 18 '12 at 10:33
Thank you! The $(document).ready() is not handling this properly? I never had a problem like this – Johntor May 18 '12 at 10:33
not the problem, it looks like the anythingslider.js needs the defer because you can execute that way before the load and still get the error, however reruning the anythingslider code fixes it – neu-rah May 18 '12 at 10:34

Javascript loading locally but not on server

4 Answers4