การรักษาสถานะ/เนื้อหาที่โหลดผ่าน AJAX ในการรีเฟรชหน้าด้วยตนเอง

โค้ด jQuery/History.js นี้ใช้สำหรับการโหลดเนื้อหาผ่าน Ajax โดยการคลิกลิงก์และย้อนกลับ/ไปข้างหน้าในเบราว์เซอร์ แต่ในหน้าคู่มือการรีเฟรช สแต็ก/บันทึกประวัติจะหายไป และแทนที่จะโหลดเพียงเนื้อหาเดียวกับที่ฉันโหลด ก่อนที่ฉันจะได้รับไฟล์ .erb จริง และสูญเสียสไตล์/การจัดรูปแบบของหน้า

$(function(){
  $('.nav-bar li a').on('click', function(event){
    var urlPath = $(this).attr('href');
    // not implemeneted
    var title = urlPath.capitalize();

    loadContent(urlPath);

    // pushes the current page state onto the history stack, and changes the URL
    History.pushState('', null, urlPath);
    event.preventDefault();
  });



  // This event makes sure that the back/forward buttons work too
  window.onpopstate = function(event){
    console.log("pathname: " + location.pathname);
    loadContent(location.pathname);
  };
});

function loadContent(url){
  // Uses jQuery to load the content
  $('#content').load(url+'#content', function(){
    console.log("Ajax success"); // Ajax

    // bxSlider image slider
    $('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      captions: true
    });
  });
}

String.prototype.capitalize = function(){
  // add capitalize to string - uppercase the first character, add it to the rest of the  word 
  return this.charAt(0).toUpperCase() + this.slice(1);
}

ฉันจะคงข้อมูล / ประวัติในการรีเฟรชหน้าด้วยตนเองได้อย่างไร ฉันพยายามตั้งค่า html ปัจจุบันเป็นตัวแปรและส่งผ่านเป็นวัตถุ JSON สำหรับอาร์กิวเมนต์แรกใน pushState() แต่ฉันเชื่อว่าฉันอาจทำผิด วิธีที่ดีที่สุดในการใช้งานสิ่งนี้คืออะไร? นอกจากนี้ ฟังก์ชัน window.onpopstate จะไม่ทำงานในการรีเฟรชเพจด้วยตนเอง ดังนั้นฉันไม่แน่ใจว่าจะเข้าถึงออบเจ็กต์และรับข้อมูลได้อย่างไร

ฉันไม่แน่ใจว่าสิ่งนี้เกี่ยวข้องแค่ไหน... แต่ฉันใช้งานแอปพลิเคชันนี้ในซินาตร้า

รูปแบบของฉัน.erb

   <!DOCTYPE html>
    <html>
    <head>
    <title>/title>

    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"  rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/th/css/style.css" media="screen"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script  src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js">  </script>

   <script src="/js/jquery.bxslider.js"></script>
   <script src="/js/jquery.bxslider.min.js"></script>
   <link href="/th/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />

   <script src="/js/application.js"></script>
   <link rel="shortcut icon" href="/th/images/favicon.ico" type="image/x-icon">
   </head>

  <body>
   <nav class="nav-bar">
    <ul>
      <li><a href="/th/" id="nav-bar">Home</a></li>
      <li><a href="/thabout" id="nav-bar">About</a></li>
      <li><a href="/thportfolio" id="nav-bar">Portfolio</a></li>
      <li><a href="/thresume" id="nav-bar">Resume</a></li>
    </ul>
  </nav>
    <%= yield %>
  </body>

มุมมอง .erb ที่เหลือของฉันประกอบด้วย div ที่มี ID ของเนื้อหาและมาร์กอัป HTML อื่นๆ อยู่ภายใน นอกจากนี้ เมื่อการโทร ajax ใช้งานได้ ดูเหมือนว่าจะผนวก div ที่สองด้วย ID ของเนื้อหาเมื่อ Ajax สำเร็จ ฉันจะป้องกันสิ่งนั้นได้อย่างไร?

TL;DR

วิธีรักษาสถานะของหน้าด้วยการรีเฟรชด้วยตนเอง แทนที่จะโหลดในมุมมองจริงและสูญเสียการจัดรูปแบบ/สไตล์


javascript html jquery ajax sinatra
person tlands_    schedule 05.12.2013    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

คุณได้กำหนดไว้

   // This event makes sure that the back/forward buttons work too
   window.onpopstate = function(event){
     console.log("pathname: " + location.pathname);
     loadContent(location.pathname);
   };

ภายในบล็อก jQuery:

 $(function(){
   ...
 )

สิ่งนี้จะบังคับให้ทำงานหลังจากโหลดเอกสารแล้ว ดังนั้นจึงไม่ได้กำหนดไว้จนกว่าจะเกิดเหตุการณ์ popstate ครั้งแรก

person Matthew    schedule 05.12.2013

arrow_upward
0
arrow_downward

คุณสามารถใช้ localStorage ซึ่งในหน้าแรกจะจัดเก็บข้อมูลของคุณ และที่หน้าอื่นๆ ที่คุณได้รับอีกครั้ง

person Bahramdun Adil    schedule 29.04.2015