javascript - Modal Dialog Box Not Opening JQuery for Chatbox
问题描述
I am trying to make a chatbox. Everything is working properly but when I click the "Start Chat" button, the alert
shows "Object Object". Otherwise data fetching is perfect. I just can't see the modal chat box.
There is another almost similar example but in it the issue got solved by putting the <div id="user_model_details"></div>
while that doesn't seem to be the case in this one.
<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>
解决方案
终于找到了这个错误。极其愚蠢的错误。我</div>
在页面末尾关闭了,而不是像这样在同一行关闭它:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div>
在页尾需要擦除。它解决了这个问题。很抱歉打扰各位。
推荐阅读
- c# - C#:应用程序在 SystemTray 中带有 NotifyIcon -> 无法添加上下文菜单
- c# - 包含链式 HTTP 请求的 ASP.NET C# WebApi 的性能问题
- html - Webpack、jinja 模板和静态路径
- python - 无法解密python中的数据来自Angular的加密数据
- mysql - MySQL 将子查询与别名相关联
- c# - 我在使用 C# 中的语句时遇到问题
- javascript - 向可能不在页面上的元素添加事件侦听器?
- python - 在正则表达式python中的特定字符串之后提取连续字符串
- matlab - 为什么 sum 函数会为 1x3 double 提供“数组索引必须是正整数或逻辑值”错误?
- python - 如何根据条件跳过循环中的一个或多个元素?