PHP & AJAX - No Refresh on another Page when data is Fetch

Question

my current program is adding a data and inserting it to the database, but what i want is, I want a automatic no refresh on the other page or browser. so I have this two browsers, how can i submit the data to the other page without refreshing. right now it is sending but the problem is I need to refresh the page

here is my code for Ajax4.html

 <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

my Process.php

here is where I connect my database

    <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

my sending page Ajax5.html

here is where I fetch the data and here where I want to send the data without refreshing the page

<button id="button">Get User</button>
        <br><br>

        <h1>Users</h1>
        <div id="users"></div>

<script>

document.getElementById('button').addEventListener('click', loadUsers);

    function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);

        xhr.onload = function(){
            if(this.status == 200){
                var users = JSON.parse(this.responseText);

                var output = '';

                for(var i in users){
                output += '<ul>' +
                    '<li>ID: ' +users[i].id+'</li>' +
                    '<li>Name: ' +users[i].name +'</li>' +
                    '</ul>';
                }

                document.getElementById('users').innerHTML = output;
            }
        }

        xhr.send();
    }

</script>

Either poll for new data or use some sort of push / web-socket setup — Phil
– Phil, Commented Dec 21, 2018 at 1:15
Sounds like you need a repeat ajax request to frequently check for changes and update the page if something has changed. — Tristan
– Tristan, Commented Dec 21, 2018 at 1:15
General idea shown here stackoverflow.com/a/13749256/5509627 — Tristan
– Tristan, Commented Dec 21, 2018 at 1:38

McBern · Accepted Answer · 2018-12-21 02:30:42Z

2

You can add setInterval to periodically update the user list:

var still_fetching = false;

//fetch data every 3 seconds (3000)
setInterval(function(){ 
     if (still_fetching) {
         return;
     }
     still_fetching = true;
     loadUsers();
}, 3000);

//need to update a bit this function
function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);

        xhr.onload = function(){
            if(this.status == 200){
                var users = JSON.parse(this.responseText);

                var output = '';

                for(var i in users){
                output += '<ul>' +
                    '<li>ID: ' +users[i].id+'</li>' +
                    '<li>Name: ' +users[i].name +'</li>' +
                    '</ul>';
                }

                document.getElementById('users').innerHTML = output;
                still_fetching = false;
            }
        }

        xhr.send();
  }

answered Dec 21, 2018 at 2:30

McBern

5491 gold badge4 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user10701881 Over a year ago

Please expain how did you do it?

McBern Over a year ago

setInterval() will always execute depends on how many seconds you specify, it can be 500 for split second, You need to put extra flag if the ajax still fetching otherwise it will collide with next interval. You can cancel the setInterval by using clearInterval(handler_variable). Whatever you put inside the setInterval function will be executed.

user10701881 Over a year ago

can this be use even if it is a form modal and not a text?

McBern Over a year ago

Anything you put inside the setInterval function will be executed. Usually is used to call other functions.

user10701881 Over a year ago

would you mind answering this same question if I ask again? Im having trouble making it a modal i want it to popup

|

Collectives™ on Stack Overflow

PHP & AJAX - No Refresh on another Page when data is Fetch

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related