I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege
Related
Good day all. I'm new to Grafana and we adopted it very recently at work.
I'm willing to create a plugin, I need to load a simple external js library and fire it in a Grafana panel, nothing extreme.
First problem: I don't want to use any building library (grunt or whatever), I just want to write the plugin javascript, I don't want to redistribute it. Where do I write the code?
Am I right to write the code I want to execute in the data/plugins/myplugin/dist/ folder? (I'm trying to follow the steps at Grafana Docs, but they are unclear as they talk about building and install scripts which I don't like to use).
Second Problem: Seems like that if I use the dist/ folder, the plugin get executed. Now, I'd like to import a external.js library into it, the external library will take care of display the data as I like.
into my myplugin_ctrl.js I write this:
System.register(['app/plugins/sdk', 'lodash', './css/clock-panel.css!','./libs/datamaps'], function (_export, _context) {
var PanelCtrl, _, _createClass, panelDefaults, ClockCtrl;
As you may notice, I've used the clock plugin that is used into the how-to at Grafana.
I'd like to import './libs/datamaps', what I managed to do is having this error upon adding the panel to a dashboard:
Plugin component error Error: Fetch error: 404 Not Found
Instantiating http://127.0.0.1:3000/data/plugins/test-panel/libs/datamaps
Loading http://127.0.0.1:3000/public/plugins/test-panel/clock_ctrl.js
What I'm doing wrong? Where do the datamap.js should be? Or how do I can import it into Grafana plugin?
I don't know if you really need to solve this with a plugin, as I couldn't find any mention about data retrieval from any data sources in your question. Also, I'm not yet very familiar with Grafana plugin development, but I was able to solve one JavaScript related problem without a need to write a plugin.
What I did: I put a Text element in html mode on a dashboard and inserted a <script>...</script> section as well as some HTML code. This worked until I updated Grafana to a newer version, where they started to block this due to security reasons. After configuring /etc/grafana/grafana.ini setting disable_sanitize_html = true in section [panels], I made it work again. You could do this, too, but keep in mind that this is a security risk, because the dashboards now allow to inject any kind of malicious JavaScript code.
See also this Grafana reference page for scripted dashboards.
Im developing a ember.js based app.
On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script>. But since handlebar-templates are defined by <script>-Tags itself, its not possible to simply put my dependencies within a template directly.
How can I include js-files on some individual sites only?
Including files in an Ember.js application is a bit more complex than in a regular website.
If you do not use ember-cli, then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html. You can bundle JavaScript files using tools such as grunt or brunch or broccoli.
Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)
Good luck!
Ok I found an possibility to solve that problem:
Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt.
That works for me.
Also, as kpdecker says here, it is better to use precompiled templates than defining them inline.
You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.
I'm trying to see if there is a way like Wordpress's enqueue script to properly include scripts onto the footer. I looked up the documentation, but all I could find was a way to do it for Widget Designers. I am looking for the ways to include the script properly and I'm using MVC.
I dug this up from the forums: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/where-to-store-mvc-widget-css-and-javascript-and-how-to-link-it
You could also include the js reference in your master page, which I know isn't ideal if the widget isn't used on every page. You could always bundle and minify site wide scripts to reduce the overhead a bit.
You could also try using a the Sitefinity js widget on the page the widget is used, there is an option to refrence a file and include it before the closing body tag: http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/scripts-and-styles-widgets-group/configuring-the-java-script-widget
In my CakePHP app, I am defining a Wizard vendor that outputs the HTML for a multistep Wizard type plugin, along with its relevant Javascript code. I'm wanting to use the JsHelper so that I can buffer my code to the bottom of the page.
Everything else is working, including my Javascript code if I just output it directly with the HTML. I just can't quite figure out how to use the JsHelper. Do I use a App:Uses or App:Import statement? When using it in a View, I can just define it on the controller level, but that doesn't work here.
$this->Js->buffer("
$('.mws-wizard').wizard({
buttonContainerClass: 'mws-button-row',
orientation: '$orientation',
forwardOnly: $forwardOnly
});
");
If you are developing this 'vendor' package yourself, you should not develop it as a 'vendor', but as a plugin.
The vendor folders are meant for including third-party libraries that are not developed with CakePHP in mind (for example to use parts of the Zend Framework in your application).
From the manual:
Note: Loading vendors usually means you are loading packages that do not follow conventions. For most vendor packages using App::import() is recommended.
Create a plugin not a vendor
To develop re-usable code that can be used with different projects/applications, develop your code as a Plugin. Plugins are basically 'mini CakePHP applications'. Classes from a plugin can be used inside your application and vice-versa; a plugin can use CakePHP helpers the same way as you use them in your application.
See Creating Your Own Plugins
Regarding the JsHelper
Contrary to the comment placed by Sam Delaney, your usage of the JsHelper looks fine to me. Adding some script to the Js buffer to output it in the layout seems useful. Just don't try to use it for extended blocks of JavaScript; that should be put in external .js files.
I do recommend to write the JavaScript code yourself and not have the JsHelper generate the code for you (e.g. Don't use $this->Js->get('#foo')->event('click', $eventCode);). This may be personal, but IMO this makes it harder to track/debug your JavaScript and isn't any more readable than just $('#foo').click('event code');
I've personally never found any use for the JavaScript helper in CakePHP as if you're not careful, you end with getting <script> tags littering your markup, which sometimes makes it quite difficult to debug. From what you describe, you have the JavaScript aggregated and appended at the bottom of your HTML so it isn't as bad as the situation I highlight previously.
Is it not possible to relocate all your JavaScript to .js files to encapsulate all the function for your wizard plugin/vendor? If you could do this, it would be in keeping with MVC principles where you could logically separate the view markup and presentation logic.
I'm trying to somehow render out javascript for a particular user control rather than just having a script include for the javascript file.
The reason why I don't want a simple script include is because I need to append unique ClientID's to the dom elements at runtime.
I could hardcode the javascript in a function and just append the ClientIDs. However, this will look messy and I'm not liking the idea of hardcoding javascript code in a class- it would be a nightmare to maintain.
What are some strategies that I can use to keep javascript/markup separate from the compiled code? I want to somehow have the javascript source included in the assembly as well so that as a user control, it would not require manual script includes and have no other dependencies for it to work.
I used this code from Rick Strahl's blog. Works awesome with jQuery and those types of libraries. http://www.west-wind.com/WebLog/posts/252178.aspx
HTH,
ck
PS If you're using a Web Application Project you can use javascript files as embedded resources.