Changing order of javascripts on load

Question

I have written my own template and some part of the content is as the following:

<?php
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add Stylesheets
JHtmlBootstrap::loadCss();
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);

?>
    <jdoc:include type="head" /> 

For a specific file I need to load two javascript files which need jQuery.

$document = JFactory::getDocument();
$document->addScript('js/jquery.uitablefilter.js');
$document->addScript('js/filterTable.js');

Eventhough they are loaded before jQuery. there many questions about this problem and many answers as well but it stills loads javascripts before jQuery.

I do not know what the reason is and how to overcome.

Answer 1

You have to (pre)-load the frameworks and your own JavaScript files in the right order in your extensions. The template is too late and nothing is loaded by default.

Example for a module's tmpl file:

JHtml::_('bootstrap.framework'); // alternative only JQuery JHtml::_('jquery.framework');

JHtml::script('mod_yourmodule/yourmodule.js', false, true, false, false, false);

$document = JFactory::getDocument();
$document->addScriptDeclaration('
    jQuery( document ).ready(function(){
        alert(\'I am an alert box!\');
    });
');

Answer 2

Have you considered trying the following?

<jdoc:include type="head" />
<script src="js/jquery.uitablefilter.js" />
<script src="js/filterTable.js" />