How to include a jsp inside another jsp using javascript
Question
I have a button logout. Once logout is clicked I need to show another page. How can I do this using JavaScript? Can anyone please help me?
My Code:
<s:form name="LogoutAction"
id="LogoutAction" action="logout">
<span class="inlayField2">
<s:a href="logout" cssClass="planTabHeader" id="logoutId"> <img src="../../KY/images/common/header/lock.png" alt="logout" style="border: none;background-color: transparent;" /> Log out</s:a></span>
</s:form>
I tried this:
$('#logoutId').click(function(event) {
$('#logoutdiv').load('ConfirmationPopup.jsp');
});
6 answers
solution1
3 2013-04-23 08:02:33
You could use ajax to get the html from the 2nd jsp and then append to the DOM or to the innerHTML of a element.
Main Page.jsp
<span id=confirmSpan></span>
<script language="Javascript">
function xmlhttpPost(strURL, queryStr) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari, opera etc
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("no ajax")
return
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepageConfirm(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(queryStr);
}
function updatepageConfirm(str){
document.getElementById("confirmSpan").innerHTML = str;
}
function logout1(){
xmlhttpPost("confirm.html");//http://sel2in.com/pages/prog/html/ajax/confirm.html", "")
}
</script>
</head>
<body>
<form id="search" action="/search" method="get">
<input type=button onclick=logout1() value=logout>
</form >
Sample page with confirm code -> any valid html for the div could be confirm.jsp Do action ... Are you sure?
//todo form here html of span/ pop up/ script/ css -> just like an iframeLooks like you want to show a confirmation - some UI asking do you really want to logout?
Best way for that would be to make an empty span with id "logoutConfirmSpan" then on click of logout, do the ajax (async mode -> false so it happens inline) get the html markup and set it to the innerHTML of the span
The html should be valid such that it makes the UI appear and the form to really logout.
See Replace inner HTML of a div with Ajax response tells you how to use ajax with jQuery
Simple sample:
<span id = 'logoutConfirmSpan'> </span> <script> // call ajax, with the response call setHtmlForConfirm function setHtmlForConfirm(req) { document.getElementById('logoutConfirmSpan').innerHTML = req.responseText; } //req.responseText should have the html to show the confirm UI and form to submit yes/ no </script>
solution2
2 2013-04-23 07:26:38
You can't include a JSP in respone to a click on the client side because it's a server-side technology. You could include the desired HTML in the page before it's sent, hide that area with CSS, and then make it visible in response to a mouse click using JavaScript.The include would already have happened on the server before the page was sent to the client. You can have something like this:
<div id="confirmPopup" style="display:hidden;">
<%@ include file="ConfirmationPopup.jsp" %>
</div>
<script>
$('#logoutId').click(function(event) {
document.getElementById("confirmPopup").style.display="block";
});
</script>
solution3
2 2013-04-23 08:57:46
You can use a simple GET request to fetch the HTML rendered by the secondary .jsp page. Basically, from within Ajax, with jQuery you can do:
$.get({
url: "mysite.com/otherpage.jsp",
data: "some data you want to send, optional",
success: function(data, textStatus, jqXhr)//the response data, the ajax request status and the ajax request object itself {
$('#someDiv').html(data);
}
});
solution4
1 2013-04-23 10:06:02
1) Create a
<div id='someID'></div>while initial page load2) on button click, thru javascript create an iframe with your new jsp url
3) Once the iframe content loaded show it as a popup perhaps in dialog window
solution5
0 2013-04-23 11:12:52
Another way you can do it to keep a span and on click do: http://sel2in.com/pages/prog/html/ajax/aPage2.html1
<span id=confirmSpan></span>
<script language="Javascript">
function logout1(){
iconfirmSpan = document.getElementById("confirmSpan")
if (!confirmSpan){
alert("Error no confirmSpan contact support!");
}
confirmSpan.innerHTML = "<iframe src=\"http://sel2in.com/pages/prog/html/ajax/confirm.html\" height=400 width=700></iframe>"
//in real can keep height 1 width 1 and location off page if you want it just to load elements, scripts etc
}
</script>
</head>
<body>
<form id="search" action="/search" method="get">
<input type=button onclick=logout1() value="Do Action">
</form >
solution6
0 2013-04-24 09:14:24
AJAX is what you are looking for.
I strongly suggest you to perform AJAX calls with jQuery ( showcase -> div ) , but in Struts2 you can try with the deprecated Dojo plugin in a second, without the need to download any library, just to make you an idea.
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<head>
<sx:head/>
<script>
function loadAjax(){
var div = dojo.widget.byId("myDiv");
div.href = "yourAjaxAction.action";
div.refresh();
}
</script>
</head>
<body>
<input type="button"
value="Include a JSP fragment dynamically"
onclick="loadAjax();"/>
<sx:div id="myDiv"> </sx:div>
</body>
And then, your yourAjaxAction.action must return on SUCCESS the JSP snippet you want to include.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.