Большая задача - проблемы с обновлением страницы и ajax

У меня есть навигация, которая динамически загружает контент через ajax. Но если я обновляю страницу или посещаю другой URL-адрес и возвращаюсь назад, текущее содержимое отсутствует, и я вижу старое содержимое на первой вкладке меню.

Теперь мне нужно решить эту проблему.

Index.php включает элементы header_registrated.inc.php, navigation.inc.php и main_container.inc.php

index.php:

<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>

header_registrated.inc.php:

<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>

navigation.inc.php:

  <div class="navigation">

    <ul>
        <li id="1">
            <div id="menuImage1" class="menuImage"></div>
            <div class="menuText"><p>Punkt 1</p></div>

            <div class="navigationDart"></div>
        </li>
        <li id="2">
            <div id="menuImage2" class="menuImage"></div>
            <div class="menuText"><p>Punkt 2</p></div>
        </li>
        <li id="3">
            <div id="menuImage3" class="menuImage"></div>
            <div class="menuText"><p>Punkt 3</p></div>
        </li>
        <li id="4">
            <div id="menuImage4" class="menuImage"></div>
            <div class="menuText"><p>Punkt 4</p></div>
        </li>
        <li id="5">
            <div id="menuImage5" class="menuImage"></div>
            <div class="menuText"><p>Punkt 5</p></div>
        </li>
        <li id="6">
            <div id="menuImage6" class="menuImage"></div>
            <div class="menuText"><p>Punkt 6</p></div>
        </li>
    </ul>

</div>

main_container.inc.php:

<div class="mainContainer">

    <div class="containerHeader">

        <div class="contentHeader">


        </div>

    </div>

    <div class="contentContainer">

        <div class="content">

        </div>

        <div class="advertisement">

        </div>


    </div>

</div>

Теперь содержимое div, cnotentHeader и реклама (в файле main_content.inc.php) заполняются через ajax. Также в навигации есть некоторые эффекты jquery, которые также должны быть такими же после обновления страницы.

navigation.js:

$(document).ready(function() {
    $.get('inc/incfiles/content_container/header/1.php', function(data) {
        $('.contentHeader').html(data);
    }); 

    $.get('inc/incfiles/content_container/content/1.php', function(data) {
        $('.content').html(data);
    }); 

    $.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
        $('.advertisement').html(data);
    }); 
    var current = '1.php';
    $(".navigation li").click(function() {
        var quelle = $(this).attr('id') + ".php";

        // the current content doesn't load again
        if(current === quelle) {
            return;
        } 

        current = quelle;

        // content
        $(".content").fadeOut(function() {
            $(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
        })

        // advertisement
        $(".advertisement").fadeOut(function() {
            $(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
        })

        // header
        $(".contentHeader").fadeOut(function() {
            $(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
        })

    });

    $(".navigation li").click(function() {
        $(".menuImage").removeClass("menuImageActive1");
        $(".menuImage").removeClass("menuImageActive2");
        $(".menuImage").removeClass("menuImageActive3");
        $(".menuImage").removeClass("menuImageActive4");
        $(".menuImage").removeClass("menuImageActive5");
        $(".menuImage").removeClass("menuImageActive6");
    });

    $("#1").mousedown(function() {
        $("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
    });

    $("#1").mouseup(function() {
        $("#menuImage1").removeClass("menuImageClick1");  //remove class after mouse button release
    });

    $("#1").click(function() {
        $("#menuImage1").addClass("menuImageActive1");
    });



    $("#2").mousedown(function() {
        $("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
    });

    $("#2").mouseup(function() {
        $("#menuImage2").removeClass("menuImageClick2");  //remove class after mouse button release
    });

    $("#2").click(function() {
        $("#menuImage2").addClass("menuImageActive2");
    });



    $("#3").mousedown(function() {
        $("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
    });

    $("#3").mouseup(function() {
        $("#menuImage3").removeClass("menuImageClick3");  //remove class after mouse button release
    });

    $("#3").click(function() {
        $("#menuImage3").addClass("menuImageActive3");
    });



    $("#4").mousedown(function() {
        $("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
    });

    $("#4").mouseup(function() {
        $("#menuImage4").removeClass("menuImageClick4");  //remove class after mouse button release
    });

    $("#4").click(function() {
        $("#menuImage4").addClass("menuImageActive4");
    });



    $("#5").mousedown(function() {
        $("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
    });

    $("#5").mouseup(function() {
        $("#menuImage5").removeClass("menuImageClick5");  //remove class after mouse button release
    });

    $("#5").click(function() {
        $("#menuImage5").addClass("menuImageActive5");
    });



    $("#6").mousedown(function() {
        $("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
    });

    $("#6").mouseup(function() {
        $("#menuImage6").removeClass("menuImageClick6");  //remove class after mouse button release
    });

    $("#6").click(function() {
        $("#menuImage6").addClass("menuImageActive6");
    });

    $("#1").click(function(){

        $(".navigationDart").animate({ 
            top: "16px"
                }, 500 );
        });
    $("#2").click(function(){
        $(".navigationDart").animate({ 
            top: "88px"
                }, 500 );
        });
    $("#3").click(function(){
        $(".navigationDart").animate({ 
            top: "160px"
                }, 500 );
        });
    $("#4").click(function(){
        $(".navigationDart").animate({ 
            top: "232px"
                }, 500 );
        });
    $("#5").click(function(){
        $(".navigationDart").animate({ 
            top: "304px"
                }, 500 );
        });
    $("#6").click(function(){
        $(".navigationDart").animate({ 
            top: "376px"
                }, 500 );
        });
    });

Моя идея заключалась в том, чтобы работать с if (isset ($ _ SESSION ['ajaxresponse'])), но я не знаю, как это сделать.

Пожалуйста помогите. У меня такое ощущение, что я обыскал всю сеть, чтобы найти ответ.


php jquery ajax session page-refresh
person user1830414    schedule 22.11.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я рекомендую использовать библиотеку, которая связывает PHP с jQuery через AJAX и может значительно облегчить ваши проблемы. библиотека является phery http://phery-php-ajax.net просто оптимизацией для вашего navigation.js файл:

Вам нужно будет централизовать (или нет) AJAX в одном файле, чтобы упростить задачу. Может быть на вашей index.php

function load($data){
  $r = new PheryResponse;

  if (!isset($_SESSION["userLogin"])) {
    return $r->redirect('http://localhost/project');
  }

  $path = 'inc/incfiles/content_container/';

  if (isset($data['id'])){
    $id = $data['id']. '.php';
  } else {
    if (!empty($_SESSION['id'])){
      $id = $_SESSION['id'];
    } else {
      $id = '1.php';
    }
  }

  $_SESSION['id'] = $id; // save the current ID and will load next time the person refreshes the page

  ob_start();
  include $path.'content/'.$id;
  $content = ob_get_clean();

  ob_start();
  include $path.'advertisement/'.$id;
  $ads = ob_get_clean();

  ob_start();
  include $path.'header/'.$id;
  $header = ob_get_clean();

  $r
    ->jquery('.advertisement')->html($ads)
    ->jquery('.contentHeader')->html($header)
    ->jquery('.content')->html($content)
    ;
  // etc

  return $r->this()->find('.menuImage')->addClass('menuImageActive'); // set the current menuImage of the LI element to menuImageActive
}

session_start();

Phery::instance()->set(array(
  'load' => 'load'
))->process();

Поскольку ваш JS сейчас не работает, я переделал его:

$(function() {
  phery.remote('load');
  var menu_image = $(".menuImage");

  $(document)
  .on('click', '.navigation li', function(event){
    menu_image.removeClass("menuImageActive");
    var top;
    switch (event.currentTarget.id){
      case '1':
        top = "16px";
        break;
      case '2':
        top = "88px";
        break;
      case '3':
        top = "160px";
        break;
      case '4':
        top = "232px";
        break;
      case '5':
        top = "304px";
        break;
      case '6':
        top = "376px";
        break;
    }

    $(event.currentTarget)
    .find(".navigationDart").animate({ top: top }, 500);
  })
  .on('mousedown', '.navigation li', function(event){
    $(event.currentTarget).addClass('menuImageClick');
  })
  .on('mouseup', '.navigation li', function(event){
    $(event.currentTarget).removeClass('menuImageClick');
  });
});

и ваш navigation.inc.php должен быть:

<div class="navigation">

<ul>
    <li id="1" data-remote="load" data-args="{'id':1}">
        <div id="menuImage1" class="menuImage"></div>
        <div class="menuText"><p>Punkt 1</p></div>

        <div class="navigationDart"></div>
    </li>
    <li id="2" data-remote="load" data-args="{'id':2}">
        <div id="menuImage2" class="menuImage"></div>
        <div class="menuText"><p>Punkt 2</p></div>
    </li>
    <li id="3" data-remote="load" data-args="{'id':3}">
        <div id="menuImage3" class="menuImage"></div>
        <div class="menuText"><p>Punkt 3</p></div>
    </li>
    <li id="4" data-remote="load" data-args="{'id':4}">
        <div id="menuImage4" class="menuImage"></div>
        <div class="menuText"><p>Punkt 4</p></div>
    </li>
    <li id="5" data-remote="load" data-args="{'id':5}">
        <div id="menuImage5" class="menuImage"></div>
        <div class="menuText"><p>Punkt 5</p></div>
    </li>
    <li id="6" data-remote="load" data-args="{'id':6}">
        <div id="menuImage6" class="menuImage"></div>
        <div class="menuText"><p>Punkt 6</p></div>
    </li>
</ul>

</div>

кажется, ваш CSS запутан для простоты HTML. И вы не должны использовать номер для идентификатора, идентификаторы должны быть. В этом случае вы должны повторно использовать классы css, например

 .menuImageActive {
   /* common styles */  
 }
 .menuImageClick {
   /* common styles */  
 } 
 /* apply per ID */  
 #menuImage1.menuImageActive {
 }
 #menuImage1.menuImageClick {
 }

 #menuImage2.menuImageActive {
 }
 #menuImage2.menuImageClick {
 }

 #menuImage3.menuImageActive {
 }
 #menuImage3.menuImageClick {
 }

 #menuImage4.menuImageActive {
 }
 #menuImage4.menuImageClick {
 }

 #menuImage5.menuImageActive {
 }
 #menuImage5.menuImageClick {
 }

 #menuImage6.menuImageActive {
 }
 #menuImage6.menuImageClick {
 }
person pocesar    schedule 25.11.2012

arrow_upward
0
arrow_downward

Попробуйте вкладки пользовательского интерфейса jQuery, если вам нужны динамически загружаемые вкладки, в нем встроена поддержка AJAX.

Если вам нужна поддержка назад / вперед для событий AJAX, попробуйте плагин адреса jQuery.

Здесь есть хороший ответ о том, как использовать вкладки пользовательского интерфейса jQuery с историей назад / вперед:

person oldwizard    schedule 22.11.2012