Javascript html header strange behaviour

Question

Consider the following html head javacsript and css referecnes:

<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">

<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>

<script type="text/javascript" src="/js/fadeslideshow.js"></script>

<script>
$(function(){
     $('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});

     $("#anim").change(function(){
          $("#datepicker").datepicker("option","showAnim",$(this).val());
     }); 

});
</script>

The above datepicker does not work, but this does:

<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">

<script type="text/javascript" src="/js/fadeslideshow.js"></script>

<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>   

<script>
$(function(){
     $('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});

     $("#anim").change(function(){
          $("#datepicker").datepicker("option","showAnim",$(this).val());
     }); 

});
</script>

So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.

Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?

Thanks,

Alan.

fadeslideshow.js must have a dependency on jquery...that throws an error and your javascript blows up. — Nick
– Nick, Commented Jan 20, 2014 at 19:06
fadeslideshow.js is an external library which i picked up from dynamic drive. I would expect that as long as jquery, and jquery-ui were above any other references all should work? — Alan A
– Alan A, Commented Jan 20, 2014 at 19:10
This is impossible to answer without knowing exactly what fadeslideshow.js contains, or at least what the error is. Did you open the console and check for errors ? — adeneo
– adeneo, Commented Jan 20, 2014 at 19:14
I fixed it by dding a reference to an old version of jquery - 1.3.2-min.js. Is it possible that fadeslideshow.js would require an old version and not be compatiable with version 1.9.1? — Alan A
– Alan A, Commented Jan 20, 2014 at 19:19

Kroltan · Accepted Answer · 2014-01-20 19:06:17Z

2

Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.

answered Jan 20, 2014 at 19:06

Kroltan

5,1565 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan A Over a year ago

fadeslideshow.js doesn't depend on jquery-ui, only datepicker.js in my exaple does

Alan A · Accepted Answer · 2014-01-20 19:25:40Z

0

Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

answered Jan 20, 2014 at 19:25

Alan A

2,5516 gold badges34 silver badges55 bronze badges

Collectives™ on Stack Overflow

Javascript html header strange behaviour

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related