загрузка страницы

Статус
В этой теме нельзя размещать новые ответы.

bahramzade

Некто
Нашел в инете загрузка страницы без перезагрузки всего , но есть одна проблема использую php
index.php?act=test , index.php?act=test2

Скажем наверу стоит меню <li></li>

при подгрузке test 2 на одном php грузится еще раз меню ,как можно реализовать чтобы не грузило часть меню второй раз?
результат страница 1-4 стоит сверху,второй раз грузит из за того что один файл.

2155

Код:
<script>
    function showContent(link) {
        var cont = document.getElementById('content');
        var loading = document.getElementById('loading');
        cont.innerHTML = loading.innerHTML;   
        var http = createRequestObject();
        if( http ) 
        { http.open('get', link);
            http.onreadystatechange = function () 
            {   if(http.readyState == 4) 
                {   cont.innerHTML = http.responseText;  }    }
            http.send(null);  }
        else 
        {  document.location = link;   }   }
    // ajax объект
    function createRequestObject() 
    {  try { return new XMLHttpRequest() }
        catch(e) 
        {  try { return new ActiveXObject('Msxml2.XMLHTTP') }
            catch(e) 
            {   try { return new ActiveXObject('Microsoft.XMLHTTP') }
                catch(e) { return null; }   } } }
</script>

<li style="color:blue"><a href="#" onClick="showContent('page1.html')">page 1</a></li>
<li style="color:green"><a href="#" onClick="showContent('page2.html')">page 2</a></li>



<div id="content">
    <!-- CONTENT -->
</div>
<div id="loading" style="display: none">
 loaading...
</div>


<!-- deafult page -->   
<script>
showContent('page1.html')
</script>
 
  • Like
Реакции: Cro

web-coder

Некто
В php проверяйте, если запрос сделан через ajax, то возвращайте не всю страницу, а только часть с контентом.
 

oxy

Продвинутый
🏆
📜
💎
  • Надмозг
Если я правильно понимаю то при каждой перезагрузке к меню добавляются пункты. Так просто чисти старый контент
JavaScript:
var cont = document.getElementById('content');
cont.innerHtml = '';
 
  • Like
Реакции: Cro

web-coder

Некто
Так просто чисти старый контент
Контент и так перезаписывается.
Скорее всего там меню вынесено из блока id="content".
Поэтому нужно либо делать проверку на стороне сервера, и если запрос сделан аяксом, то возвращать только нужный фрагмент страницы.
Либо парсить полученные результаты на клиентской стороне.
 
  • Like
Реакции: Cro

oxy

Продвинутый
🏆
📜
💎
  • Надмозг
Контент и так перезаписывается.
Скорее всего там меню вынесено из блока id="content".
Поэтому нужно либо делать проверку на стороне сервера, и если запрос сделан аяксом, то возвращать только нужный фрагмент страницы.
Либо парсить полученные результаты на клиентской стороне.
Ну согласен точно в том что не хватает ответа сервера что бы увидеть картину целиком и что то подсказать)
 

Bayer

Специалист
⚖️
🏆
📜
💎
  • Надмозг
Код:
$(document).ready(function() {
                         
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                          
    });

    $('#nav li a').click(function(){
                                 
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
       
    });

});
Вот так html

Код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li>welcome</li>
        <li>about</li>
        <li>portfolio</li>
        <li>contact</li>
        <li>terms</li>
    </ul>
    <div id="content">
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>
 

Вложения

  • 51.6 KB Просмотры: 1

bahramzade

Некто
Код:
$(document).ready(function() {
                        
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                         
    });

    $('#nav li a').click(function(){
                                
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
      
    });

});
Вот так html

Код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li>welcome</li>
        <li>about</li>
        <li>portfolio</li>
        <li>contact</li>
        <li>terms</li>
    </ul>
    <div id="content">
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>
2157

Вот как грузит страницу. оргинале все ок
 

bahramzade

Некто
А сам файл у тебя в UTF8 without BOM сохранён или в windows-1251?
После твоего комментария,проверил и решил благодарю.

ну если такие истины рассказывать - то вообще смысл тс занимается играми )))
Таких умников как ты надо убирать с форумов :)
.безОбид.php_
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху