实时更新消息 - 即使有 Javascript 也没有加载 [HTML + PHP + Javascript]答案

【问题标题】：Updating Messages Live - Javascript is not loaded even due its there [HTML + PHP + Javascript]实时更新消息 - 即使有 Javascript 也没有加载 [HTML + PHP + Javascript]
【发布时间】：2016-11-26 07:40:26
【问题描述】：

更新：问题已解决！您可以将 javascript 移出循环并向其传递参数，查看 cmets 以查看完整的灵魂（：谢谢！

我尽量保持简短，但从这一行开始，它很重要！ :)

这就是我的循环的工作方式：

1) 我对找到的所有消息使用 while 循环（有效）

2) 然后我将消息数据插入到 while 循环内的 html 模板中..

3) 然后我给每条消息一个带有特殊 id 的 onclick 函数..

这是奇怪的部分，刷新后一切正常。

在我解释具体问题之前，让我先给你看一下源代码：

这是循环的开始，我只是抓取该特定消息的数据，然后关闭 php 以继续循环内部...

    <?php
    while($inbox = mysql_fetch_array($sqlinbox))
        {

        $pm_id = $inbox['id'];
        $sender = $inbox['sender'];
        $subject = $inbox['subject'];
        $message = $inbox['message'];

        ?>

现在这是循环内部发生的事情，

首先我自己生成味精：

                   <li>
                    <a href="javascript:;" onclick="loadmsg<?php echo $pm_id; ?>()">
                      <center>
                      <div>
                        <strong>
                          <span class=" label label-danger">
                            <?php echo $sender; ?>
                          </span>
                        </strong>
                      </div>
                      </center>
                      <div style="width:80%; text-align:center; margin:auto;"><?php echo $message; ?></div>
                    </a>
                  </li>

然后我生成一个简单的 javascript 函数，用于在 div 中加载该 msg...我知道大主题有很多可能性，但问题非常简单但超出我的知识范围，请帮助让我们继续.. 这是脚本：

 <?php
                        echo '
                        <script>
                        function loadmsg' . $pm_id . '() {
                        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("page-wrapper").innerHTML =
                        this.responseText;
                        }
                        };
                        xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=' . $pm_id . '", true);
                        xhttp.send();
                        }
                        </script>
                        ';
 ?>

当然让我们关闭while循环..：

<?php
}
?>

所以基本上输出如下：

                   <li>
                    <a href="javascript:;" onclick="loadmsg16()">
                      <center>
                      <div>
                        <strong>
                          <span class=" label label-danger">
                            orburgel222@gmail.com                              </span>
                        </strong>
                      </div>
                      </center>
                      <div style="width:80%; text-align:center; margin:auto;">lllllllllll</div>
                    </a>
                  </li>
<script>
 function loadmsg16() {
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 document.getElementById("page-wrapper").innerHTML =
 this.responseText;
 }
};
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=16", true);
xhttp.send();
}
</script>

Bigger example (more then 1 msg) - Pastebin.com

现在一切正常，当我得到一个新的 msg 并刷新页面时，脚本正在按预期生成，当我单击 msg 时，它会将名为“page-wrapper”的 div 更改为 msg 特定页面 (/LinkMonster/viewmsg.php?msg_id=16)

但是，总是有一个但是，我想把事情提升到一个新的水平，并在不刷新页面本身的情况下实时刷新消息，所以当我收到一条消息时，它只会在应该的地方弹出，所以我做到了那：

<div id="inboxmsgs">
                    <?php
include("./UpdateMsgs.php");
    ?>
                  </div>
                  <script>
                    function updateMSGS()
                    {
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("inboxmsgs").innerHTML =
                    this.responseText;
                    }
                    };
                    xhttp.open("GET", "/LinkMonster/UpdateMsgs.php", true);
                    xhttp.send();
                    }
                    setInterval("updateMSGS()",1000); //call updateRow() function every 1 seconds.
                  </script>

所以基本上我将这个名为“inboxmsgs”的 div 用于第一次将 msgs 加载到该 div 中，然后我使用相同的 javascript 函数和每秒 setIntreval 一次又一次地加载消息

同样有效！我给自己发了一条消息，它会弹出，没有任何问题，直播，没有刷新......

如果一切正常，我为什么会在这里？

每条消息后加载的 javascript 函数并没有真正加载到页面中，只是加载到 html 中，不要误会我的意思，它们是在应有的位置生成的，并且它们也具有正确的值，只是 chrome 说即使由于它的存在，它也找不到该功能！如果我刷新页面它只会找到该功能，就像我需要告诉 chrome 查询该功能或其他东西..这对你有什么意义吗？请随时提出任何问题，甚至为那些只想要它的人提出完整的系统（：

只是为了确保您理解我的意思：假设我在收件箱中有 3 条消息，如果我点击它们，一切正常，它会正确显示消息页面，但是我得到一个新的消息，消息正确显示，javascript 也被正确加载，我可以仍然单击我已经拥有的所有 3 条消息，但是如果我单击新的消息（num4），chrome 说我找不到该功能 [例如：loadmsg16()]，如果我发送另一个消息，我仍然可以访问我的所有 3 条消息已经有，但现在有 2 条额外的消息我无法点击，因为它们的功能没有加载，现在如果我刷新页面，所有 5 条消息都是完全可点击的！

完整源代码：

                            <?php
    while($inbox = mysql_fetch_array($sqlinbox))
        {
        $pm_id = $inbox['id'];
        $sender = $inbox['sender'];
        $subject = $inbox['subject'];
  $message = $inbox['message'];

        ?>
                  <li>
                    <a href="javascript:;" onclick="loadmsg<?php echo $pm_id; ?>()">
                      <center>
                      <div>
                        <strong>
                          <span class=" label label-danger">
                            <?php echo $sender; ?>
                          </span>
                        </strong>
                      </div>
                      </center>
                      <div style="width:80%; text-align:center; margin:auto;"><?php echo $message; ?></div>
                    </a>
                  </li>

                  <li class="divider"></li>
                        <?php
                        echo '
                        <script>
                        function loadmsg' . $pm_id . '() {
                        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("page-wrapper").innerHTML =
                        this.responseText;
                        }
                        };
                        xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=' . $pm_id . '", true);
                        xhttp.send();
                        }
                        </script>
                        ';
        }
    ?>

【问题讨论】：

为什么，我的意思是你为什么要为每条消息创建不同的功能做完全相同的事情？
如果您将loadmsg<?php echo $pm_id; ?>() 更改为loadmsg(<?php echo $pm_id; ?>)，它会变得更容易、更干净，并且可以立即工作。请注意，我将 id 作为参数而不是函数名称的一部分传递。然后将你的函数放在循环之外，只将它声明为loadmsg(id)，并根据需要使用函数内部的 id。
在 loadmsg(id) 函数中，如何调用该行中的 id？ xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=' . $pm_id . '", true);我试过了。 ID 。和。 $id 。两者都没有返回正确的 id：/
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id="+id, true);
没关系，我将其替换为："/LinkMonster/viewmsg.php?msg_id='" + id + "'"

标签： javascript php html messages updating

【解决方案1】：

如果您将loadmsg<?php echo $pm_id; ?>() 更改为loadmsg(<?php echo $pm_id; ?>)，它会更容易、更清洁并且可能会立即工作。请注意，我将 id 作为参数而不是函数名称的一部分传递。然后将你的函数放在循环之外，只将它声明为loadmsg(id)，并将函数内的id用作

xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id="+id, true);

【讨论】：