Ajax刷新导致模式问题

Question

我的网站上有一个简单的“通知”系统，该系统要求页面上的值每隔x秒更新一次（如果数据库已更新）。

但是，我遇到了一个问题。

我的刷新工作正常，但是，我添加了一个模式，当用户单击元素（数据库的输出）时，该模式会弹出。

无论用户希望它停留多长时间，它都应该停留很长时间，问题在于，由于来自AJAX请求的刷新，它正在重置HTML并再次隐藏模式。

我似乎找不到解决此问题的方法，因为我对AJAX和jQuery还是很陌生，并且无法处理某些可以正常工作的代码。

这是我用来每5秒将“ r_notif.php ”页面加载到指定div中的AJAX：

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

以下是我用来切换模式的jQuery：

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

最后，这是我的r_notif.php页面：

<?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
    }
?>

因此，我真正需要帮助的是使模式保持打开状态，而不是每5秒钟关闭一次（由于刷新请求）。

如果有人可以帮助我，将不胜感激！

另外，如果您看到我可以“更新”我的代码的任何方式，也非常欢迎您说:)

干杯

Answer 1

好的。我们使用$.get而不是load，因为它提供了更多的控制权...然后在将数据放入文档之前，如果最初不存在hide类，则将其删除。

这是代码的样子……

$(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

解决方案1：我认为解决方案很简单。 保持JavaScript原样。 将模式HTML放置在结束body标签所在的底部。 这样，当DOM更改您的模式HTML时，不会受到影响。 这应该工作。

解决方案2：将模式HTML代码放在完全独立的HTML文件中。 当用户单击按钮以调用模式时，请使用ajax获取模式HTML。 将HTML附加到body标签。 然后使用javascript调用您的模态。