[英]Modal Dialog Box Not Opening JQuery for Chatbox
我正在尝试制作一个聊天框。 一切正常,但是当我单击“开始聊天”按钮时, 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>
终于发现这个错误了。 极端愚蠢的错误。我在页面末尾关闭了</div>
而不是在同一行中关闭它,如下所示:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div>
在页尾需要擦除。 它解决了这个问题。 抱歉打扰各位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.