external javascript file in component frontend view in joomla 3.x

Question

I am developing a custom component for Joomla 3.x. I added an external JavaScript file to one of my components front-end views called "pages" located in \com_mycomponent\views\pages\view.html.php within the function display(). I am using this code in this function:

$document = JFactory::getDocument();
$document->addScript(JURI::root().'media/com_mycomponent/js/gallery.js');

When I check with firebug I see the file has been loaded but the problem is with the ordering. As you see below it comes before jquery.min.js. I also tried to add this file in \com_mycomponent\views\pages\tmpl\default.php using the same code, but the same problem happened. This is what I get from firebug.

<script type="text/javascript" src="http://localhost/tester3/media/com_mycomponent/js/gallery.js">
<script type="text/javascript" src="/tester3/media/jui/js/jquery.min.js">
<script type="text/javascript" src="/tester3/media/jui/js/jquery-noconflict.js">
<script type="text/javascript" src="/tester3/media/jui/js/jquery-migrate.min.js">

I appreciate your help.

Answer 1

I'm not 100% sure if the JHtml method will deal with the ordering issue but best give it a try. So replace this:

$document = JFactory::getDocument();
$document->addScript(JURI::root().'media/com_mycomponent/js/gallery.js');

with this:

JHtml::_('bootstrap.framework');
JHtml::_('jquery.framework');
JHtml::_('script', JUri::root() . 'media/com_mycomponent/js/gallery.js');