Home/ Questions/Q 7635883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:32:16+00:00

I am developing a web based application in which i have two hyperlinks in

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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