Ytukyg

My only problem is the page does not load auto refresh, tho it is loading when i refresh the page..

here is my html and ajax code with its database.

My Trigger Button

    <?php

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

        $count = mysqli_num_rows($data);

        if ($count != 0) {

            while($row = mysqli_fetch_array($data)) { 

                echo '

                    <button class="btn btn-danger nav-link delannouncement" id="delannouncement">Resume System</button>';

                $dataid = $row['id'];

            }

        }else{

            echo '<button class="btn btn-primary nav-link announcement" id="announcement">Passenger Announcement</button>';

        }

    ?>

Fetching the Data in Database

Here is where I call the data in mysql from ajax to here.

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

    $count = mysqli_num_rows($data);

    if ($count != 0) {

      while($row = mysqli_fetch_array($data)) { 

          echo '<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">

                      <h5>'.$row['additional_info'].'</h5>

                      <p>Please click refresh button to resume after the announcement</p>

                  </div>

                  </div>



                </div>

                    <img class="modal-content" id="img01">

                    </div>';

                  $dataid = $row['id'];

          }

      }



        ?>

        </div>



        <script>

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

My AJAX code
This is my AJAX code, here is where I got the problem the modal will not load right after I clicked the button, before it will work, I need to refresh the page how to fix this problem

 $('.announcement').on("click", function () {

        $.confirm({

            title: 'Announcement',

            content: '' +

                '<form action="" class="formName">' +

                '<div class="form-group">' +

                '<label>Announcement Info</label>' +

                '<input type="text" placeholder="Enter announcement here" class="add-info form-control" required />' +

                '</div>' +

                '</form>',

            buttons: {

                formSubmit: {

                    text: 'Submit',

                    btnClass: 'btn-blue',

                    action: function () {

                        var addInfo = this.$content.find('.add-info').val();

                            $.confirm({

                                type: 'red',

                                theme: 'material',

                                title: 'Are you sure you want to make an announcement?',

                                content:'<strong>Announcement Info:</strong> ' + addInfo,

                                buttons: {

                                    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);



                                                }



                                            });



                                        }



                                    },

                                    No: {

                                        text: 'No', // With spaces and symbols

                                        action: function () {

                                            $.alert('Announcement Cancelled');

                                        }

                                    }

                                }

                            });

                    }

                },

                cancel: function () {

                    //close

                },

            },

            onContentReady: function () {

                // bind to events

                var jc = this;

                this.$content.find('form').on('submit', function (e) {

                    // if the user submits the form by pressing enter in the field.

                    e.preventDefault();

                    jc.$$formSubmit.trigger('click'); // reference the button and click it

                });

            }

        });



    });

I am new to ajax coding and syntax help me to finish this project please.

$('.announcement').on("click", function () {

        $.confirm({

            ///YOUR LONG CODE

         });

    //ALL YOU NEED

    return false;

});

just return false as firing an event when you submit a button inside a form.. :)