ajax refresh causing modal issues

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

Answer 2

Solution 1: I think the solution is simple. keep your javascript as it is. Place your modal HTML far at the bottom where the ending body tag is. This way when the DOM changes your modal HTML is not affected. This should work.

Solution 2: Place your modal HTML code in a totally separate HTML file. When the user clicks the button to call the modal use ajax to get the modal HTML. Append the HTML to the body tag. Then call your modal with javascript.