load a jsp in a dialog and div

Question

I know this might be a duplication question, but I couldn't find the answer for this simple question. I want to load a new jsp file in a dialog and a div.

Structure:
 -WebContent
   -jsp
     -viewfolder
       -helloworld.jsp
       -helloworldedit.jsp
       -newworld.jsp

let's say I have helloworld.jsp which is loaded from request dispatcher. I want to load newworld.jsp in a div tag in helloworld.jsp.

<div id="result"></div>

$('#result').load('/jsp/viewfolder/newworld.jsp');

Tried the above code, didn't work.

I have also tried to load a jsp page into a dialog and this one has failed too.

<button id="button">button</button>
<div id="dialog"></div>

$('#button').on("click", function() {
        $('#dialog').load('/jsp/viewfolder/helloworldedit.jsp').dialog();
    });

The question I have is, this is the right way to call the jsp page or do I have to load the page from request dispatcher using ajax.

To test if the path is correct, I tried to put a calendar.gif in the same folder and I was able to reach it from the context.

http://localhost:port/.projectcontext/jsp/viewfolder/calendar.gif.

Note that in your code above, you're trying to select `result` elements rather than the element with id="result". Is there any reason why you couldn't just use server side includes? — Tap, Oct 12 '14 at 22:39

PeterKA · Answer 1 · 2014-10-13T00:17:09.927

0

You have to wait for DOM ready event:

$(document).ready(function() {
    $('#button').on("click", function() {
        $('#dialog').load('/.projectcontext/jsp/viewfolder/helloworldedit.jsp').dialog();
    });
});

edited Oct 13 '14 at 00:17

answered Oct 12 '14 at 23:54

PeterKA

24,158
5
26
48

Any errors? If your JS is in the JSP page, is it enclosed in `script` tags? – PeterKA Oct 12 '14 at 23:59
What is the absolute `URL` of the `jsp` page you're trying to load? – PeterKA Oct 13 '14 at 00:07
`http://localhost:port/.projectcontext/jsp/viewfolder/helloworldedit.jsp` This should be absolute URL. But I can't open the jsp page – user525146 Oct 13 '14 at 00:16
Then you want to use the `URL` `/.projectcontext/jsp/viewfolder/helloworldedit.jsp` or the absolute URL or if this page is in the same folder as the one loading it use, `helloworldedit.jsp`. – PeterKA Oct 13 '14 at 00:18
I also tried `{request.contextPath}/jsp/viewfolder/helloworldedit.jsp`. this didn't work either. All I get is `500 Internal Server Error` And also `helloworldedit.jsp` which didn't work either. – user525146 Oct 13 '14 at 00:21

score 0 · Answer 2 · answered Oct 13 '14 at 19:51

Try below code :-

Suppose you have a div in newworld.jsp which contains all data which you want to load in another div which is present in helloworld.jsp

newworld.jsp

<!doctype html>
<html>
    <body>
        <div id="target">
            <!-- other HTML controls -->
        </div>
    </body>
</html>

helloworld.jsp

<a href="#" onclick="loadPage();">Click Me</a>
<div id="page"></div>

<script>
    function loadPage(){
        $('#page').load('newworld.jsp #target');

        or
        // If you choose this method then give path of JSP to be loaded in
        // anchor tag
        $('#page').load($(this).attr('href'));
        return false;
    }
</script>

OR

You can use JSP include tag like this

<div id="page" style="width:300px; height:300px;">  
    <jsp:include page="path of the page to be loaded"></jsp:include>  
</div>

load a jsp in a dialog and div

2 Answers2

Linked