javascript - 模态对话框未打开聊天框的 JQuery

Question

我正在尝试制作一个聊天框。一切正常，但当我单击“开始聊天”按钮时，alert显示“对象对象”。否则数据获取就完美了。我只是看不到模态聊天框。

还有另一个几乎类似的示例，但在其中通过放置 <div id="user_model_details"></div> 解决了问题。但本次的情况似乎并非如此。

<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/User.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/User.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<div class="split Connect_Content" id="Connect_Cnt">
  <div id="user_model_details"></div>
  <script>
    $(document).ready(function() {
      fetch_user();
      setInterval(function() {
        fetch_user();
      }, 5000);

      function fetch_user() {
        $.ajax({
          url: "include/abcde.php",
          method: "POST",
          success: function(data) {
            $('#Connect').html(data);
          }
        })
      }

      function make_chat_dialog_box(to_user_id, to_username) {
        var modal_content = '<div id="user_dialog_' + to_user_id + '" class="user_dialog" title="Chat window with ' + to_username + '">';

        //alert (modal_content);
        modal_content += '<div style="height:30%; border:1px solid #ccc; overflow-y: scroll; margin-bottom:3%; padding:5%;" class="chat_history" data-toid="' + to_user_id + '" id="chat_history_' + to_user_id + '">';
        modal_content += '</div>';

        modal_content += '<div class="form-group">';
        modal_content += '<textarea name="chat_message_' + to_user_id + '" id="chat_message_' + to_user_id + '" class="form-control"></textarea>';
        modal_content += '</div><div class="form-group" align="right">';
        modal_content += '<button type="button" name="send_chat" id="' + to_user_id + '" class="btn btn-info send_chat">Send</button></div></div>';
        alert(modal_content);
        var test = $('#user_model_details').html(modal_content);
        alert(test);
      }

      $(document).on('click', '.start_chat', function() {
        var to_user_id = $(this).data('toid');
        var to_username = $(this).data('tousername');
        //alert (to_user_id);
        //alert (to_username);
        make_chat_dialog_box(to_user_id, to_username);
        $("#user_dialog_" + to_user_id).dialog({
          autoOpen: false,
          width: 400
        });
        $('#user_dialog_' + to_user_id).dialog('open');
      });
    });
  </script>
</div>

Answer 1

终于发现这个错误了。极其愚蠢的错误。我关闭了 </div>在页面末尾，而不是在同一行中将其关闭，如下所示:

<div class="split Connect_Content" id="Connect_Cnt"></div>

</div>页尾的内容需要删除。它解决了问题。抱歉打扰大家了。