Move from one page to another without loading
Tags: webdev, html, css, javascript
Published: 2021-10-27 11:20:42

Hello everyone, today we meet in a new tutorial. We are going to see how to go from one page to another without loading the page. You have probably noticed it if you are attentive, on some websites, when you go from one page to another there is no loading. There are different techniques more or less heavy to do this, we can for example use the PHP Symfony framework but you have to organize your files in a precise architecture, it is therefore more complicated to implement when the website already exists. That's why today we use AJAX, and to make it faster, jQuery.
Important note : all files will be in PHP, make sure you can run them.

### The basics

To begin with, I propose the following architecture for our files :

![Architecture for our files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8el5722nnd4jw6xa1loa.jpg)

You don't have to follow it, but you will have to be careful and rigorous about the location of the files.
Our site will be called `www.site.com` in this example, you will have to replace this name with your domain name, the IP of your site or the location of your PHP file on your computer if you use a local web server. The `index.php` file will contain our home page, while the `login.php` page will contain a connection form. The `src` folder contains several other folders, the one we are interested in here is `php`, which contains the start and end of each web page. You will understand later why it is important to create these two files.

### → `index.php`

Our index page is quite simple, it contains a php title variable, the file `early.php` if we want it to be whole and not just ask for the content. The content of the index page is : a title and a paragraph. Finally, it contains the end file `end.php` if we want it to be whole and we don't just ask for the content. Otherwise we change the name of the page with a script. So our index page looks like this :

```php
<?php
  $title = "Index page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>I'm the title</h1>

<p>Morbi tincidunt congue diam, at vestibulum elit tempor a. 
Donec id mi malesuada, auctor ligula in, aliquam metus. 
Vestibulum in faucibus massa. Nullam luctus et diam et posuere. 
Nulla massa metus, mattis et efficitur eu, vehicula in lectus. 
Sed a sapien quis tellus rhoncus efficitur. 
Integer sed ultrices nisl, vitae aliquam tellus.</p>


<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>
```


### → `login.php`

The `login.php` page, contains basically the same thing except that the title is not the same and the content is different :

```php
<?php
  $title = "Login page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>Login</h1>

<form action="" method="post">
  <!-- Form to be completed later (optional) -->
</form>

<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>
```

### → `early.php`

As you may have realised before, the `early.php` page is the start of our other two pages: `index.php` and `login.php`. This file should be started as a well presented HTML document. We need to include jQuery, you can include it via a CDN or directly host it on your server or computer. Finally, you can add a header. The file ends with the beginning of the div with the id `main-content` which will contain the content of our pages afterwards :

``` html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- A style file that can be created after  -->
    <link rel="stylesheet" href="src/style/css/style.css" />

    <!-- We include jQuery with the Google CDN  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
    <title><?= $title ?></title>
  </head>
  <body>
    <header>
      <div>
        <a href="index.php" class="crayons-btn crayons-btn-main">index</a>
        <a href="login.php" class="crayons-btn crayons-btn-scd">Login</a>
      </div>
    </header>
    <div id="main-content">
```

### → `end.php`

This file will contain the end of our pages, so it will be necessary to close some tags like the main div, or the body or the html tags. We will include the AJAX part :

``` html
    </div>
  </body>
  <script type="text/javascript">
  $("a").click(function(e){
    e.preventDefault();
    $.ajax({
       url : $(this).attr('href')+"?section=true",
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){
          $('#main-content').html(code_html);
       }
    });
    window.history.pushState("","", $(this).attr('href'));
  });
  </script>
</html>
```

Let's unpack this AJAX code which can be complex if you don't know how AJAX requests work. First of all the first line of the script detects the event: "When someone clicks on a link". If this is the case, it launches the function. The second line tells the browser not to load the link if it is compatible with AJAX requests. Then we make our AJAX request by specifying the url and passing as a parameter `section=true`, so the page will not load completely. We then specify the type of request here `GET`. If successful, we update the content of the "main-content" div with the new content. Finally, we modify the url of the page.

### Add some style

You can then create a file to add some style. This will be placed in the `src` then `style` then `css` file, and will be called `style.css`. For my part, my file looks like this :
```css
#main-content{
	width: 1000px;
	max-width: 95%;
	display: block;
	margin: auto;
	font-family: cursive;
}

#main-content h1{
	text-align: center;
}

body{
	margin: 80px 0 0 0;
}

header{
	background: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
header div{
    width: 1000px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    margin: 13px auto;
}
.crayons-btn{
	margin: 0 5px;
	padding: 0.5rem 1rem;
    font-size: 1rem;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    outline: none;
    user-select: none;
    font-family: inherit;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
    border: 0px solid;
    overflow-wrap: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.crayons-btn-main{
	background-color: blue;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #f9fafa;
}
.crayons-btn-main:hover{
	background-color: #6b6bf1;
}
.crayons-btn-scd{
    background-color: #f1f1f1;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #363d44;
}
.crayons-btn-scd:hover{
    background-color: #dddddd;
}
```

### The result

Below you can see the final result, when you click on one of the two buttons: `index` or `login`, the page only loads the `main-content` part, the rest does not move.

![Overview of the result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3g5q2xzu525c61rf0vw.PNG)

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍