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代替加载，因为它提供了更多控制权......然后，在将数据放入我们的文档之前，如果最初不存在，我们会移除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放在最终正文标记所在的底部。这样，当DOM更改时，您的模态HTML不会受到影响。这应该有用。

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

ajax刷新导致模态问题

2 个答案: