0

I found a way to change the page url without refreshing the page by using 

window.history.pushState

but I couldn't land on the page, or open it in different browse, I get an error page not found

for exmp:

www.mydomain.com/profile

I want to land on this link and get me to the profile page. what should I do.

   <script>
     $(document).ready(function(){
        //set trigger and container
        var trigger = $('#nav ul li a'),
            container = $('#container');
        //do on click
        trigger.on('click', function(e){
            /***********/
             e.preventDefault();

            //get the link location that was clicked
            pageurl = $(this).attr('href');


            //to change the browser URL to th  if(pageurl!=window.location){
              window.history.pushState({path:pageurl},'',pageurl);

           /* reload content without refresh */
            //set loading img
            $('#container').append('<div id = "loading">WAIT...  <img src = "img/ajax-loader-small.gif" alt="Currently loading"   /></div>');
            //change img location to center
            $("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
            //get the  trigger to reload the contents
            var $this = $(this),
                target = $this.data('target');

            container.load(target + '.php');


            return false;

        });
    });
    // fix url in the browser when click on backward and foreword  arrows
    $(window).bind('popstate', function() {
        $.ajax({url:location.pathname+'?rel=tab',success: function(data){
            $('#content').html(data);
        }});
    });



</script>
Ahmadz Issa
  • 669
  • 3
  • 12
  • 36
  • Just to make it easier to understand the question, this is what Facebook does when you open a photo, for example. The url bar changes to point DIRECTLY to that photo, so you can share the URL without losing where you are in the site. Remember sites based on framing last decade? You could only get the homepage url, because only internal frames were changing. And that was terrible – Ahmadz Issa May 08 '16 at 15:02
  • I'm not sure I understand what you are attempting to do. Is it something that jQuery.get() or jQuery.load() might help with? – JonSG May 08 '16 at 15:07
  • I have a script that load the page content without refreshing the page, but the url doesn't not appear when I open different pages, I found a way to get the url for every page as I explained above, but I can't land on the page using the url for example if I tired to open this url "www.mydomain.com/profile " I will get an error 404 Object not found – Ahmadz Issa May 08 '16 at 15:12
  • Oh, so the "www.mydomain.com/profile" does not "exist" yet on your server. You are going to need to handle the route then server side with your server or framework. – JonSG May 08 '16 at 15:23
  • Yeah it doesn't exist, since ajax doesn't produce a URL when using load. handling the route will take forever since I have many pages, I found a solution here http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page?rq=1 , but I couldn't understand how should I implement it. – Ahmadz Issa May 08 '16 at 16:22

1 Answers1

1

You need to make sure your web server (e.g. Apache or Nginx) accepts requests to that URL and redirects it properly. There are many ways to do this. For example, your web server could redirect all or most requests to a central PHP file that routes the request further. This is generally preferably in more complex systems. However, for simpler cases it might be enough to use something like mod_rewrite (if you're using Apache as your web server).

Assuming your setup allows it, putting something like the following in a .htaccess file in your document root would cause mod_rewrite to forward all requests to www.mydomain.com/profile to www.mydomain.com/profile.php:

RewriteEngine  on
RewriteRule    "^/profile$"  "profile.php"  [L]

That's a very simple example that'll only work for that specific page, but if you have a lot of pages that follow the same naming standard you can apply more generalised rules as well.

If you're using something other than Apache to serve your pages, there are similar features in virtually all of them.

Pontus Horn af Rantzien
  • 351
  • 1
  • 3
  • that's won't work since the site has many pages, so it should be dynamic, if I have to specify each url location it will take forever. Thank you. – Ahmadz Issa May 08 '16 at 16:19
  • 1
    @AhmadzIssa As mentioned, mod_rewrite and similar solutions allow for more general solutions that do not require a separate rule for each URL. If you want to know exactly how, you'd need to provide a fairly detailed specification of what you want to be rewritten into what. I'd suggest reading [the documentation for mod_rewrite](http://httpd.apache.org/docs/current/rewrite/). – Pontus Horn af Rantzien May 08 '16 at 16:25
  • thank you, I will read the documentation. I hope it will work. – Ahmadz Issa May 08 '16 at 17:16