CODEWITHSUNDEEP
javascriptphphtml
Ajeo
Ajeo

Reputation: 73

Update page and url without reloading

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?

Upvotes: 0

Views: 162

Answers (3)

Arjun Chaudhary
Arjun Chaudhary

Reputation: 2453

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

Upvotes: 1

Sidstar
Sidstar

Reputation: 354

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.

Upvotes: 0

Ryan
Ryan

Reputation: 15270

Try window.location.hash=your_hash_string in JavaScript

Upvotes: 1

Related Questions