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.
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');
Related
I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.
In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.
I want to use a parallax for my Joomla.
Specifically this one: https://github.com/IanLunn/jQuery-Parallax
How can I insert these to my joomla pages.
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
I am using this template with Helix Framework
http://demo.joomshaper.com/?template=radon#
The proper way to add Java-Script Libraries in to your Joomla Installation (Template or Components) is explained in Joomla Docs:
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
Reference: Adding JavaScript
If u have access to files, ftp or cpanel, Go to template files, find heder secton and place the code. Try at this path
temlates/your_template/index.php
I've written my own js library, how can i make other existing js files use it. For example, i created a video project, which include a default homepage scene (including homepgage.css, homepage.html and homepage.js) and a default detail scene (including detail.css, detail.html and detail.js). Then i created my own js file "lib.js" which fetches all video files from my server. Now the question is: how to make the file homepage.js able to use methods of "lib.js". I tried to include lib.js path in the file index.html by using:
<script type='text/javascript' language='javascript' src='scenes/detail.js'></script>
<script type='text/javascript' language='javascript' src='scenes/homepage.js'></script>
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
I also include script tag:
<script type='text/javascript' language='javascript' src='scenes/lib.js'></script>
in the file homepage.html.
but both of them do not work.
Anybody know how to solve this ?
SmartTV application acts like normal website. If you want to use methods from lib.js you should include script before those methods are used. In your case problem may be in accessing methods from lib.js before they are declared. You should check emulator console to find such errors.
In an HTML file, I included jQuery via
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
I downloaded the library via the context menu and now see it in the project folder under External Libraries. Yet, it seems jQuery is not recognized.
<script type="text/javascript">
$(document).ready(function() {
..
});
</script>
The $ is underlined and code hinting asks me to create a function or method called $. The code itself works though.
What am I supposed to do to make PhpStorm recognize the external JavaScript library?
As LazyOne pointed out in his comment I had to look up settings, and there I realized I had to download the library again, and made it global.
I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples
Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.
For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)
To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code