External JS files in Yii - javascript

I'm trying to call an external JS file from my Yii asset folder and the source code is showing the right file, but the JS is not responding.
I included this in my view file ...
<?php Yii::app()->clientScript->registerScriptFile( Yii::app()->request->baseurl . '/assets/test.js' ); ?>
And I know this is the problem b/c when I replicated it in a non-Yii folder it worked, and when I sourced the online JS file in Yii it worked.

The assets folder should be only used to publish there files by the asset manager. For example if the JS file is part of a widget, you can place it in protected/components/widgets/assets/yourJsFile.js and use the assets manager to publish it automatically in the /assets folder. Read more here: Understanding Assets. You probably would want to put your file in /js/test.js and work directly with it, if not using the asset manager.
I still do not know if this is the issue, if the file is loading. If this doesn't help, please show some more code - where and how do you load that js file in the views, what is in the file, etc.

CClientScript::registerScriptFile() can put the <script> tag in various parts of your page's HTML (three places to be exact: in the <head> or at the start or end of the <body>). Sometimes the position matters because the order of script tags matters. I found ordering to matter when I used jQuery UI.
By default it puts the script tag in the <head>. If you play with the position you may find it working.
The little bit of code you show doesn't indicate any problems. But you may want to give a bigger example and/or show what you did that worked. By the way, in Yii you should not be putting things directly into the assets folder. Items get in here by being published through the asset manager.

Related

can't understand why my js file is not found on client console

this probably is a newbie question, please don't be mean :D
I'm trying to add a js file to an html page, but can't load it properly. It seems to be a path related issue.
in the HTML page I'm linking the file with
<script src="../src/utils/mapbox.js"></script>
Then on my js file I simply put a console.log to see if the file is loaded properly, but it isn't :/
I tried everything but nothing changes.
screenshot of the debug console
screenshot of the source tab of the debuggin tool
On the second image, I can't see all of my folders I have on VSCode. It is because those file are server side right? If so, how can I solve the issue? :/
this is the folder structure in VSCode
Thanks in advance.
The value of the src attribute needs to be a URL to the JS file.
If you use a relative URL, it needs to be relative to the URL of the HTML document.
This is not the same as the path between the EJS template used to generate the HTML and a JS file on the local filesystem.
First you need to give the JS file a URL. You haven't shown the source code you've written for your websever, but it seems like a reasonable assumption to say that you have used the Express.js static module to make the contents of the public directory accessible.
The src directory is not inside public so it isn't accessible. It also appears to be a directory containing your server-side source code, so it isn't a suitable place to keep your client-side JS.
Move the client-side JS files into a directory inside the public directory.
(If you are writing isomorphic JS then you could create a new directory, perhaps called shared, and expose it using static too).
Once that is done, you can work out the URL to the JS file.
ok I digged into that issue and so basically, I was confusing between client side and server side. I looked at the mapbox api docs and immediately I clicked on the npm quick guide, but this is just for limited cases, when you need to render a map on the server.
All I needed to follow was the web js api of the mapbox service.
So thanks for the comments, I'll try to noob less and study more! :)

How do I automatically install web assets like bootstrap, jquery and font-awesome without using CDN?

I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder?
Is there no program that can update and automatically drag them to the correct folder?
I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:
\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.
Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.
JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)
To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).
Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.
As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).
Update:
As for how to include files in your HTML, it goes like this (Bootstrap example) :
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.
I think it is not a good idea to use local files instead of CDNs until you are not working offline.
Here you can read about CDNs vs Local Files:
https://halfelf.org/2015/cdn-vs-local/
Multiple files on CDN vs. one file locally
https://www.sitepoint.com/7-reasons-to-use-a-cdn/
Although there is one another link that is just opposite:
7 Reasons NOT to use a Content Delivery Network
Nevertheless if you want to use the files locally you can follow the instructions below:
Move at the cdn link in your project
Copy the link from src or href and open it in your browser.
Save the file locally and give the reference of the file in your project.

Play framework: Missing semicolon error in jQuery/Bootstrap JS

I'm new at Play Framework and making my first project with it. I added jQuery and bootstrap.js to my main.scala.html:
<script src="#routes.Assets.at("javascripts/jquery-2.1.3.min.js")"></script>
<script src="#routes.Assets.at("javascripts/bootstrap/bootstrap.js")"></script>
When I run my application in a browser, I get the compilation error:
Missing semicolon in \app\assets\javascripts\jquery-2.1.3.min.js:2
You can see the screenshot here: http://oi61.tinypic.com/2lllklx.jpg
The same problem if I add only a bootstrap js, minified version or separate js files.
I don't change those files, I add them in the form they were originally - downloaded from jQuery/Bootstrap websites.
I tried to add semicolons manually, but there are hundreds of them missing. I don't think that's a good idea.
Maybe I should change some settings in the Play application?
You put a js file on app/assets/javascript, that folder is for files that need to be compiled, like coffee script files. So, jquery and bootstrap files need to be on public/javascript.
Ensure you have a route similar to this on conf/routes:
GET /assets/*file controllers.Assets.at(path="/public", file)
Anyway, I recommend you to use WebJars.

Tinymce compress other than tinyMCE_GZ.init

In continuation with the below post is there any way to take ahead the build.xml and add all the plugins such as table, save etc and compress it with the same build.xml file. Reason is to have one ant script file to compress all the files into one, not only the tinymce js files but also other project related files.
tinymce build script to compress all js files
I know the compressio is possible by declaring additional tinyMCE_GZ.init but why use two methods of the compression in same project. It would nice to have as described in above post using build.xml.
How does the plugin structure works it is possible to take everything in one file & still intantiate plugin, right now when I take out all the script tag from table plugin (i.e from table.htm) file I get javascript error even though the script tag is available into the parent html file from which table plugin is invoked..
I tried that, but i failed. I won't say it is impossible, but it will be pretty difficult to achieve. What i ended up doing is to use two compessing methods.

Referencing Javascript libraries with Tomcat

I am using Eclipse Ganymede and Tomcat 5.5. I would like to add some javascript and especially ajax functionality to a dynamic web project and need some help.
I would like to use jquery (but I am open to other suggestions, if you tell me why another library would be better in this case, but I have chosen jquery because it is supposed to be simple (which on the first look it seems to be)).
I am having two problems:
1- Tomcat can't find the jquery library. I tried several things in my jsp file like:
<script type="text/javascript" src="WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./WEB-INF/lib/jquery-1.3.2.min.js"></script>
As you can see, I threw the jquery library in /WEB-INF/lib. Executing the jsp file within a browser without tomcat (with the last path version) works, so the path is correct.
2- There is no proper syntax highlighting within the dynamic web project for jquery and no popup suggestions. I also tried the information in this article, but it didn't change much.
To be more specific (because it took me about half an hour to figure this out after getting to this point):
When you create a Dynamic Web Project with Tomcat in Eclipse, among other things in the project you get a folder named "WebContent". That's the actual folder that gets deployed to the Tomcat server, in Eclipse's equivalent of Tomcat/webapps/<project name> (I'm not sure where it really exists). For security reasons, as a special case nobody can access the META-INF and WEB-INF folders in there, so putting your scripts in those places will not help.
What you have to do is create a folder inside of WebContent, and stick your Javascript in there. This folder will be globally visible, so visitors to your site (like you, when you test it) can actually get to the Javascript.
What I did, for instance, was create a folder named "script" in WebContent and put my Javascript in there; then, when I needed to reference it in a page, I put in src="ProjectName/script/AwesomesauceJavascript.js"
I'd like to add to what #Tacroy responded with. Within the server you're using in Eclipse, check the server.xml. Make sure:
Context docBase="SomeProjectName" path="/SomeProjectName" <-- path and docBase attributes need to be the same.
I had two different things there, and had to make them identical for the src attribute to work in the jsp.
First you must to add resource mapping to your folder where you put jquery.js script library. That folder must be public.
To make folder public use this line of code:
<resources mapping="/scripts/**" location="/WEB-INF/scripts/**" />
Now you just need to add reference in your page to this path:
<script type="text/javascript" src="scripts/jquery-1.10.2.js" ></script>
Below are the steps to enable jQuery syntax highlighting and content assist highlighting in Eclipse.
Download jqueryWTP0.40foEn.jar.
Find your Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar, backup the plugin.
(e.g. C:\DEV\EclipseIndigo37\eclipse\plugins
\org.eclipse.wst.jsdt.core_1.1.100.v201104272153.jar)
Double click the JAR file or run with command java -jar jqueryWTP0.40foEn.jar.
On the opened swing UI, choose org.eclipse.wst.jsdt.core_version.jar, and output directory.
Click the generate button.
Replace the old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
Delete the directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
Start Eclipse.
Open a HTML file or a JavaScript file, edit JavaScript content.
jQuery content assist is now available.
Plugin Developer & Source

Categories