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:

Solution 1:

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>

Solution 2:

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 iframe

Looks 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:

HTML snippets

<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>

Solution 3:

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);
    }
});

Solution 4:

1) Create a <div id='someID'></div> while initial page load

2) 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

Solution 5:

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 >

JavaScript Site