Calling function in HTML, from external .js file? - javascript

I am trying to call a function I've declared in my .js file, in my HTML document.
js/newsalerts.js
function unescapeHTML(html) {
//https://stackoverflow.com/a/2989105/4650297
var div = document.createElement("DIV");
div.innerHTML = html;
return ("innerText" in div) ? div.innerText : div.textContent; // IE | FF
}
index.html (using Flask)
<html>
<head>
<script type="text/javascript" src="{{ url_for('static', filename='js/newsalerts.js') }}"></script>
<script>
queries = "{{ search_terms }}";
console.log(unescapeHTML(queries));
</script>
...
I'm trying to get the unescapeHTML function to run on my queriesvariable, but keep getting the error that
unescapeHTML is not defined
I've also tried console.log(newsalerts.unescapeHTML(queries)), same error.

Unfortunately (?) the solution to this was not a programming one. Thanks to the folks commenting on my OP, I was able to confirm that my .js file was indeed loading correctly, and the code was correct.
...except looking through the code, my unescapeHTML function was missing -- but it was in my .js file!
The problem was when I restarted the Flask server, and refreshed my browser, it must have kept the js file from the cache. Once I did a hard refresh, the full correct js file loaded and it works as expected.
So, don't forget to "hard refresh" the page if you change any of the underlying code.

Related

Javascript: is it possible to read the raw code of external scripts?

Given a typical script tag:
<script src="foo.com/myscript.js"></script>
would it be possible to directly read the contents of myscript.js as a string or something?
For example:
<script id="myscript" src="foo.com/myscript.js"></script>
<script>
var inners = document.getElementById("myscript").//raw contents of myscript.js
</script>
No. You can read the contents of the inline script tag, because it actually does have content:
<script id="myscript">
var inners = document.getElementById("myscript").textContent;
</script>
But for the external JS, the script contents are not actually put into the DOM; you would need to re-fetch it using AJAX (it would normally be cached unless anti-caching measures were taken, so you would not really take much time to re-fetch).

Why I can't type any letter if I separate the .js file?

Actually I was trying to get the concept of the module pattern. Here I have simple code which I used to type directly on the page. It was fine until I tried to separate the actual code from the HTML file and kept only a single line of code on the main HTML file:
<body>
<script type='text/javascript' src='module.js'>
// module.JS file was here ....
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
</body>
File module.JS
var module = (function() {
return {
show:function(keyCode){
document.body.innerHTML+=(String.fromCharCode(keyCode));
}
};
})();
You'll need to have two <script> elements for this.
Use one to "import" your external module and another for the script you want to embed directly on the page:
<script type='text/javascript' src='module.js'></script>
<script type='text/javascript'>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
For more information, you can check out this MDN documentation page. Here is an excerpt talking about the src attribute (emphasis added):
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. Script elements with an src attribute specified should not have a script embedded within its tags.
A script block referring to an external JavaScript source should be separate and any script inside of it does not get executed. So you need two separate script blocks one for the external JavaScript file and the other for your script.
<script src='module.js'></script>
<script>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>

Javascript can't find the script tag's id

I am facing problem with javascript document.getElementByID function. The HTML file is:
...
<script
id="scriptID"
type="text/javascript"
src="http://external.script.com/file.js">
</script>
...
When the page is loaded, the script is successfully included, but when executing expression from that file (the script is executed automaticaly after loading it):
... = document.getElementById('scriptID').src
The script fails with message saying that "document.getElementById('scriptID') is null".
Can anybody tell me, why it is null if the tag is the script tag itself?
Thx for any response.
EDIT:
I don't know if that is relevant, but the page is built in a bit more complicated way.
There is page of some product. When the customer orders that product, there is a div loaded by AJAX with some "Thanks for order" and that contains the script. Then the script is executed.
May be your DOM is not ready when you are try to get src of script,
<script id="scriptID" type="text/javascript" src="http://external.script.com/file.js">
</script>
window.onload=function()
{
alert( document.getElementById('scriptID').src);
}
Its workinfg fine SEE

How to call external JavaScript function in HTML

I have a small chunk of code I can't seem to get working. I am building a website and using JavaScript for the first time. I have my JavaScript code in an external file 'Marq_Msg.js' which looks like this:
var Messages = new Array();
Messages[0] = "This is message 1";
Messages[1] = "This is message 2";
Messages[2] = "This is message 3";
Messages[3] = "This is message 4";
function scroll_messages()
{
for (var i = 0; i < Messages.length; i++)
document.write(Message[i]);
}
and in my HTML file 'Index.html' I am trying to call it like this:
<div id="logo">
<marquee scrollamount="5" direction="left" loop="true" height="100%" width="100%">
<strong><font color="white"><script src="Marq_Msg.js">scroll_messages()</script></font></strong>
</marquee>
</div>
The 'logo' div is a CSS piece that I'm trying to marquee inside of. If I put the code embedded inside the 'head' tag and call it, it works perfectly! There are a few other things id like to do with this code (like space the messages out a little) but I can't get the code to work in the first place. I've also tried adding:
<script src="Marq_Msg.js"></script>
in the 'head' tag with a separate call, that was a no go. I also tried instead using:
<script type="text/javascript" src="Marq_Msg.js">scroll_messages()</script>
Hell, i even had the function try returning a string (even hardcoded a simple "hello" to be returned) but that didnt work either with and without the 'type':
//Marq_Msg.js
function scroll_messages()
{
return "hello";
}
//index.html
<script type="text/javascript" src="Marq_Msg.js">document.write(scroll_messages())</script>
What am I missing? Any help would be greatly appreciated!! I've looked all over Google, and every site I find wants to do it using some 'form'. I just want messages to be displayed across, no form attached.
If a <script> has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).
You need to use multiple script elements.
a <script> to load the external script
a <script> to hold your inline code (with the call to the function in the external script)
scroll_messages();
In Layman terms, you need to include external js file in your HTML file & thereafter you could directly call your JS method written in an external js file from HTML page.
Follow the code snippet for insight:-
caller.html
<script type="text/javascript" src="external.js"></script>
<input type="button" onclick="letMeCallYou()" value="run external javascript">
external.js
function letMeCallYou()
{
alert("Bazinga!!! you called letMeCallYou")
}
Result :
If anyone still has the reference error is probably because you are loading your Javascript with defer, or it's in the bottom of the body so when the function gets called your function still doesn't exist.

Javascript loading but not running - rails 3.1

I have in my application layout file an external javascript file witch has several lines of code and at the end runs a function like BooManager.init() no big deal...
the problem is, it is not running the inside code on this javascript file.
this is how i use it:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "iphone4s, apple";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<%= javascript_include_tag "http://widgets.boo-box.com/javascripts/embed.js" %>
but it didn`t do anything it was suposed to do...
i`ve tried in simple html file and it works... what am i doing wrong?
NOTE:
the default way in html is this:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "keywords, between, commas";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
-- EDIT --
the result generated by rails:
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
It's not evaluating the script when loading using the <%= method. I'm not familiar with that syntax, but from the effect, that's what it sounds like. It's treating the script as html rather than code.
jQuery has a script load function that will get a script dynamically from a URL and then eval() it to execute it.
UPDATED WITH SAMPLE CODE
Add jQuery to your app:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then use it to load your script:
$.getScript('http://widgets.boo-box.com/javascripts/embed.js');
UPDATE NUMBER 2
I was able to duplicate the problem in this fiddle: http://jsfiddle.net/7x2zT/4/
If what you are trying to accomplish is to get your parameters activated before the script shows the widget - the default one looks like a sidebar, whereas your parameters make it more of a banner, then just make sure you put your parameters above the <script src stuff.
If you must be able to load dynamically, then you're going to have to figure out where the bug lies in the embed code, or if there's some other activation method. That site's documentation doesn't seem to be in English, so I can't help with that.

Categories

Resources