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:

<divid="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

<spanid=confirmSpan></span><scriptlanguage="Javascript">functionxmlhttpPost(strURL, queryStr) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari, opera etcif (window.XMLHttpRequest) {
        self.xmlHttpReq = newXMLHttpRequest();
    }
    // IEelseif (window.ActiveXObject) {
        self.xmlHttpReq = newActiveXObject("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);
}


functionupdatepageConfirm(str){
    document.getElementById("confirmSpan").innerHTML = str;
}
functionlogout1(){
xmlhttpPost("confirm.html");//http://sel2in.com/pages/prog/html/ajax/confirm.html", "")
}
</script></head><body><formid="search"action="/search"method="get"><inputtype=buttononclick=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

<spanid = 'logoutConfirmSpan'></span><script>// call ajax, with the response call setHtmlForConfirmfunctionsetHtmlForConfirm(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

<spanid=confirmSpan></span><scriptlanguage="Javascript">functionlogout1(){
    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><formid="search"action="/search"method="get"><inputtype=buttononclick=logout1()value="Do Action">
</form >

JavaScript Creator