Update page and url without reloading

Question

How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.

This is an idea of what i want:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery.min.js"></script>
</head>

<?php
$url = $_SERVER['REQUEST_URI'];

if (url == /login){
    include 'php/login.php'; 
    echo"<script>
        $(document).ready(function() {'
        history.pushState(null, null, '/login')
        });
        </script>"
}

if (url == /home){
    include 'php/home.php'
    echo"<script>
        $(document).ready(function() {'
        history.pushState(null, null, '/home')
        });
        </script>"
}
?>

</html>

the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?

i know that i don't have to echo every line,sorry i will change it in a sec. — Ajeo, Mar 18 '14 at 20:07
I'm not entirely sure what you're doing, but it looks like you may want to peek into History.js and its concepts. — Rob W, Mar 18 '14 at 20:07
@HalfCrazed yes that is what i try to do but how can i make sure that when someone isn't going to the index.php that he/she doesn't get a server error but the webpage that he/she requested. — Ajeo, Mar 18 '14 at 20:11
And you also have to rely on `mod_rewrite` (if you're using Apache) to prettify URLs and load the right php file for a given URL. — George Marques, Mar 18 '14 at 20:12
You're missing some concepts here. Check this out: http://stackoverflow.com/questions/13553037/jquery-history-js-example — Rob W, Mar 18 '14 at 20:12
@HalfCrazed yes that fixes the problem when you try to go back but what if i send you a link to a specific page without visiting the index.php page. That page does not exists how can i fix that? — Ajeo, Mar 18 '14 at 20:17
You might want to look into hashes, then, especially if using ajax calls. Afterwards, for SEO compatibility, see: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started — Rob W, Mar 18 '14 at 20:18

score 1 · Answer 1 · answered Mar 18 '14 at 20:07

1

Try window.location.hash=your_hash_string in JavaScript

answered Mar 18 '14 at 20:07

Ryan

14,682
32
106
179

2

"without reloading"... must be through AJAX. – Sablefoste Mar 18 '14 at 20:08
Yes, of course. But `location.hash` doesn't reload the page. – Ryan Mar 18 '14 at 20:35

Arjun Chaudhary · Answer 2 · 2014-03-28T06:37:49.107

1

That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.

edited Mar 28 '14 at 06:37

answered Mar 18 '14 at 20:21

Arjun Chaudhary

2,373
2
19
36

what do you mean with this. That i need to duplicate the index.php and add these into different folders? – Ajeo Mar 18 '14 at 20:24
1

no thats not good practice just search on internet for option i generally use meta tag instead of include – Arjun Chaudhary Mar 18 '14 at 20:29

score 0 · Answer 3 · answered Mar 18 '14 at 20:17

Try something like this:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
  <div id="navigation">
    <ul>
      <li><a href="#" onclick="_load_content('php/login.php');">Login</a></li>
      <li><a href="#" onclick="_load_content('php/home.php');">Home</a></li>
    </ul>
  </div>
  <div id="content"></div>
</body>

<script type="text/javascript">
function _load_content(url) {
     $("#content").slideUp("slow", function() { 
        $("#content").html('<p align="center">Loading...</p>');
     }
    $.ajax({ type: "get", url: url,
        success: function(response) {
            $("#content").html(response);
            $("#content").slideDown("slow");
        },
        error: function() {
            alert("An error occured");
        }
    });
}

$(document).ready(function() {
    _load_content("php/home.php");
});
</script>
</html>

NOTE: This is the very basic function I made... You should really learn jQuery AJAX.

Update page and url without reloading

3 Answers3