Ten kod JQUERY / HISTORIA.js działa do załadunku w treści przez AJAX, klikając łącze i nawigując do tyłu / do przodu w przeglądarce, ale na stronie Ręczna odświeżanie stosu Historia Stos / dziennik został utracony, a nie tylko ładowanie w tej samej zawartości, którą załadowałem W poprzednim otrzymuję rzeczywisty plik .erb i straciłem stylizacji / formatowania strony.

$(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);
}

Jak utrzymywać dane / historię na stronie ręcznej odświeżania? Próbowałem ustawić bieżące HTML do zmiennej i przekazując go jako obiekt JSON dla pierwszego argumentu w popychaniu (), ale wierzę, że mogłem zrobić to źle. Jaki jest najlepszy sposób na wdrożenie tego? Ponadto funkcja okna

Nie jestem pewien, jak istotne jest to ... ale prowadzę tę aplikację w Sinatrze

Mój układ

   <!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="/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="/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />

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

  <body>
   <nav class="nav-bar">
    <ul>
      <li><a href="/" id="nav-bar">Home</a></li>
      <li><a href="about" id="nav-bar">About</a></li>
      <li><a href="portfolio" id="nav-bar">Portfolio</a></li>
      <li><a href="resume" id="nav-bar">Resume</a></li>
    </ul>
  </nav>
    <%= yield %>
  </body>

Reszta moich wilkołaków składa się z div z identyfikatorem treści i innym znacznikiem HTML w nich. Ponadto, gdy działa Call AJAX, wydaje się, że dołącza drugi div z identyfikatorem treści na sukces AJAX. Jak temu zapobiec?

TL; DR

Jak zachować stan strony za pomocą ręcznego odświeżenia, zamiast ładowania w rzeczywistym widoku i utraty formatowania / stylizacji.

1
tlands_ 6 grudzień 2013, 00:44

1 odpowiedź

Możesz użyć localStorage, że w pierwszej stronie przechowujesz dane i na każdej innej stronie otrzymasz ponownie.

0
Bahramdun Adil 29 kwiecień 2015, 12:49