Отображение другого содержимого JSP на текущей странице JSP по щелчку гиперссылки - PullRequest
Новая
       4

Отображение другого содержимого JSP на текущей странице JSP по щелчку гиперссылки

0 голосов
/ 15 марта 2012

Я занимаюсь разработкой веб-приложения, в котором у меня есть две гиперссылки в левой части страницы, и я ищу, чтобы при нажатии на одну гиперссылку он загружал содержимое другого .jsp и отобразить его поверх present.jsp, и если я нажму на следующую гиперссылку, он должен сделать то же самое для third.jsp вместо present.jsp.

Я нашел что-то в stackoverflow вроде: -

javascript-- 

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

}

ссылка - элемент 1

где "right-pane" - это идентификатор тега div, где я хочу, чтобы отображался другой контент jsp. 

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

< /div>

Но когда я нажимаю на item 1 , его высказывание-- Запрашиваемый ресурс (/test1/showItem('another.jsp ')) недоступен.

Я использую Apache Tomcat в качестве сервера.

Спасибо, Аршад

1 Ответ

3 голосов
/ 15 марта 2012

добавить класс или указать вашу ссылку 

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

Добавьте это в шапку: 

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

попробуйте изменить эту <script type="text/javascript" src="jquery.js"> строку на 

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

пробовал и проверял это в 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>
...