HTML5 pushState the element disappears

StackOverflow https://stackoverflow.com/questions/19081898

  •  29-06-2022
  •  | 
  •  

Frage

I'm trying to do a pushState website, well, the problem is all of a in .nav disappear.

I don't know what's going on, maybe is the jquery version, so here's my code of index.html:

        <!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript" src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
  <audio controls>
<source src="mp.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <div id="body">
<div id="menu">
<div class="nav">
<a href="two.html">d</a>
</div>
</div>
</div>
  </body>
</html>

and application.js:

$(function(){
    var replacePage = function(url) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var title = dom.filter('title').text();
                var html = dom.filter('.nav').html();
                $('title').text(title);
                $('.nav').html(html);
            }
        });
    }

    $('a').live('click', function(e){
        history.pushState(null, null, this.href);
        replacePage(this.href);
        e.preventDefault();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

here's the JSFiddle

two.html:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript" src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
  <audio controls>
<source src="mp.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <div id="body">
<div id="menu">
<div class="nav">
<a href="index.html">djbghasighaslashb</a>
</div>
</div>
</div>
</body>
</html>
War es hilfreich?

Lösung

It might be useful to wrap the full html response into a root element if you are not sure if the desired elements are at root level or deep down somewhere in the dom tree:

success: function( data ){

  // create a single container element, and put the html response into it
  var dom = $('<div>').html( data );

  // now you never have to use .filter(), just .find()
  var title = dom.find('title').text();
  var html  = dom.find('.nav').html();
  ...
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top