How to display another page without reloading?

Question

I'm working on Admin panel for my Portfolio page.

body {
  margin: 0;
  background-color: #E0E0E0;
}

.navbar {
  width: 100%;
  height: 40px;
  background-color: #21262a;
  position: fixed;
  top: 0;
  display: block;
}
.navbar .adminText {
  color: #d9f3fe;
  position: absolute;
  font-family: sans-serif;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
.navbar .logout {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-style: none;
  height: 100%;
  width: 100px;
  background-color: #21262a;
  color: #d9f3fe;
  transition: .2s;
}

.logout:hover {
  background-color: #181b20;
  cursor: pointer;
}

.logout:focus {
  outline: none;
}

.control {
  height: calc(100% - 40px);
  width: 20%;
  background-color: #21262a;
  position: fixed;
  left: 0;
  bottom: 0;
}
.control .dashboard {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  background-color: #21262a;
  color: #d9f3fe;
  font-size: 1.1em;
  transition: .3s;
  text-align: left;
}
.control .dashboard:hover {
  background-color: #181b20;
  cursor: pointer;
}
.control .dashboard:focus {
  outline: none;
}
.control .dashboard i {
  margin-right: 10px;
  float: left;
  margin-left: 10px;
}

.workStation {
  position: absolute;
  height: calc(100%-40px);
  width: 80%;
  right: 0;
  top: 40px;
  z-index: 100;
}

#active {
  background-color: #006da0;
}
#active:after {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #E0E0E0;
  transform: rotate(45deg);
  right: -10px;
}

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>

<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
  <button class="logout">LOGOUT</button>
</div>

<aside class="control">
  <button class="dashboard" id="active"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
  
    <button class="dashboard"> <i class="fas fa-images"></i> Posts</button>
  
      <button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation">
  <h1>THis is DASHBOARD</h1>
</aside>

That's my page.

Now, I will have it linked to my database, I'm doing it in PHP, but for now I'm working on frontend. So When I click on Posts I want to display content for that page in this gray area that is empty.

I think You know What I mean by now. So what's the best way to do it? Keep in mind, I'm doing my backend system in PHP.

@Kwakuamoh Could you help me with some sources on how to do it the right way. I know how to remove content with javascript by making DISPLAY: NONE — MareGraphics MaRe, Mar 05 '19 at 17:40
I wouldn't bother for now unless you have further question. Check the solution here. Already asked in SO https://stackoverflow.com/questions/12524228/how-to-load-php-file-into-div-by-jquery — ket-c, Mar 05 '19 at 19:40

score 1 · Answer 1 · answered Mar 05 '19 at 17:56

An easy way to do this is by using the state pattern. This will let you load different pages by changing the state of your application. Let me show you an example of doing this.

<div id="content"></div>

const content = document.getElementById('content');

const PageState = function() {
  let currentState = new homeState(this);
  this.change = state => currentState = state;
}

const homeState = function() {
content.innerHTML = `This is my home page`;
}

const aboutState = function() {
content.innerHTML = `This is my about page`;
}

const page = new PageState();

page.change(new homeState);

You have the content element as the main tag of the page, then you simply call page.change() with the new state you want to have. This lets you avoid changing the page & only changing the content of it.

This will let you achieve a single page application without a javascript framework like react.js or vue.js. It's a neat & simple way to get started.

Well, it works, but how do I add like much content in each page? — MareGraphics MaRe, Mar 06 '19 at 14:00

GOSTRAFX · Answer 2 · 2019-03-05T19:51:56.383

Please try this

    $(document).ready(() => {

        let return_text = true;
        let $content = $('.workStation');
        let $button = $('button.dashboard');

        if($button.attr('id') === 'active'){
            let data_uri = $button.data('uri');
            return_data($content,data_uri, return_text)
        }

        $button.click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            $this = $(this);
            $this.attr('id', 'active').siblings().removeAttr('id', 'active');
            let data_uri = $this.data('uri');
            return_data($content,data_uri, return_text)
        });

        function return_data($content,data_uri, return_text) {

            if (return_text) {
                $content.html(`<h1>${data_uri}</h1>`);
            } else {
                //Ajax
                $.get(data_uri).done(function (response, status){
                    if(status === 'success'){
                        $content.html(response);
                    }else{
                        alert('error! '+status);
                    }
                }).fail(function(jqXHR, textStatus){
                    alert("Request failed: " + textStatus);
                })
            }
        }
    });

 body {
        margin: 0;
        background-color: #E0E0E0;
    }

    .navbar {
        width: 100%;
        height: 40px;
        background-color: #21262a;
        position: fixed;
        top: 0;
        display: block;
    }

    .navbar .adminText {
        color: #d9f3fe;
        position: absolute;
        font-family: sans-serif;
        top: 50%;
        margin-left: 10px;
        transform: translateY(-50%);
        text-transform: uppercase;
        font-weight: 600;
        cursor: default;
        user-select: none;
    }

    .navbar .logout {
        float: right;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-style: none;
        height: 100%;
        width: 100px;
        background-color: #21262a;
        color: #d9f3fe;
        transition: .2s;
    }

    .logout:hover {
        background-color: #181b20;
        cursor: pointer;
    }

    .logout:focus {
        outline: none;
    }

    .control {
        height: calc(100% - 40px);
        width: 20%;
        background-color: #21262a;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .control .dashboard {
        position: relative;
        width: 100%;
        height: 50px;
        border: none;
        background-color: #21262a;
        color: #d9f3fe;
        font-size: 1.1em;
        transition: .3s;
        text-align: left;
    }

    .control .dashboard:hover {
        background-color: #181b20;
        cursor: pointer;
    }

    .control .dashboard:focus {
        outline: none;
    }

    .control .dashboard i {
        margin-right: 10px;
        float: left;
        margin-left: 10px;
    }

    .workStation {
        position: absolute;
        height: calc(100% - 40px);
        width: 80%;
        right: 0;
        top: 40px;
        z-index: 100;
    }

    #active {
        background-color: #006da0;
    }

    #active:after {
        content: "";
        height: 20px;
        width: 20px;
        position: absolute;
        background-color: #E0E0E0;
        transform: rotate(45deg);
        right: -10px;
    }

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
    <h class="adminText">Zenzzex Portfolio Admin Panel</h>
    <button class="logout">LOGOUT</button>
</div>

<aside class="control">
    <button class="dashboard" id="active" data-uri="This is Dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard
    </button>
    <button class="dashboard" data-uri="This is Post"><i class="fas fa-images"></i> Posts</button>
    <button class="dashboard" data-uri="This is Add post"><i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation"></aside>

in each button there is an attribute data-uri=" text or uri" to enable links let return_text = false; — GOSTRAFX, Mar 06 '19 at 17:07
I see, Thanks, this is good. But How do I contain content inside this gray container that is meant for that page content? — MareGraphics MaRe, Mar 07 '19 at 16:30

score 0 · Answer 3 · answered Mar 08 '19 at 20:55

This code is simple in each button there is an attribute data-page="" put the name of the page in data-page="exemple.php or path/exemple.php"

    $(document).ready(() => {

        let $content = $('.workStation');
        let $button = $('button.dashboard');

        if ($button.attr('id') === 'active') {
            let $data_uri = $button.data('page');
            return_page($content, $data_uri)
        }

        $button.click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            $this = $(this);
            $this.attr('id', 'active').siblings().removeAttr('id');
            let $data_uri = $this.data('page');

            if ($data_uri !== '') {
                return_page($content, $data_uri);
            }else{
                $content.html('<h1>Empty data-uri attribute<h1/>');
            }

        });
        
        function return_page($content, $data_uri) {

            $($content).load( $data_uri,function(responseText,textStatus){
               if(textStatus === 'error') $content.html(`<h1>${$data_uri} Page not found<h1/>`);
            });

        }
    });

 body {
            margin: 0;
            background-color: #E0E0E0;
        }

        .navbar {
            width: 100%;
            height: 40px;
            background-color: #21262a;
            position: fixed;
            top: 0;
            display: block;
        }

        .navbar .adminText {
            color: #d9f3fe;
            position: absolute;
            font-family: sans-serif;
            top: 50%;
            margin-left: 10px;
            transform: translateY(-50%);
            text-transform: uppercase;
            font-weight: 600;
            cursor: default;
            user-select: none;
        }

        .navbar .logout {
            float: right;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            border-style: none;
            height: 100%;
            width: 100px;
            background-color: #21262a;
            color: #d9f3fe;
            transition: .2s;
        }

        .logout:hover {
            background-color: #181b20;
            cursor: pointer;
        }

        .logout:focus {
            outline: none;
        }

        .control {
            height: calc(100% - 40px);
            width: 20%;
            background-color: #21262a;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .control .dashboard {
            position: relative;
            width: 100%;
            height: 50px;
            border: none;
            background-color: #21262a;
            color: #d9f3fe;
            font-size: 1.1em;
            transition: .3s;
            text-align: left;
        }

        .control .dashboard:hover {
            background-color: #181b20;
            cursor: pointer;
        }

        .control .dashboard:focus {
            outline: none;
        }

        .control .dashboard i {
            margin-right: 10px;
            float: left;
            margin-left: 10px;
        }

        .workStation {
            position: absolute;
            height: calc(100% - 40px);
            width: 80%;
            right: 0;
            top: 40px;
            z-index: 100;
        }

        #active {
            background-color: #006da0;
        }

        #active:after {
            content: "";
            height: 20px;
            width: 20px;
            position: absolute;
            background-color: #E0E0E0;
            transform: rotate(45deg);
            right: -10px;
        }

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
    <h class="adminText">Zenzzex Portfolio Admin Panel</h>
    <button class="logout">LOGOUT</button>
</div>

<aside class="control">
    <button class="dashboard" id="active" data-page="dashboard.html"><i class="fas fa-tachometer-alt"></i> Dashboard
    </button>
    <button class="dashboard" data-page="post.html"><i class="fas fa-images"></i> Posts</button>
    <button class="dashboard" data-page="add_post.html"><i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation"></aside>
</body>

Hi, how do I submit data from main page to data-page that is being called? — pjustindaryll, Aug 31 '22 at 10:48

score -1 · Answer 4 · answered Mar 05 '19 at 17:56

Please try this

$('#post').click(function(){
  $('.title-dashboard').hide();
  $('.title-post').show();
  
  $('#dasboard').removeClass('active');
  $('#post').addClass('active');
});

$('#dasboard').click(function(){
  $('.title-dashboard').show();
  $('.title-post').hide();
  
  $('#post').removeClass('active');
  $('#dasboard').addClass('active');
});

body {
  margin: 0;
  background-color: #E0E0E0;
}

.navbar {
  width: 100%;
  height: 40px;
  background-color: #21262a;
  position: fixed;
  top: 0;
  display: block;
}
.navbar .adminText {
  color: #d9f3fe;
  position: absolute;
  font-family: sans-serif;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
.navbar .logout {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-style: none;
  height: 100%;
  width: 100px;
  background-color: #21262a;
  color: #d9f3fe;
  transition: .2s;
}

.logout:hover {
  background-color: #181b20;
  cursor: pointer;
}

.logout:focus {
  outline: none;
}

.control {
  height: calc(100% - 40px);
  width: 20%;
  background-color: #21262a;
  position: fixed;
  left: 0;
  bottom: 0;
}
.control .dashboard {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  background-color: #21262a;
  color: #d9f3fe;
  font-size: 1.1em;
  transition: .3s;
  text-align: left;
}
.control .dashboard:hover {
  background-color: #181b20;
  cursor: pointer;
}
.control .dashboard:focus {
  outline: none;
}
.control .dashboard i {
  margin-right: 10px;
  float: left;
  margin-left: 10px;
}

.workStation {
  position: absolute;
  height: calc(100%-40px);
  width: 80%;
  right: 0;
  top: 40px;
  z-index: 100;
}

.active {
  background-color: #006da0;
}
.active:after {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #E0E0E0;
  transform: rotate(45deg);
  right: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>

<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
  <button class="logout">LOGOUT</button>
</div>

<aside class="control">
  <button class="dashboard" class="active" id="dasboard"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
  
    <button class="dashboard" id="post"> <i class="fas fa-images"></i> Posts</button>
  
      <button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation">
  <h1 class="title-dashboard">THis is DASHBOARD</h1>
  <h1 style="display:none;" class="title-post">THis is POST</h1>
</aside>

How to display another page without reloading?

4 Answers4