I want append script in head if there is tag <script> in the body, i try as following but it don't work, How can done it?
DEMO: http://jsfiddle.net/rYXJx/
JS:
var TAREA = $('body').find('textarea').length;
if(TAREA > 0){
$('head').append('<script type="text/javascript" src="files/js/nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>');
};
You can use jquery getScript function:
http://api.jquery.com/jQuery.getScript/
so the correct code looks like the below:
$.getScript('files/js/niceEdit.js');
One of the problems in your script is that the </script> inside the string literal actually breaks the outer <script> tag. You might notice these characters in your page which seem to come out of nowhere:
');};
Secondly, while it is still possible to inject a <script> tag in the head, there is no direct/easy/cross-browsr way of knowing when the script has finished loading. And you cannot use a script before it is loaded completely.
Best solution is to use jQuery.getScript() which provides a callback. Use the callback to call nicEditors.allTextAreas() function:
$(document).ready(function () {
if ($("textarea").length > 0) {
$.getScript("files/js/nicEdit.js", function () {
// no need for onDomLoaded -- DOM is loaded at this point!
nicEditors.allTextAreas();
});
}
});
Related
After i load this :
$('#buy-div').load('../buyBar/buyBar.html',function() {
//do some things here
});
I would like to include this :
<script src="../buyBar/BuyBar.js"></script> //access some html that does not exist
Beacuse in this js i am looking for some html that does not exist only after the .load function is done. (such as getElementById or $('input').keyup(function() { that happens before the .load was finished.
Just put the code that you want to run after the html is loaded in a function. Then call that function in the callback function of the .load('../buyBar/buyBar.html')
Assume "../buyBar/BuyBar.js" originally contains
document.getElementByID("#someElement").innerHTML = "...";
You can change it to
function someFunction(){document.getElementByID("#someElement").innerHTML = "...";}
Now just put <script src="../buyBar/BuyBar.js"></script> in the <head> as usual. Then do this:
$('#buy-div').load('../buyBar/buyBar.html',function() {
someFunction();
//do other stuff
});
I figure out i can do it by loading it when .load is done :
let script = document.createElement('script');
script.src = "../buyBar/Pay.js";
document.body.append(script);
This works but i am not sure is the best solution.
I have a div which looks like
<div>
//Useful content
<script type="text/javascript">
function(){
//some useful code
}
</script>
</div>
Now am getting this div as a response of an Ajax call and appending that into body. Now when the gets appended to body, the function inside the script tag should get executed. But not.. what is the problem here?
You should be using document.createElement("script"); if you need to insert some script dynamically. This is recommended approach.
Anyway, following code is working just fine for me:
var str = "<script>alert('Hi!');</scr"+"ipt>";
$('#container').append($(str)[0]);
Make sure you escape you script properly.
Your function is not executing because it is not being called.
You should use a self-executing function that will just run as soon as it's loaded:
(function() {
alert('hello world!');
})();
I have a html file which looks like this.
<head>
<script>
document.onready
{
document.getElementById("demo").innerHTML="Works";
}
</script>
</head>
<body>
<div id="demo">
</div>
</body>
When I put the script tags at the bottom of the page, everything works fine. But when I put the script in <head></head tag, it does not work. I guess it is not able to access elements that are below the script.
On many sites like StackOverflow, JavaScript is in head tag. How is it then able to access HTML elements that are below it?
What should I do now? Should I just move my script to the bottom or is there a way by which JavaScript can access elements below it?
Try using something like this:
window.addEventListener('load', function() { document.getElementById("demo").innerHTML="Works"; }, false);
Where did you get document.onready from? That would never work.
To ensure the page is loaded, you could use window.onload;
window.onload = function () {
document.getElementById("demo").innerHTML="Works";
}
Your syntax is incorrect.
document.ready= function () {
//code to run when page loaded
}
window.onload = function () {
//code to run when page AND images loaded
}
I want to execute a function at the end when the HTML has been loaded. I tried it with onload without success. I also tried it with ready, but it still doesn’t work. Here is my code. This is again placed in the header:
<script type="text/javascript">
$(document).ready(function() {
$('#infowindow_content').html('test');
});
</script>
The div is also set by an external JavaScript file. Content:
window.onload = initialize;
function initialize() {
document.getElementById('infowindow_content').innerHTML = 'testa';
}
It is included the following way before the closing body tag:
<script type="text/javascript" src="../lib/functions.js"></script>
I tried to place the above code before the closing body tag, but currently I have no idea why this doesn't work (the content isn't changed by my JavaScript code). If I execute it on the console afterwards everything works fine.
Solution:
I set a configuration parameter (language) in the HTML file. In the JavaScript file I ask for this value and depending on the value I define another content. Sometimes it could be so simple ...
Try this:
setTimeout(function() {
$(document).ready(function() {
$('#infowindow_content').html('test');
});
}, 20);
I don't know the jQuery equivalent but try the native JS.
Since the <body> has the most HTML & loads after <head>...
document.body.onload=function(){
yourFunction(args)
}
<body onload="yourFunction(args)">...</body>
Or maybe the window object, since it's the root of every webpage DOM...
window.onload=function(){
yourFunction(args)
}
Always place DOM manipulating code directly before your </body> tag. JavaScript in the header should only be called to libraries, such as jQuery.
// Change the value of the outputText field
function setAjaxOutput(){
if(httpObject.readyState == 4){
document.getElementById('maincontent').innerHTML = httpObject.responseText;
}
}
i try to load a page which contain this script
<script type="text/javascript">
$(document).ready(function() {
alert('dfd');
$("#formAddUser").validate({
rules: {
userImage: {
required: true,
accept: "png|jpg|gif|jpeg"
}
}
});
});
</script>
<div class="content-box">
<div class="content-box-header">
........................
Why javascript on loaded page not executed? Thank you.
Your problem is that innerHTML doesn't execute scripts in the HTML fragment. When you say 'element.innerHTML = htmlfragment;', it just adds the tags and renders the HTML. Script tags are not rendered as part of the HTML by the browser, so they are ignored.
You need to use jQuery.load() instead of jQuery.ajax() like this:
$('#maincontent').load('yourscript.php');
jQuery.load(); has code inside that first takes those tags out, then adds the remaining HTML via innerHTML, then runs the tags separately. You can see the code that does this here at around line 211. From the docs:
When calling .load() using a URL without a suffixed selector
expression, the content is passed to .html() prior to scripts being
removed. This executes the script blocks before they are discarded. If
.load() is called with a selector expression appended to the URL,
however, the scripts are stripped out prior to the DOM being updated,
and thus are not executed.
first try:
<script type="text/javascript">
alert('dfd');
</script>
and then try
<script type="text/javascript">
$(document).ready(function() {
alert('dfd');
});
</script>
and paste the results.
I believe your form comes with ajax. so it is better if you can turn your validation into a function, and call it inside ajax loaded content.