Здравствуйте,
только знакомлюсь с AJAX, поэтому вопрос может показаться глупым, но для меня эта проблема не решается уже неделю :(
При нажатии кнопки показать запускается ajax, выполняется в контенте появляется необходимая страница и сразу вся страниц начинает перезагружаться. что не так? почему он все таки перезагружается????
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script>
function showContent(link) {
var cont = document.getElementById('cart');
var loading = document.getElementById('loading');
cont.innerHTML = loading.innerHTML;
var http = createRequestObject(); // создаем ajax-объект
if( http ) {
http.open('GET', link,true); // инициируем загрузку страницы
http.onreadystatechange = function () { // назначаем асинхронный обработчик события
if(http.readyState == 4) {
if (http.status == 200) {
cont.innerHTML = http.responseText;
}// присваиваем содержимое
else { cont.innerHTML = "Загрузка не удалась: " + http.status; }
}
}
http.send(null);
} else {
document.location = link; // если ajax-объект не удается создать, просто перенаправляем на адрес
}
}
// создание ajax объекта
function createRequestObject() {
var Request = null;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (CatchException)
{
Request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if (!Request)
{
alert("Невозможно создать XMLHttpRequest");
}
return Request;
}
</script>
</h:head>
<h:body>
<div class="block">
<!--Заголовок-->
<div class="header" align="center">Система информационного обеспечения органов государственной власти </div>
<!--Меню навигации-->
<ul class="css-menu-3">
<li><a href="index.xhtml" class="selected">Текущая обстановка</a></li>
<li><a href="directory.xhtml">Справочники</a></li>
<li><a href="reports.xhtml">Отчеты</a></li>
<li><a href="#">Раздел</a></li>
<li><a href="#">Еще раздел</a></li>
</ul>
<div class="content">
<!--Карта-->
<h:form>
<div id="cart">
<iframe src="http://www.openstreetmap.org/export/embed.html?bbox=34.98046875000001%2C50.035973672195496%2C59.50195312500001%2C57.856443276115066&layer=mapnik"
frameborder="0" style="border:0" ></iframe>
</div>
<div id="loading" style="display: none">
Идет загрузка...
</div> </h:form>
<!--Параметры-->
<div class="left">
<p:accordionPanel>
<p:tab title="Виды перевозок">
<p:selectManyCheckbox class="grid" value="#{checkboxView.selectedModesOfTransport}" layout="grid" columns="2" style="text-align: left">
<f:selectItems value="#{checkboxView.modesOfTransport}"/>
</p:selectManyCheckbox>
</p:tab>
<p:tab title="Районы и города">
<p:selectManyCheckbox class="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="2" style="text-align: left">
<f:selectItems value="#{checkboxView.cities}"/>
</p:selectManyCheckbox>
</p:tab>
<p:tab title="Маршруты">
<p:selectManyCheckbox class="grid" value="#{checkboxView.selectedRoute}" layout="grid" columns="4" style="text-align: left">
<f:selectItems value="#{checkboxView.route}"/>
</p:selectManyCheckbox>
</p:tab>
<p:tab title="Нарушения">
<p:selectManyCheckbox class="grid" value="#{checkboxView.selectedOffense}" layout="grid" columns="1" style="text-align: left">
<f:selectItems value="#{checkboxView.offense}"/>
</p:selectManyCheckbox>
</p:tab>
</p:accordionPanel>
<p:button onclick="showContent('directory.xhtml')" value="Показать" >
</p:button>
<p:button id="clean" value="Очистить" >
</p:button>
</div>
</div>
<div class="clear"></div>
<!--Подвал - Footer-->
<div class="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">Техническая поддержка</a></p>
</div>
</div>
</h:body>
</f:view>
</html>
