2012-11-22 165 views
0

我有一個導航,通過ajax加載動態內容。但是,如果我刷新頁面或訪問另一個網址並返回,當前內容就會消失,我會在第一個菜單標籤下看到舊內容。刷新頁面 - AJAX內容消失

解決此問題的最佳方法是什麼?你能給我一些代碼嗎?

在index.php包括元素navigation.inc.php和main_container.inc.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"); ?> 

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> 

現在divs內容,cnotentHeader和廣告(在文件main_content.inc.php中)通過ajax填充。此外導航有一些jquery效果,頁面刷新後也必須相同。

$(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); 
    // Get the src of the image 
    // var src = $(this).css("top"); 

    // Send Ajax request to backend.php, with src set as "img" in the POST data 
    // $.post("/home.php", {"#2": top}); 
    }); 
$("#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); 
    }); 
}); 

回答

0

您可以使用會話。當你通過ajax加載內容時,將該響應存儲到會話變量中,並在你的導航中添加if條件 if(isset($ _ SESSION ['ajaxresponse']))等。

+0

你有個例子嗎? – user1830414

+0

請參考您的頁面,我可以看到導航,您的問題不夠清楚。如果我對這個問題有全面的瞭解,我可以爲您寫一個示例代碼。 –

+0

好吧,這是完成:)希望這會有所幫助。 – user1830414

0

好的,在你的php文件供應你的Ajax請求,請添加以下行

// assuming that your contents can be stored in a variable $contents 
$_SESSION['mycontent'] = $contents; 

現在,你顯示你的Ajax響應,添加的代碼有

if(isset($_SESSION['mycontent']) && !empty($_SESSION['mycontent'])) 
echo $_SESSION['mycontent']; 

以下行確保您聲明的session_start();

希望這會有所幫助!抱歉!如果我不明白你的問題的情況。