Why does my code in a script element not run? - javascript

I have the following script in my smarty template:
<script src="http://code.jquery.com/jquery-latest.js">
$(document).ready(myBookings);
</script>
However it doesn't work on page load. $(document).ready(myBookings); does work when I run it in Mozilla firebug console though. What am I doing wrong?

script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
Use another script block for your document-ready handler
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(myBookings);
</script>

Related

External file script is not loading

Iam using load() for loading external html file.
$("#header_section").load("header.html");
$("#sidemenu_section").load("side_menu.html");
Here, HTML file is loaded and css also loaded but script file is not loading in the page
<script src="js/utility.js"></script>
I tried to declare the above script file inside the head and inside the body. Both are not working.
Check your relative path to the utility.js file and make sure to load juery.js library before load utility.js file.
and finally try this,
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utility.js"></script>
to load the utility.js file.
I think you forget to add jquery.min.js file. use below code.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/utility.js"></script>
</head>
jQuery may only execute your code with the type attribute set to "text/javascript", per this bug filed a long time ago:
http://bugs.jquery.com/ticket/3733
Try this ...
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
In that case, the scripts are stripped and not evaluated/run.

Adding javascript code to URL

I' ve written some line of js code to sum some values in a specific page. To use my function, i usually open the target page with Chrome, i open the console,i paste my code and call the function. Is there a way to load page and inject code automatically in the URL or somewhere else?
Just include it in between <script> tags on that page:
<script>
// Your code
</script>
You can place them just before the closing </body> tag.
Like this?
<div>some HTML</div>
<!--add the script to your html file-->
<script src="script/url.js"></script>
<script>
myFunction(); //function call
</script>
You can add a bookmark with this code at the place of the URL:
javascript:(function(){
alert('ok');//place here you're personal script
})();
You can use a userscript:
TamperMonkey for Chrome
GreaseMonkey for Firefox
You can use a browser extension:
https://developer.mozilla.org/en-US/Add-ons
https://developer.chrome.com/extensions

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

What's happening when I add more <script> tags?

I am adding some third party code to my page. This is the code sample they supply which works:
<script type="text/javascript">
document.write(unescape("%3Cscript src='//munchkin.marketo.net/munchkin.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
Munchkin.init('123-ABC-456');
</script>
I thought I would remove some tags and turned it into this:
<script type="text/javascript">
document.write(unescape("%3Cscript src='//munchkin.marketo.net/munchkin.js' type='text/javascript'%3E%3C/script%3E"));
Munchkin.init('381-KZC-440');
</script>
This now doesn't work, stating that Munchkin is not defined. I did a look around and read about scope but I'm still confused as to why it breaks, the order has been kept the same. If I had to guess I would say that the JS file being called is allowed to load completely before the page continues onto the next script tag, whereas in my version it continues too quickly. If so, this could presumably be used for many advantages as it's essentially an "onloadcomplete" event?
The new script won't be loaded until the current script block terminates. Think about it like this: The first code will result in a DOM structure like:
<script type="text/javascript">
document.write(...;
</script>
<script src='//munchkin.marketo.net/munchkin.js'></script>
<script>
Munchkin.init('123-ABC-456');
</script>
As you can see, the script is inserted after the script that calls document.write. Therefore the script is loaded when the third script element is evaluated.
But if you have
<script type="text/javascript">
document.write(...);
Munchkin.init('123-ABC-456');
</script>
<script src='//munchkin.marketo.net/munchkin.js'></script>
then you are trying to access the object before the script was loaded.

JavaScript functions in external scripts

I'm learning JavaScript for a project, but I am stuck at the very beginning. I boiled it down, to the function in my script not being defined, but as near as I can tell it is defined.
I have a script: "script.js" with the function display result.
function displayResult()
{
document.write("hello world");
}
in the header of index.html I have this line
<script type="text/javascript" href="script.js"></script>
I have this line later
<body onload="displayResult()">
I have no idea why my function will not call. I would appreciate the help.
<script type="text/javascript" href="script.js"></script>
Should be:
<script type="text/javascript" src="script.js"></script>
there is no href attribute to a script block, its included from an external source through the src attribute.
BTW, calling document.write after the document has finished loading will first clear the entire content of the document, then replace it with whatever you pass to the call (in this case, 'hello world', which is not a valid HTML or XML document).

Categories

Resources