Link jquery file is not working as expected - javascript

my jquery file path is c:\xampp\htdocs\project\resources\assets\js\jquery.min.js
..I have tried like below on my page but jquery file don't included ! What I am wrong ..
{{-- <script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script> --}}

The URL::asset() is a helper function in laravel,
when you use this function it automatically generates the URL path to the
ProjectName/public and you have to specify the remaining path inside the asset method.
So, first you would want to place the css , js , 'images' and 'fonts' files inside your public folder that is in the root directory of your project.
then you can use the asset() or URL::asset() to locate your file.
the standard folder structure looks like this ..
ProjectName/public/css/main.css
ProjectName/public/js/jquery.min.js
etc ..
i think that would work for you .

Add those file in public/ folder like public/assets/js/jquery.min.js

Please make sure you have proper access rights to aforementioned resource (js file). You can also try to view the file with your web browser by visit http://your_hostname/assets/js/jquery.min.js

Related

How to add external js file into Laravel project app.js file?

I want to use this package for audio equalizing animation. I want to add it in my Laravel project so I copied two files which are
jquery.reverseorder.js
jquery.equalizer.js
to /myproject/node_modules/myjss/
and added these two lines
import 'myjss/jquery.equalizer'
import 'myjss/jquery.reverseorder'
into /myproject/resources/js/app.js
but it returns TypeError: $(...).equalizer is not a function
How can I fix it?
You don't need to save those files like that. Just save them in laravel's assets folder. then in laravel, you should include it like this <script type="text/javascript" src="js/jquery.reverseorder.js"></script> . in src path, you can use asset_path of laravel. You can include this path in js or laravel's blade template.

I can't use Javascript in Dreamweaver

My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.

How to load JS file in run time in my case?

I am trying to load different JS file in Angular for different environment because the prefix for my js file is different and I can't save them in my local.
in dev
js file path is http://myproject-dev.com/product.js
so my html will be like
<script src="http://myproject-dev.com/product.js"></script>
prod
js file path is http://myproject.com/product.js
my html is like
<script src="http://myproject.com/product.js"></script>
I need to load them based on the environment, I have a variable set in JS to detect the environment but I don't know how to load them in html or in run time in Angular. Any tips will be appreciated. Thanks!
Use a relative URL.
Same position: <script src="product.js"></script>.
With a subfolder from current position: <script src="scripts/product.js"></script>
With a subfolder from root: <script src="/scripts/product.js"></script>
You can simply use relative paths to reference your files rather than using the full URL.
if you directory structure looks like this:
js
product.js
index.html
then inside of index.html you can reference product.js like this:
<script src="js/product.js"></script>

my html file won't link to stylesheets & javascript that reside in a parent directory

I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,

Using jquery i18n plugin for i18n?

I am using jquery i18n plugin ( http://code.google.com/p/jquery-i18n-properties/ ) to internationalize the messages placed in jquery/js.
i have below project structure.
I have some.js file in js folder and inside some.js file i have to refer a properties file which is located in properties folder of src/main/resources folder. can i do as below? inside properties folder of src/main/resources folder i have placed Messages.properties and Messages_en_US.properties. In both the properties files i have placed myForm.success.msg=Success property. Now i am trying to access it as below. But below code does not get the value of myForm.success.msg key. instead of giving value, it is giving the key itself but not the value. Am i referring the properties file wrongly? is my properties file referring correct? Please help me.
JSP code:
<script type="text/javascript" src="./public/js/some.js"></script>
<script type="text/javascript" src="./public/js/jquery.i18n.properties-min-1.0.9.js"></script>
some.js
jQuery.i18n.properties({
name:'Messages',
path:'properties/', //as i have properties file in properties folder of src/main/resources
mode:'both',
callback: function() {
alert("message "+jQuery.i18n.prop('myForm.success.msg'));
}
});
I don't try it but I think you should put the *.properties files in public/resources directory.
And the path shoud be:
jQuery.i18n.properties({
name:'Messages',
path:'../resources/', // changed here
mode:'both',
callback: function() {
alert("message "+jQuery.i18n.prop('myForm.success.msg'));
}
Try it.
Deploy your app to a server, eg. Tomcat, and then access to the pages by server.
The root cause of your problem is a html page can't access to properties files across domain.
Unfortunately, that will not work. The JQuery plugin will always look for a properties file that are within the webcontent folder. Try this instead:
Copy those properties file inside your webapp folder and test it with actual path. e.g. resources/custom/i18n/ [Note - Here I placed the properties file inside a i18n folder and placed a resources folder under webapp]. This will fix your problem!
Now we can manage two files, but do we really need it? The easiest thing to do is have your file only in the src/main/resources folder, but as part of your build step copy this properties file to your second location (i.e. inside the webapp folder).

Categories