How can an external javascript file be injected into a div. When I try to set it using below code, the div 'toupdate' is not updated with new javascript file.
<script type="text/javascript">
$(document).ready(function () {
$('#toupdate').html('<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>');
});
</script>
<body>
<div id="toupdate">
<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
</div>
</body>
Your replacement code is being executed before the div 'toupdate' has loaded, you either need to move the <script> tag to after the div or put you replacement code within a $(document).ready() function like so:
$(document).ready(function () {
$('#toupdate').html('<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>');
});
EDIT:
tested and working example:
$(document).ready(function() {
$('#toupdate').children('script').attr('src', 'http://static.polldaddy.com/p/5968383.js');
});
JSfiddle: http://jsfiddle.net/m7q3H/45/
you could use the $.getScript("URL") function
definition
Related
I am using .load() method for common header. But I want add dropdown in header for user profile.
Always, Script not working when I use .load() method for includin header.
Please don't suggest me to use PHP to include header file. I just want to resolve why jquery is not work when we use .load() method.
HTML File :-
<html>
<head>
<title>How to include HTML page with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$( "#header" ).load( "header.html" );
});
</script>
</head>
<body>
<div id='header'></div>
<div class='content'>Content</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<script src="../vendor/bootstrap-5.0.2-dist/js/bootstrap.min.js"></script>
<script src="../assets/js/script.js"></script>
</body>
</html>
Header Code :-
<div class="user-profile"><img class="user-pic rounded-circle" src="assets/img/user.jpg"></div>
Script :-
<script>
$(document).ready(function(){
$('.user-profile').click(function(){
alert('test')
});
});
</script>
You can try like this:
Set a name for the function
<script>
function f()
{
$('.user-profile').click(function(){
alert('test')
});
};
Then call the function on when load is finished like this:
$( "#header" ).load( "header.html", function() {
f();
});
I want to change the content of the p tag after three seconds using setInterval() method. Then after three seconds I want to change the content inside of the p tag, with a new interval of 5 seconds. This is my code snippet:
background.js
var notify;
var word=function(){
$.get("http://localhost/chrome-notification/dosya.php", function (data) {
$('#container').html(data);
});
};
setInterval(word,3000);
setInterval(function(){
$.get("http://localhost/chrome-notification/", function (response) {
notify=$(response).getElementsByTagName('p')[0].innerHTML;
});
},5000);
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="background.js"></script>
<title>Vocabulary</title>
</head>
<body>
<p id="container">
</p>
</body>
</html>
This can be done in pure js.
var text = document.getElementById('container').innerHTML;
Is this what you need?
Since you are using jQuery, you can simply do $(response).find('p:eq(0)').html()
I've written some more examples here https://jsbin.com/modaxayaki/edit?html,js,console
If i understaned good, i would recommend adding CSS and linking it to html.
(If is that for what you need it for)
Make tag in css and customize it
This question already has answers here:
Why am I seeing 'function not defined' on my error console when I'm sure my function IS defined?
(3 answers)
Closed 4 months ago.
I am new to JavaScript. When I am trying the following code my js files are not getting linked and the JavaScript code from the html page is not executed :
Both html and JavaScript files are at the same path.
MY html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;>
<title>JS Code</title>
</head>
<body>
HTML
<script type="text/javascript" src="script.js">
debugger;
document.write("HI i am from HTML with js code")
nowCall1();
function nowCall1(){
document.write("-Js.")
//peakOil(changeCivilisationCallback);
}
</script>
</body>
</html>
script.js:
function peakOil(callback) {
document.write("HI i am from Js");
callback(); // the parentheses mean the function is executed!
}
function changeCivilisationCallback(){
document.write("HI i am from changeCivilisationCallback");
}
function nowCall(){
document.write("Js.")
//peakOil(changeCivilisationCallback);
}
But when I try to remove scr attribute put all code in html script is working. Why when I try to put code in js file, it is not executed. I am facing problem in debugging in google chrome browser.
Please help me understand javas cript, thanks in advance.
if the src attribute is present on the script tag the content of the scrip tag will be ignored, so you need to add your external script on a seperate script tag.
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
//code here
</script>
You should either link to an external script file with the script tag, or write the code inside the tag, you can't do both (but of course you can have more than one script tag).
You can find a note on this on w3schools:
If the "src" attribute is present, the <script> element must be empty.
This is the corrected JavaScript.
JS code from HTML:
document.write("HI i am from HTML with js code");
nowCall1();
function nowCall1() {
document.write("-Js.");
//peakOil(changeCivilisationCallback);
}
script.js:
function peakOil() {
document.write("HI i am from Js");
}
peakOil();
function changeCivilisationCallback() {
document.write("HI i am from changeCivilisationCallback");
}
function nowCall() {;
document.write("Js.")
//peakOil(changeCivilisationCallback);
}
In the HTML you should add the scripts this way:
<script type="text/javascript">
//the rest of the code
</script>
I have missed a " after content="text/html
on the meta tag
With this correction that it work fine,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>JS Code</title>
</head>
<body>
HTML
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
debugger;
document.write("HI i am from HTML with js code");
alert("test1");
document.writeln("\ after alert");
nowCall();
alert("test2");
</script>
</body>
</html>
Keja, Thanks it worked, with your input.
Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>
My webpage has the following code:
<html>
<head>
<title>This is test Page</title>
<script language="javascript" type="text/javascript">
document.getElementById("msg1").innerHTML = document.URL.toString();
</script>
</head>
<body>
<div class="sss">
<p id="msg1"></p>
</div>
</body>
</html>
As you now at the time the script executes the div doesn't exist but I want to put my JavaScript code only In the <head> tag and I won't put it in middle of HTML code.
But this code only works when I put the <script> tag after the <div> tag.
I use VS2010 and firefox 19.0.1
Is there anyway to put code in <head> tag?
Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("msg1").innerHTML = document.URL.toString();
}
</script>
The various tags in your HTML page are loaded and processed in the order in which they appear on the page. Your <script> tag is executed immediately when it is parsed in the <head>. This is before the <body> and the elements inside the <body> are parsed. So, the script tries to reference an element that is not defined at the time it is executed.
Michael Geary is right, in order to execute your code, I'd use jQuery library (a de-facto standard in JS development) and utilize the DOM ready event. This will ensure the code in the handler will execute once DOM is fully loaded.
<script>
$(function(){
$('#msg1').html(document.URL.toString());
});
</script>
I recommend to to use addEventListener like this:
<script language="javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded",() => {
document.getElementById("msg1").innerHTML = document.URL.toString();
});
</script>
Your script uses dom element and must run after the dom loaded.
Wrap your code in a function and call it after dom loaded
function myfunc(){
//code here
}
window.onload = myfunc();