'load a jsp in a dialog and div

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


Solution 1:[1]

You have to wait for DOM ready event:

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

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 OO7

Related Questions