Zmiana url ajax

Question

Jak zrobić aby zmienił się adres url po wczytaniu strony za pomocą ajax load  

Na stronie http://darmoweogloszenia.ugu.pl/projekt/ jest właśnie zastosowanie ajax+load tylko url się nie zmienia.

Answer 1

Szczegółów nie znam bo sam finalnie z tego nie skorzystałem ale zobacz

https://forum.pasja-informatyki.pl/21540/zmiana-adresu-strony-bez-przeladowania?show=21544#a21544

Czy jest jeszcze jakaś inna opcja to szczerze nie wiem, poczekaj na Comandeera może coś dopowie ;p

Comments

To jedyny sensowny sposób ;)

---

Czytalem o tym na tej stronie https://css-tricks.com/using-the-html5-history-api/ Ale nie wiem jak to zastosowac do swojej strony

 

Zrobiłem to w ten sposób zmiana url działa tylko jak dam w przeglądarce przycisk wstecz to zmieni się url ale strona nie  gdzie robię źle tak wygląda kod 

<script>
 $(document).ready(function(){
                $("#header").html("wczytywanie....").load("main.php");
                 return false;
  });
  $(function(){
    
         $("a").click(function(){
             $("#header").html("wczytywanie....").load($(this).attr('href'));
                 return false;
        })


  	
         $("nav a").click(function(event){
             $("#header").html("wczytywanie....").load($(this).attr('href'));
             event.preventDefault();  
             if(history.pushState) {
                history.pushState(null, null, $(this).attr('href'));
              } return false;
        })
        
    })

$("a").click(function(){

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});


</script>

podgląd na stronie 

http://www.darmoweogloszenia.ugu.pl/

---

Nie lepiej użyć gotowego, zoptymalizowanego rozwiązania?

https://github.com/defunkt/jquery-pjax

---

Nie za bardzo wiem jak tego użyć dołączyłem script  i zrobiłem to tak 

$(document).pjax('nav a', '#header');

lub tak 

$(document).pjax('a', '#header');

Strona się nie wczytywała do id="header"

---

Znalazłem script  http://stackoverflow.com/questions/14215079/ajax-with-history-pushstate-and-popstate-what-do-i-do-when-popstate-state-prop

$(document).ready(function(){

    // Used to detect initial (useless) popstate.
    // If history.state exists, pushState() has created the current entry so we can
    // assume browser isn't going to fire initial popstate
    var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

    var content = $('#header');

    var ajaxLoadPage = function (url) {

        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');

    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    $(window).bind('popstate', function(event){

        // Ignore inital popstate that some browsers fire on page load
        var initialPop = !popped && location.href == initialURL;
        popped = true;
        if (initialPop) return;

        console.log('Popstate');

        // By the time popstate has fired, location.pathname has been changed
        ajaxLoadPage(location.pathname);

    });

});

po podpięciu pod stronkę działa ok. Już nie chce  zakładać nowego  tematu to napiszę tutaj. W jaki sposób zrobić, jeśli ktoś wejdzie na stronę np. tak:

 http://www.darmoweogloszenia.ugu.pl/main.php

to nie wczyta się główny index gdzie w nim jest dołączony styl i skrypt.