PHP-提取数据时的Ajax自动刷新页面

Question

Here I have a set interval , which I think will reload the page automatically when data is fetched.

here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the modal when i submit the button it will insert an id and that id will be save in the modal so the modal will trigger and display .

clickModal.php - here is where the button should click and will trigger the modal and display it without refresh on my home.php

home.php - here is where the modal should popup or display when I click the button on clickModal.php

for now it is working but I need to refresh the page on home.php before the modal will display or pop up here is my code.

clickModal.php button click / ajax success.

            Yes: 
                                        btnClass: 'btn-green',
                                        action: function () {
                                            $.ajax({
                                                type: "POST",
                                                url: "announcement.php",
                                                data: {
                                                    addInfo: addInfo
                                                },
                                                dataType: "text",
                                                success: function (data) {
                                                    window.location.replace("change-password.php");

                                                },
                                                error: function (err) {
                                                    console.log(err);

                                                }

                                            });

                                        }

home.php

my database connection

 $data = mysqli_query($con,"SELECT * FROM announcement");
  $count = mysqli_num_rows($data);

my script

    <script>


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', 'home.php', true);

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

                var output = '';

                for(var i in users){
                output += '<div id="myModal" class="modal" style="position:fixed;  display: none; padding-top: 100px;'+
                'left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">'+
                '<div class="container" style="width: 100%">'+
                '<div class="card col-12" style="background-color: red; color: white;">'+
                '<div class="card-header">'+
                    '<p><h3 class="text-center">Announcement</h3></p>'+
                '</div>'+
                  '<div class="card-body text-center">'+

                      '<p>Please click refresh button to resume after the announcement</p>'+
                  '</div>'+
                 '</div>'+
                '</div>'+
                '<img class="modal-content" id="img01">'+
                '</div>';
                }

                 document.getElementById('myModal').style.display='block';
                still_fetching = false;
            }
        }

        xhr.send();
  }



</script>

what I just need is to display the modal without any refresh when it is triggered.

Answer 1

So your question is to open the modal once your Ajax call responded:

Your Ajax call should be:

$.get("youpage.php",{ bar: "foo"}, function(data, status){
    // Trigger your modal
});