Почему после выполнения AJAX страница перезагружается?

0
26 окт 2016 08:07
Здравствуйте,
только знакомлюсь с 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) {
                event.preventDefault();
		var cont = document.getElementById('cart');
		var loading = document.getElementById('loading');

		cont.innerHTML = loading.innerHTML;

		var http = createRequestObject();					// создаем ajax-объект
		if( http ) {
			http.open('GET', link);							// инициируем загрузку страницы
			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&amp;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>

Ответов: 1

0
26 окт 2016 10:48
По идее, у Вас в консоли браузера должны быть ругательства на
event.preventDefault();

из 14-й строки, так как объект event не определен. Если это так, то эту строку надо убрать - она не поможет.

Попробуйте один из двух способов (должны работать оба):
<p:button onclick="showContent('directory.xhtml');return false" value="Показать" >

или
<p:button onclick="event.preventDefault();showContent('directory.xhtml')" value="Показать" >
Модераторы: Нет
Сейчас эту тему просматривают: Нет