$(document).ready(function()) is not working in my jsp.I have tried in many forms.
My code is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="scripts/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquerymin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiii");
});
</script>
</head>
<body>
</body>
</html>
Try This... I have Tested, working fine....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiiiii.........");
});
</script>
</head>
<body>
</body>
</html>
$(Document).ready is works when loaded JQuery library.
For example:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hello World!!!");
});
</script>
Related
I can't even get this to work. If I put a debug on the first line of javascript it never gets to it. I'm stumped.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
</script>
</body>
</html>
You just forgot to invoke the function like this: Hello(). Here is the working snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>
Need to call the function as follows
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello(); //----> function call
</script>
Just call the function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>
I'm learning how to load and modify web content on client side without page load and postbacks.
I want to load the content of Controls/content.html into the div just like i saw on multiple exemples :
here's the div and button :
<input type="button" id="btnHtm" onclick="Content()" name="Menu" value="HtmAppear" />
<div id="htmlCont"></div>
here's the content :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h4> HELO </h4>
</body>
</html>
Here's the file path :
,
Edit : deleted other trys
Here's my fourth try :
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<script language="javascript" type="text/javascript" >
$(document).ready(function content() {
$('#htmlCont').load("Controls/content.html");
});
</script>
Your selector need a #. Try this:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#htmlCont').load("Controls/content.html");
});
</script>
I am trying to call a javaScript function that's in .../js/index.js file to .../index.jsp file.
Any suggestion would be helpful.
Here is code within both file:
index.js
function testing() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
};
};
index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="js/index.js">
<!-- I want to call testing(); function here -->
</script>
</body>
</html>
First reference the external index.js file and then call the function in an inline script element:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
testing();
</script>
</body>
</html>
By the way you have an error in your test.js function. You shouldn't put a ; after if/else conditions, neither at the end of your function declaration. The correct syntax is:
function testing() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
}
}
or:
var testing = function() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
}
};
you can do like this
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/index.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type = "button" onclick = "javascript:testing()"/>
</body>
</html>
It is easiest
what on earth am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draggable crop</title>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image_outline').resizable();
});
</script>
<style type="text/css">
.image_outline {
border: dashed 1px #000;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="image_outline"></div>
</body>
</html>
Here's the code on jsfiddle: http://jsfiddle.net/dAHt8/
Why is the resizeable plugin not making the div resizeable?
Works fine once you add the right CSS link:
jsFiddle example.
For that jsFiddle I linked to the hosted jQuery UI CSS at: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css
I'm playing with shadowbox and I want to launch it when user's landing on the index page of my web site.
I can use the shadowbox like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
My Image
</body>
</html>
I tried to make a onload function but it doesn't work (I can't set the link to the picture on it?):
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {onPageLoad()});
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clemz</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup
skipSetup: true
});
window.onload = function() {
// open ASA the window loads
Shadowbox.open({
content: '<img src="image.png" alt="alt" />',
player: "html",
title: "Welcome dude",
height: 502,
width: 350
});
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Works proprely ;-)