JS Include is not working - javascript

I have moved an large piece of JS code form my header file to it's own .js file.
I'm trying to include it with:
<script src="includes/js/test.js" type="text/javascript"></script>
The JS code is not loaded, what could be wrong?

One possible reason is that the path is wrong. Remember that the path as you've written it will be interpreted relative to the current URL. So if this code appears on a page that is accessed at
http://www.example.com/example1/index.html
then the browser will request the javascript file from
http://www.example.com/example1/includes/js/test.js
which may not be what you want. A better approach may be to use a link that is based on the root: that is, if you change it to
<script src="/includes/js/test.js" type="text/javascript"></script>
then it will always look in
http://www.example.com/includes/js/test.js
no matter where the link appears.

If I had to guess based on the information you've provided, I'd say there's probably a syntax error in the external .js file or the page isn't finding the file from the URL provided. That's usually the problem I experience when I move large pieces of code from one file to another.

Related

Only last javascript file linked with script tag is working

I linked all the javascript files in the header.php at atime. I included header.php in all pages
When I link the javascript files like this
<script src='js/home.js'></script>
<script src='js/disc.js'></script>
<script src='js/que.js'></script>
only last file js/que.js is working.
Make sure that the 'src' is referring to the correct file directory where the script is located. If you are using an IDE such as VS, then you may drag the file into the code and the IDE will automatically create the reference for you.
Unless you have problem with directory structure or you file name does not match with src attribute of script tag, there should not be any problem with. Please try to use type="text/javascript" and make sure your script tags are after header tag or just before </body> tag. Also keep sequence of files loading if any file depends on another file variable or any function. If it still does not work use try to see if there is any error in your code in console window.
I now I'm going to get voted down for this but oh well. I don't have enough points to comment which is what I would do but..oh well.
Okay it depends on what the scripts are doing. If you link the scripts in the head for you HTML page, and try a var element = document.getElementById("theID"); this will return null due to the fact that the browser has yet to read the HTML and hasn't had a chance to create a DOM (Document Object Model) tree. For a problem like this check out
<script>
function load() {
console.log("load event detected!");
}
window.onload = load;
</script>
This will assign window to an event/callback that will be invoked after the page has had time to load.
Look at where your JavaScript is used, and what it should be doing. Would those elements be rendered yet. Are you writing functions but not actually calling them (this happens A LOT)? It would be better if you described what the code was doing and your experience with HTML and JavaScript. Remember that the browser interprets the JavaScript as it encounters it, you can put script tags anywhere in your HTML file, not just in the head. Also are the .js files in the same directory as the HTML file or are the two non working .js files in the same directory as "js/que.js"? If not move them to the same file or use a relative or absolute path.

Call JavaScript code from file in HTML

I'm currently trying to play a FLAC audio file in HTML and come across this website: https://www.wakamoleguy.com/2014/flac-over-webrtc-with-sipjs/
It wanted me to go download some JavaScript code and add this to the top of the html:
<script src="aurora.js"></script>
<script src="flac.js"></script>
<script src="sip.js"></script>
After that, I downloaded flac.js, aurora.js and sip.js. But the problem is that only sip.js came as a file, while the rest came as folders. I don't know if it is possible to call a folder called flac.js or if I can call the index.js inside maybe?
flac.js and aurora.js linked me to a GitHub link, and I'm not sure if I'm meant to be using the code that way they posted it. I have nearly no clue about JavaScript but only want this to work.
You have to go to "releases" page on github:
Aurora.js: https://github.com/audiocogs/aurora.js/releases
Flac.js: https://github.com/audiocogs/flac.js/releases

How to add javascript to php page

I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file.
It costs you caching. This is a long term penalty. The impact of that depends on how often the script will be used by the browser
It saves you an HTTP request. This is a short term bonus. It saves you a bit of time when loading the script in the first place.
This has nothing to do with PHP though. It applies to any HTML document.
Some of this is "legacy". At one point, you HAD to put <script> tags in the <head> portion of your markup, and so this is where most examples put it.
If you add a src reference to an external file, you can reuse the script as a resource on other pages that call for this. If you are using the same script all over the place, put it in a "js" directory and the browser won't fetch a new copy each time. This helps with bandwidth.
If, however, you add the raw script to your page, the whole page (minus images and other "embedded" content) will arrive in one thread. This helps with load times.
Unless you're expecting 10,000+ pageviews in a short space of time, I wouldn't worry too much either way.
Oh, and one other thing to consider: http://developer.yahoo.com/performance/rules.html#js_bottom -- why you should put your scripts at the bottom of your document.
I totally agree with #Quentin. Additionally I would suggest putting your scripts in seperate .js files and include them - for reasons of structuring - not only in large projects.
One thing that could lead you to put the JS code into a .php file however could be if you need to generate code using PHP or if you want to use information that is e.g. pulled from a database directly like this:
<?php
$foo = getSomeInformation();
?>
<script type="text/javascript">
var someVar = <?=$foo?>;
</script>

Wordpress: can I launch a small javascript declared on the same page? Or how to upload .js file to Wordpress?

I'm completly new to wordpress. I just want to use single javascript snippet on a page. For example:
<script>
function myFunction(){
//do something
}
</script>
// a bit later
<input type="button" name="testButton" onclick="myFunction()">
And in developers console in Chrome I get an error: "Refused to execute a JavaScript script. Source code of script found within request."
I've done some research and I think that I know it's origin - it seems that I have to add an external file with my javascript code. The bad thing is, that I have literally no idea how to do it, in spite of researching for the past few hours. Maybe it's very easy and I'm missing the simple solution, but I just don't know how to upload .js file. I've bumped into some topics saying that I have to use a php function, wp_enqueue_script(), but it still needs the .js file to be uploaded to wordpress server. Do I have to upload it as Media, a page, or what? And still, if I have to upload a javascript file each single time when I want to change something, application development will be a pain in the butt...
So is there maybe an easy way to put my javascript function definition in the same file where the function is used? That would be possibly the easiest solution.
Adding external Javascript files is probably the way to go. You upload them in the same way you would do if this was a regular HTML site, (ie using FTP or something similar).
Then you can reference it in the header.php file (accesible under the Appearance -> Editor in Wordpress).
Some themes allow you to add Javascript to the top/bottom of each page, you may want to check if your theme allows that. (check the manual with the theme or their support).
Add this whole code in header.php file of your WordPress and add
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
before your code.

Trouble Linking External JavaScript with Jekyll

I have a site hosted by GitHub Pages that uses Jekyll, and I've been successfully using an internally defined script in each layout that will generate a random tagline from an array of them.
I'm trying to move this script to an external tagline.js, but so far I've been unsuccessful.
Here's the basic tagline generating script, in case there's something in the code causing this (which I doubt, honestly, due to its simplicity; but it's always a possibility):
var tags = [ 'tag1', 'tag2', 'tag3' ];
function getTag() {
return tags[Math.floor(Math.random() * tags.length)];
}
$(document).ready(function() {
$("#tagline").text(getTag());
});
Like I said, it works fine when it's internal, but it doesn't when I try linking to external. I'm pretty sure it's just a case of where I'm pointing the <script> to: the HTML file containing the <script> is in _layouts/default.html, but the script is in scripts/tagline.js:
<script type="text/javascript" href="../scripts/tagline.js"></script>
The attribute you want to use for a script call is src instead of href. For example:
<script type="text/javascript" src="../scripts/tagline.js"></script>
I would also highly recommend using paths from the site root (aka docroot) instead of relative to the file. That way you can use the same call in multiple places and it will always hit the correct location. To use a docroot relative URL, you start the path with a /.
Assuming your script is located at http://example.com/scripts/tagline.js, the call you would make is:
<script type="text/javascript" src="/scripts/tagline.js"></script>
Without using the docroot, you will constantly have to adjust the path depending on where the HTML file calling the script is located in the tree. If all the files are in the same place, that's not a big deal, but it's a good habit to get into to avoid issues down the road.

Categories