TYPO3: get a javascript included by “headerData” to load before one included by “includeJS”

Question

I'm loading JQuery into my TYPO3 page by :

page.headerData.10.value = <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

and I'm including my javascript like this :

page.includeJS {
  file20 = fileadmin/templates/myjq.js
} 

Point is, i need the JQuery to be loaded first. but TYPO3 puts it after my script. How do i get it swapped?

Thanks

Answer 1

you don't want to include JQuery that way; Use

page.includeJSlibs.jquery.external = 1
page.includeJSlibs.jquery = //ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

instead.

http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.2/view/1/6/

Edit Using a URL without a specific protocol (http or https) makes sure the inclusion works on both SSL and non-SSL-sites.

Answer 2

Small add-on to Patrick Schriner to include all js-files in one go. It will also make sure selected files are loaded first.

You can add a line (forOnTop) to force your jQuery to be included on top. Else javascript more often seems to be included last to speed up the load of the page. In this example I include several files. Specific for the jQuery is the jQuery[forceOnTop] to ... well, selv explaining I guess.

includeJS {
   1 = fileadmin/templates/website/scripts/javascript.js
   2 = EXT:ogelementslide/res/jquery.easing.1.3.js
   3 = EXT:ogelementslide/res/jquery.easing.compatibility.js
   4 = EXT:ogelementslide/res/jquery.bxSlider.min.js
   jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
   jquery.external = 1
   jquery.forceOnTop = 1
}

Please notice that the numbers 1-4 and jQuery are equivalent. I could have written 5 instead of jQuery. In that case it would have been:

includeJS {
   1 = fileadmin/templates/website/scripts/javascript.js
   2 = EXT:ogelementslide/res/jquery.easing.1.3.js
   3 = EXT:ogelementslide/res/jquery.easing.compatibility.js
   4 = EXT:ogelementslide/res/jquery.bxSlider.min.js
   5 = http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
   5.external = 1
   5.forceOnTop = 1
}

BR. Anders

Answer 3

page.headerData.10 = TEXT    
page.headerData.10.value (
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript" src="fileadmin/templates/myjq.js"></script>
    )

and yes you need round braces here :) Instead of TEXT you can also use HTML.

edit: you can also do it like this

page.headerData.10.value = <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
page.headerData.20.value = <script type="text/javascript" src="fileadmin/templates/myjq.js"></script>