Display another jsp content in current jsp page upon a hyperlink click

问题

I am developing a web based application in which i have two hyperlinks in the left side of the page, and what i'm looking for is that when i click on the one hyperlink it should load the content of another.jsp and display it over present.jsp and if I click next hyperlink it should do the same for third.jsp over present.jsp .

I found something on stackoverflow like:-

javascript--

    function showItem(url) {
$('#right-pane').load(url);

}

link--< a href="showItem('another.jsp)">item 1

where "right-pane" is the id of div tag where i want the another jsp content to be displayed.

< div id="right-pane" style="position: absolute; width: 988px; height: 649px; z-index: 2; left: 193px; top: 4px">

< /div>

But when i am clicking on item 1 its saying-- The requested resource (/test1/showItem('another.jsp')) is not available.

I am using apache tomcat as a server.

Thanks, Arshad

回答1:

add a class or id t your link

 < a href="'another.jsp" class="link1">item 1</a>

Add this to your header:

$(document).ready(function() {
    $(".link1").click(function(event){
       event.preventDefault();
       var url =$(this).attr("href");
       $('#right-pane').load(url);
    });
});

try change this<script type="text/javascript" src="jquery.js"> line to

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

tryed and tested this in ie9:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
    $(".link1").click(function(event){
       event.preventDefault();
       var url =$(this).attr("href");

        $('#right-pane').load(url, function(data) {
        console.log(data);
    });
       console.log(url);
    });
});
        </script>
    </head>
    <body>
        <div id="layer5" class="style2" style="position: absolute; width: 79px; height: 17px; z-index: 1; left: 11px; top: 15px"><a href="test2.html" class="link1">item 1</a></div> 
        <div id="right-pane" style="position: absolute; width: 988px; height: 649px; z-index: 2; left: 193px; top: 4px"></div>
    </body>
</html>

来源：https://stackoverflow.com/questions/9719222/display-another-jsp-content-in-current-jsp-page-upon-a-hyperlink-click

标签

html

jsp-tags