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, Dec 21 '18 at 01:15
Sounds like you need a repeat ajax request to frequently check for changes and update the page if something has changed. — Tristan, Dec 21 '18 at 01:15
General idea shown here https://stackoverflow.com/a/13749256/5509627 — Tristan, Dec 21 '18 at 01:38

score 2 · Answer 1 · answered Dec 21 '18 at 02:30

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 '18 at 02:30

McBern

549
1
4
8

Please expain how did you do it? – Dec 21 '18 at 03:01
1

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. – McBern Dec 21 '18 at 03:04
can this be use even if it is a form `modal` and not a `text`? – Dec 21 '18 at 03:08
Anything you put inside the setInterval function will be executed. Usually is used to call other functions. – McBern Dec 21 '18 at 03:11
would you mind answering this same question if I ask again? Im having trouble making it a modal i want it to popup – Dec 21 '18 at 03:20
the same information but i just want it to change the text to a from modal – Dec 21 '18 at 03:23
Yup it can be done. Pls put your form modal htlm so I can update – McBern Dec 21 '18 at 03:30
sir here it is i've done the modal but nothing still pops up [please see this link](https://stackoverflow.com/questions/53878856/php-ajax-no-refresh-data-when-fetch-to-another-page-and-send-it-as-a-modal) – Dec 21 '18 at 03:36

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

1 Answers1