why does message box not appear? Many thanks.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
</script>
</head>
<body>
<span>my test</span>
</body>
</html>
You must wrap in in a $(document).ready.
Otherwise it won't be able to find body because it hasn't loaded yet.
$(document).ready(function() {
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
})
Related
I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover=alert('Hello');
</script>
</body>
</html>
The property onmouseover expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: alert("hello"). So when the document loads, it evaluate that expression and the alert is shown, then a null value is assigned to the onmouseover property, that is the reason the alert only shows once.
For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" style="border: 1px solid red">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function() {alert('Hello')};
</script>
</body>
</html>
You need to put it in a function like so.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function(){alert('Hello')};
</script>
</body>
</html>
try to add onmouseover="mouseover()" in <p>
function mouseover() {
alert('Hello');
}
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" onmouseover="mouseover()">as</p>
<script type="text/javascript">
function mouseover() {
alert('Hello');
}
</script>
</body>
</html>
The issue is, the () after the alert function causes the function invocation on page load and you see the alert. Call the function inside of an anonymous function which will ensure that the function will be called only when the event (onmouseover) is fired:
document.getElementById("k").onmouseover = function(){alert('Hello')};
<a>dasdasd</a>
<p id="k">as</p>
Try this (with JQuery):
$(document).ready(function(){
$("p").mouseover(function(){
alert("Hello");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
Hi I am trying to run Alert function on page load using jquery but it's not working for me.
Please let me know if I am wrong somewhere thanks.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Image loaded.");
})(document);
});
</script>
</head>
<body>
<div id="alertcall"></div>
</body>
</html>
Not sure I understand what you are doing, so you are trying to get jQuery to output an alert? Perhaps this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="alertcall"></div>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Div loaded");
})(document);
});
</script>
</body>
</html>
Try using this. You can check whether the element with id alertcall exists or not.
<script>
$(document).ready(function () {
if($('#alertcall').length){
alert("image loaded");
}
});
</script>
Looks like you are trying to perform some action when image loads. Use image instead of div.
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
Change image URL to test again to avoid cached image
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
I'm trying to use jquery get method
this is jtest.html:
<!DOCTYPE html>
<html>
<body>
fdsffdsf
</body>
</html>
and this is the page that should get the data from jtest.html:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
<body>
<h1>My First Heading</h1>
</body>
</html>
Nothing happens when I run it please help
Try Jquery code to get data from another page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
jQuery.get('jtest.html', null, function(tsv) {
alert(tsv);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
You need to put your <script> inside <html> and <head> tag:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
Also make sure that jtest.html is located at the same directory as your current HTML file
You're missing the closing </script> tag when loading the jquery library!
Try this work perfectly:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</body>
</html>
I am just learning jQuery and the page with the following code does not load. Any help will be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>First jQuery-Enabled Page</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
alert("The page just loaded!");
});
</script>
</head>
<body>
</body>
</html>
$(document).ready(function() {
alert("The page just loaded!");
});
remove quotes from around document in jquery selector.
I am trying to access content inside a html file that I loaded into a div using jquery.load.
My index page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
</div>
</body>
</html>
My script so far looks like this:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(){
alert($(this).attr("id"));
});
});
The content.html page:
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<h1 id="header1">
Content
</h1>
<p>
This is a paragraph
</p>
<p>
This is another paragraph
</p>
</body>
</html>
So what I want to happen is:
When I click on the tag in the content div it should display that tag's id - namely "header1", but currently its just displaying "content". How can I achieve this?
Thank you in advance
Bind the event handler to every element in content.
$(document).ready(function() {
$("#content").load("content.html");
$("#content, #content *").click(function(e){
alert(this.id);
e.stopPropagation();
});
});
Or let the events propogate:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(e){
alert(e.target.id); //may return undefined if no id is assigned.
});
});
Working Example: http://jsfiddle.net/5JmsP/