ajax刷新导致模态问题

Question

I have a simple "notification" system on my website which requires the values on the page to update every x seconds (if the database has updated).

However, I have run into an issue.

My refresh is working perfectly, but, I have added a modal which pops up when the user clicks on the element (output from the database).

It's supposed to stay up for however long the user intends it to stay up, the problem is, because of the refresh coming from the AJAX request, it is resetting the HTML and hiding the modal again.

I can't seem to find a way of getting around this as I'm still very new to AJAX and jQuery and couldn't work up some code that would work as intended.

This is the AJAX that I'm using to load my "r_notif.php" page into a specified div every 5 seconds:

$(document).ready(function(){
    setInterval(function(){
        $('#_aj-rDn1').load('r/r_notif.php');
    }, 5000);
});

and the following is my jQuery which I am using to toggle the modal:

jQuery(function($){
    $('#_aj-rDn1').click(function(){
        $('#_js_nmO1').toggleClass('hide'); /* this is the modal */
    });
});

and finally, this is my r_notif.php page:

<?php
$result = mysqli_query($conn, "SELECT notif FROM users WHERE username = 'username'");
while($row = mysqli_fetch_assoc($result)){
    $notif = $row['notif'];
    if($notif > 0){
        echo '<span id="_aj-rDn2">' . $notif . '</span>';
?>
<div id="_js_nmO1" class="hide"> <!-- the modal is hidden by default and is only triggered when #_aj-rDn2 is clicked on. !-->
    <div>
        <div>
            <center>
                <span>Notifications</span>
            </center>
        </div>
        <div>
            <div class="modal-body-inner">
                <div>
                    <div>
                        <div>
                            <span>Testuser</span>
                            <div>
                                <span>commented</span>
                            </div>
                        </div>
                        <div>
                            <span>&#34;simple entity&#34;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
    }
?>

So, all I really need help with is making it so that the modal stays open, rather than it closing ever 5 seconds (because of the refresh request).

If anyone could help me out, it would be much appreciated!

Also, if you see any way I could "upgdate" my code, you are more than welcome to say :)

Cheers

Answer 1

Okay... We use $.get instead of load as it gives more control... then before putting data in our document we remove the hide class if it didn't exist initially.

Here's what the code would look like...

$(document).ready(function(){
    setInterval(function(){
        var modalDisplayed = ! $('#_js_nmO1').hasClass('hide'); // Check if modal is displayed already
        // Ajax function
        $.get( "r/r_notif.php", function( data ) {
            var $data = $(data); // Convert data into jQuery
            if ( modalDisplayed ) {
                // If modal is displayed remove the class before $data is added to page
                $data.find('#_js_nmO1').removeClass('hide');
            }
            // Now put all content in #_aj-rDn1
            $( "#_aj-rDn1" ).html( $data );
        });
    }, 5000);
});