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.

Lodder · Accepted Answer · 2014-04-17 10:58:17Z

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');

edited Apr 17, 2014 at 10:58

answered Apr 17, 2014 at 10:22

Lodder

19.8k11 gold badges65 silver badges104 bronze badges

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

6 Comments

Reza Baradaran Gazorisangi Over a year ago

I tried your recommendation both in view.html.php and default.php but the problem still exists which is very strange!!!!

Lodder Over a year ago

@Gaz - Try using JHtml::_('jquery.framework'); before as shown above

Reza Baradaran Gazorisangi Over a year ago

It kinda worked this time, but it still comes before bootstrap.min.js and template.js

Lodder Over a year ago

It shouldn't be a problem if it comes before template.js however to ensure it comes after bootstrap.min.js, see my updated answer.

Reza Baradaran Gazorisangi Over a year ago

I mean this the normal way of adding external js files to componets?

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related