How to add javascript to YII correctly? - yii

I want to create several javascript function that will be needed on different pages. Most will be relevant only to one page, but some to several. I know if I add general conversion functions, it would be a good idea to just create a new javascript file and put all these generic functions into that one file. Bringing me to my first question:
Where would you store the generic javascript file? In "protected"? Which subfolder?
Then, I need to address the placement of other javascript code.
If I have javascript that will only be used on one page, should I use this technique or should I stick to a similar approach as above?
The emphasis is on doing it correctly. I want to fall exactly in line with the yii framework.

store your generic javascript file in your_app/js folder
i.e js folder is at same level to protected.
if js is only used on one page than it will be better not to use generic file.

The best way to have you generic js code into /js/ or similar named folder under root of your app code. Personally I would separate my custom code files into one other subdirectory /js/custom/ and /js/vendors/ where in this vendor folder you can put ready js code such as jquery plugins etc.
Also don't forget to set this path to config file like this:
'components'=>array(
'clientScript' => array(
'coreScriptUrl' => 'path/to/js/lib/dir',
'enableJavaScript' => true,
),
),
where path/to/js/lib/dir is your final js folder name path

Related

Keystone.JS render multiple template files

I use keystone.js together with handlebars as template engine. Until now I had one .hbs-file for each page. However, HTML-Code is growing over time and I would like to split the HTML into several files. Does keystone.js offer a simple way to render multiple template files?
I'd prefer not to use technologies like webpack just for that "simple" task.
You can use partials to break up your templates, so you can include one .hbs file in another file.
Add a new file in the templates/views/partials directory, for example myPartial.hbs, and then you can include it in another file like so:
{{> myPartial }}
KeystoneJS will handle registration of .hbs files in the templates/views/partials directory.
You can read more here:
http://handlebarsjs.com/partials.html
If you use the KeystoneJS generator to set up your project, you can see this in action where pagination.hbs is included in blog.hbs.

How do I navigate to another page within my Elm application?

How do I navigate to another page within my Elm application?
Specifically, I am trying to navigate from the Home page to the Contributor page.
The Contributor page is located under my Domain folder.
The file structure is below:
- Home.elm
- Domain
- Contributor.elm
I thought I could do something like this:
a [href "Domain/Contributor.elm"] [text "click me!"]
or this:
a [href "Domain/Contributor.html"] [text "click me!"]
However, neither of these paths work.
Note:
The app that I'm working on is NOT a SPA.
You are using elm-live, which is a development server. It targets a single Elm source file as its entry point, so unless your Elm code is built as a single page application, you won't be able to do any navigation to another file (though there is nothing wrong with hard-coding href links that link elsewhere).
elm-live is also only for development. You wouldn't want to run it on a production server.
If you are trying to avoid a SPA and would rather have each Elm file represent the complete functionality for a single page, perhaps you could go with the default functionality of elm make, which generates an HTML file that contains inline javascript compiled from Elm code. This is, in essence, what drives the elm-lang.org website. If you look at the source code, you'll see the html generated by the default elm make command, compiled against each Elm file "page" of the application.
On the other hand, if you are trying to build a SPA, #Bill's answer is a good starting point.
I don't believe you can do the sort of navigation you are trying to do within an Elm app without building a SPA. You are attempting to use the HTML href attribute to navigate. That attribute needs to be a real URL. Without using something like the Elm navigation package, you wont's have support for multiple routes.
Simple navigation in Elm is fairly straightforward. I wrote a blog post on this subject.
Also, here is the github repo that demonstrates the work in this post.

How to requiere a js file in Fiddle.js

I'm trying to make a fiddlejs.
The Code use a VueJS plugin called VueDragula, inside the code, I have:
let VueDragula = require('../vue-dragula');
Vue.use(VueDragula);
So, I uploaded vue-dragula.js to my own server, and added it to external resources, and delete the 2 lines, but now, it says
VueDragula is not defined
I also tried to include directly the content of vue-dragula inside the JS, but happened the same thing.
How should I do that???

Yii - Route without Controller

I'm using an existing upload script that require user authentication. However since I did not write the upload script, it's nearly impossible for me to read the source code and make it into separate view and controller file. The problem is if the script does not get routed by the bootstrap file, it has no access to the Yii variable and thus user log in information.
I tried to set a custom session variable when the user login. However it work barely because my custom session would expire before the session set by Yii.
Any help would be appreciated.
Because of the way the script is written I've only been able to find one way of doing this. It will involve re-writing some elements of the script.
Save the filemanager in protected/vendors.
You need a controller to handle the routing of the request. This will also give you the access control that you need. Call it FileUpload and create it where you normally create controllers in your project. Right at the start of the controller, before the class is declared, import the fileUpload files from it's previously saved location; Yii::import('application.vendors.*');
You need an action to handle the incoming request. Call this actionIndex. Give it the following code.
public function actionIndex() {
//Start capturing the output from the script
ob_start();
require_once('filemanager/dialog.php');
//Finish capturing output, and save to a variable
$output = ob_end_clean();
$this->render('index', array('output' => $output));
}
Then you need a view file. Call it 'output.php' and it just contains one line; <?php echo $output; ?>
This will render the html generated by the script, and hopefully contain it within your existing template.
Your first problem is that the script sends headers which aren't discarded by ob_start. You will need to delete these from the script. It also starts a session, which will throw an error 'Session already started', which can be cured by changing the first line of config.php to
if(!isset($_SESSION))
{
session_start();
}
Your next problem will be that none of the scripts and stylesheets are loaded, because the vendor hasn't used relative filepaths, and also because you've just deleted the headers. You will need to re-write lots of the script to include the necessary files. Fortunately, you now have access to Yii functions, so can use the asset manager to publish all the js and css files needed by the script.
Your final (hopefully!) problem will be the urls used by the script page. Currently they are all pointing to files within the script. You will need to rewrite these to use Yii routing. Fortunately, inside the main file dialog.php you should have access to all the normal Yii functions, so you can set $baseUrl as $this->createUrl() etc. If you need to add extra actions to the controller you can follow the pattern above to call other files, like the upload.php file in the script.
Hope that all works for you!
You are using a Framework with mvc pattern so controllers are preferred way to route requests .As per your problem i would suggest you to use htaccess file to do the routing to the required file and handle other files by Yii
copy code from existing source to new Yii Controler/Action ... done :D

How can I display Joomla modules within a component?

I have a component with several categories of games and I want to display a different banner depending on the category. I need the banner (and link) to be customizable so it's not simply a case of showing categoryX.jpg or whatever.
I saw this Joomla help page on another question, but it only seems to display a module type, not one specific module. I'd like to use various mod_custom modules and display the one appropriate to the category (I can store each module's ID if necessary).
Any ideas?
This can be done in a 2 step process:
Use the "Load module into article" plugin to allow yourself to access the module using a plugin call like:
{module [*mod_id*]} // where *mod_id* is the module id
Now that you can call a plugin to put your module anywhere, you now need to go to the view code of your/a component you wish to add the module to and add this code:
echo JHTML::_('content.prepare', '{module [*mod_id*]}');
Please see this link - http://www.alltogetherasawhole.org/group/developers/forum/topics/running-joomla-content-plugins - regarding point number 2. I was trying to do the same thing and I found it didn't work, and the reason for this was a comment you can find on the page link above:
"I noticed that some plugin actually expect option=com_content for them to process onPrepareContent properly, so you might actually want to "fool" them by callin JRequet::setVar and restoring the correct values after the trigger."
If you would like to show module within PHP code then use this code, it's worked for me :
<?php echo JHTML::_('content.prepare', '{loadposition position-2}'); ?>
If you want to show module inside html content then just put this code where you want to show module.
{loadposition position-2}
It loads all modules which are assigned to position-2.
You can also use the Joomla Module Renderer
$doc = JFactory::getDocument();
$renderer = $doc->loadRenderer('modules');
$position = 'custom_position_name';
$options = array('style' => 'raw');
echo $renderer->render($position, $options, null);
Just a heads up, Along with being assigned the module position, that module also has to be set to "Display on All pages".
Joomla has this functionality built in. You can use the {loadposition XX} command within your content items. You can specify custom module positions that do not appear in your template to insure that you have the correct module in the correct article.
http://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F
You could create a new module?
If each category appears in the querystring (catid=X) then you could take a similar approach to https://support.pillwax.com/open-source/doku.php?id=joomla:header_image.
Alternatively, that link might actually do it for you.