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
Related
I have the following code in my index.jsp :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="123lettersandnumbers123.apps.googleusercontent.com">
<link href="<s:url value="/assets/bootstrap/css/bootstrap.css" />" rel="stylesheet">
<link href="<s:url value="/assets/bootstrap/css/bootstrap-reboot.css"/>" rel="stylesheet">
<link href="<s:url value="/assets/bootstrap/css/bootstrap-grid.css"/>" rel="stylesheet">
<script src="<s:url value="/assets/jquery/jquery-3.3.1.js"/>"></script>
<script src="<s:url value="/assets/bootstrap/js/bootstrap.js"/>"></script>
<script type="text/javascript">
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My test</title>
</head>
<body>
This is the index
<br>
<br>
<div class="g-signin2" data-onsuccess="onSignIn" ></div>
</body>
</html>
And this is my Google console configuration:
Javascript origin : http://localhost:8080
Authorized redirect URIs : http://localhost:8080/mytest/success.jsp
When I press the "sign in" button the google account popup appears and, upon successful authentication, there is no redirection, it just stays in index.jsp. The only thing that changes is the button caption (to "signed in"). What am I doing wrong?.
Newbie to HTML...creating a custom furniture website with custom design tab which helps in designing your own furniture..now i wanted to capture the image clicked(out of many) by user in my main.html page and display the selected image in secondary.html page when the user navigates to second page to select the color for the sofa...Need help!
main.html
<div class="red">
<div class="blue">4 Seater <img src="images/4_Seater_Default.jpg" alt="4_Seater_Default.jpg" onclick="showImage('4_Seater_Default.jpg');" /></a></div>
<div class="blue">3 Seater<img src="images/3_Seater_Default.jpg" alt="3_Seater_Default.jpg" onclick="showImage('3_Seater_Default.jpg');" /></a></div>
<div class="blue">2 Seater<img src="images/2_Seater_Default.jpg" alt="2_Seater_Default.jpg" onclick="showImage('2_Seater_Default.jpg');" /></a></div>
<div class="blue">1 Seater<img src="images/1_Seater_Default.jpg" alt="1_Seater_Default.jpg" onclick="showImage('1_Seater_Default.jpg');" /></a></div>
Page 1:
<%# 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>Page 1</title>
<script type="text/javascript">
function filename(){
var fullPath = document.getElementById("image").src;
var filename = fullPath.replace(/^.*[\\\/]/, '');
var fileid = filename.split("\.")[0];;
window.location.href = "test2.jsp?imgid="+fileid;
}
</script>
</head>
<body>
<IMG id="image" SRC="images/1.png" width="100px" alt="Logo" onclick="filename();">
</body>
</html>
Page 2:
<%# 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>Page 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imageId = location.search.split('imgid=')[1];
document.getElementById('image').src = "images/"+imageId+".png"; \\it will set the value of the img src to 1.png which is passed from the previous page
});
</script>
</head>
<body>
<IMG id="image" SRC="images/2.png" width="400px">
</body>
</html>
EDIT
In Page1 onclick event we are simply calling the filename() function. This function in turn is appending the imageId in the url of the second page. Now, when you land on the second page, the $(document).ready(function(){}) is taking the imageId from the url and setting the SRC of the <IMG> tag with the image 1.png.
Try below code:
function showImage(imagePath){
window.location.href= "www.yourdomain.com/yourDirectory/path/showImage?image_path="+imagePath;
}
and on the above url you can use this path to show image + any other content, whatever is required.
$(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>
Can anyone explain me why this piece of code does not work in Eclipse. I tried to compile the code on this site http://jsfiddle.net and it's working.
<%# 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">
<script type="text/javascript">
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#day_number');
if (checkbox.attr('checked') !== undefined){
dependent.show();
} else {
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" id="checker"><br>
<input type="text" id="day_number">
</body>
</html>
I am using the following code.I want to pass property bgcolor as argument
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function myFunction(key,valu)
{
document.body.key=valu;
}
</script>
</head>
<body onLoad="myFunction('bgColor','red');">
</body>
</html>
But it is not working.
you can try
document.body[key]=valu;
key is string in this case.
If you're passing a property as a string, you must use the square-bracket notation rather than dot notation:
function myFunction(key,valu)
{
document.body[key]=valu;
}
I suggest this since bgColor and onload attribute is so '90s
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setStyle(key,valu) {
document.body.style[key] = valu;
}
window.onload=function() {
setStyle("backgroundColor","red")
}
</script>
</head>
<body>
</body>
</html>
It won't work ever,
try this
function change(key , value)
{
document.body.setAttribute(key, value);
}