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?.
Related
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.
When i add same code in jsp itself its working for me
like
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
<link href="<c:url value="/resources/css/jquery.dataTables.css" />"
rel="stylesheet">
<link href="<c:url value="/resources/demo.css" />" rel="stylesheet">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript"
src="http://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" language="javascript"
src="<c:url value="/resources/js/jquery.dataTables.js" />">
</script>
<script type="text/javascript" language="javascript"
src="<c:url value="/resources/demo.js" />">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
/* "ajax": '<c:url value="/resources/data/arrays.txt" />' */
"ajax": "http://localhost:8080/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
"processing": true,
"serverSide": true,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "createdDate" }
]
} );
} );
</script>
</head>
<body>
When i remove that ajax code and put it in js file its not working
Please give me some idea why its not getting called.
Error i got at java script level is, url got 404 error
From your question ajax is working. Problem is the URL(Since response code is 404). I think this should solve your problem.
instead of
"ajax": "http://localhost:8080/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
simply use
"ajax": "/SpringRestExample-1.0.0-BUILD-SNAPSHOT/rest/emp/draw",
Domain name added automatically.
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 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
I got two files, one file called "TitleLinkCookie.html",when I click on some link are creates a cookie named "NewTitle" . with value innerHTML in our case, "Hello world php 1"/2/3.and is working well. The second file called "showCodePhp.html", it is needed to receive the cookie title and display it in h3 tag id="TitleField", innerHTML, from some reason it is not working as I want. Thanks for any help.
TitleLinkCookie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<META NAME="Description" CONTENT="Guide,Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript, jQuery,Html5,Framework,php,photoshop,design" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Link guide</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<STYLE type="text/css">
a { color:red; margin:5px; cursor:pointer; }
a:hover { background:yellow; }?
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
$('a').each(function() {
$(this).click(function() {
var varibaleTitle=$(this).html();
setCookie(varibaleTitle);
});
});
function setCookie(varibaleTitle){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+1);
var NewTitle = varibaleTitle;
document.cookie = "NewTitle=" + NewTitle + ";path=/;expires=" + expireDate.toGMTString();
alert(varibaleTitle)};//end function setCookie
});// document ready
</script>
</head>
<body >
<p><a id="link1" href="showCodePhp.html" >Hello world php 1</a></p>
<p><a id="link2" href="showCodePhp.html" >Hello world php 2</a></p>
<p><a id="link3" href="showCodePhp.html" >Hello world php 3</a></p>
</body >
</html>
showCodePhp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<!--<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>-->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
str2 = "Your Title is : " + str;
}//end reedCookie
});// document ready
</script>
</head>
<body style="background: white; font-family: Helvetica">
<p>Back to Home</p>
<p><h3 id="TitleField"></h3>Title : </p>
<pre class="brush: php;">
<?
// Hello world in PHP
print("Hello World");
?>
</pre>
<body>
</html>
You stated that you need to change the innerHTML of the HTML element "TitleField" but actually you didn't set it!.
I modified you script to set it below :
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
$("#TitleField").html("Title :"+ str );
}//end reedCookie
});// document ready
</script>