CODEWITHSUNDEEP
javascriptreferenceheader
Alan A
Alan A

Reputation: 2551

Javascript html header strange behaviour

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.

Upvotes: 0

Views: 67

Answers (2)

Alan A
Alan A

Reputation: 2551

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>

Upvotes: 0

Kroltan
Kroltan

Reputation: 5156

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.

Upvotes: 2

Related Questions