How to display another page without reloading?

change content without reloading page
how to refresh a div using javascript without refreshing page
change content without reloading page javascript
ajax update page without refresh
ajax page load without refresh example
auto refresh div content without reloading page using javascript
load content into div without reloading page
refresh page without reloading using javascript

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>

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.

How to display another page without reloading?, In this video I show you how to update a page without refreshing using jQuery and JSON Duration: 14:47 Posted: Mar 27, 2017 You can implement refreshless pages using AJAX, but writing raw AJAX will be difficult, if you have minor thing go for JQUERY. If you want to do something like single page app go for Angular JS or backbone. 1.1K views View 1 Upvoter

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>

Using jQuery to Update a Page Without Refresh (Part 1 of 2 , There are a lot of “without-page-refresh” solutions out there, but here's one you can create with AJAX. When everything is similar, being different attracts. public function report_button( $content ) { // display button only on� I get the data from DB and display it in a div what I want to do is when I click a link it should change the content of the div. one option is to pass parameter through URL to itself and reload the page I need to do it without reloading\refreshing

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>

Submitting Forms Without Reloading The Page: AJAX , I'm trying to reload some dynamic content that is contained within div… that page it appears we're trying to accomplish very different tasks (or maybe I missed which shows me the path as well,but i don't want to show index.html in the path . I’m trying to reload some dynamic content that is contained within div tags without refreshing the entire page. After some searching it appears that Ajax is my best bet, but I have never worked

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>

Refresh DIV Content Without Reloading Page - JavaScript, It includes the page visited in the tab or frame where the current page is located. This will change the URL of the page without reloading the page. How to display search result of another page on same page using ajax in� Im wondering how it is possible to refresh the data on the page (read from php database), without having to refresh the whole page. What i want i something similar to facebook and twitter, where it will say that new stuff has appeared. Instead of this though, i want it to just appear, instead of a box coming up with it appearing.

How to modify URL without reloading the page using JavaScript , I get the data from DB and display it in a div what I want to do is when I click a link it should ( $results ); echo $row['para']; } ?> Previously on Nettuts+, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh.

HTML, Get code examples like "javascript change url without reload" instantly display json data in html table using javascript dynamically � display none go to another html page in javascript � go to another page javascript � go to� Whatever this page echo's it display on the displaydata.html page.You can also view load more results from database using ajax. That's all, this is how to load data from database without page refresh using Ajax and jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

javascript change url without reload Code Example, HTML5: Changing the browser-URL without refreshing page change the URL displayed in the browser* through javascript without reloading the page. Another interesting thing is how Flickr still use the old hash-hack as a fallback if you're� An often overlooked feature of HTML5 is the new “onpopstate” event. This new feature offers you a way to change the URL displayed in the browser* through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.

Comments
  • You can achieve with jQuery
  • @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
  • Ok. I'll post as answer
  • I wouldn't bother for now unless you have further question. Check the solution here. Already asked in SO stackoverflow.com/questions/12524228/…
  • Well, it works, but how do I add like much content in each page?
  • How do I add content in each page?
  • in each button there is an attribute data-uri=" text or uri" to enable links let return_text = false;
  • I see, Thanks, this is good. But How do I contain content inside this gray container that is meant for that page content?