javascript - 实时聊天用户的 JQuery UI 对话框
问题描述
我正在使用 jquery UI 为每个用户构建一个实时聊天框。这是我的代码:
这是用户点击与某个成员聊天的按钮,即id = 1,name = Johndoe:
<button type="button" class="btn btn-info btn-xs start_chat" data-touserid="1" data-tousername="Johndoe">Start Chat</button></td>
下面是我用来在单击开始聊天按钮时调用弹出窗口的 Jquery 代码。但是,弹出窗口并没有跳出来。
<script>
$(document).ready(function(){
function make_chat_dialog_box(to_user_id, to_user_name)
{
var modal_content = '<div id="user_dialog_'+to_user_id+'"
class="user_dialog" title="You have chat with '+to_user_name+'">';
modal_content += '<div style="height:400px; border:1px solid #ccc;
overflow-y: scroll; margin-bottom:24px; padding:16px;"
class="chat_history" data-touserid="'+to_user_id+'"
id="chat_history_'+to_user_id+'">';
modal_content += fetch_user_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 chat_message"</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>';
$('#user_model_details').html(modal_content);
}
$(document).on('click', '.start_chat', function(){
var to_user_id = $(this).data('touserid');
var to_user_name = $(this).data('tousername');
make_chat_dialog_box(to_user_id, to_user_name);
$("#user_dialog_"+to_user_id).dialog({
autoOpen:false,
width:400
});
$('#user_dialog_'+to_user_id).dialog('open');
$('#chat_message_'+to_user_id).emojioneArea({
pickerPosition:"top",
toneStyle: "bullet"
});
});
});
</script>
我的期望是格式化弹出窗口。
您可以在 hiteachers[dot]com/clogin.php 上查看演示 用户名(Tên đăng nhập)框:test6 密码(Mật khẩu):Test6(大写 T)
并点击登录 (Đăng nhập) 按钮以开始聊天按钮以供您查看。
感谢您的帮助。
解决方案
根据您的代码和 HTML,我没有看到带有 id 的元素user_model_details
。我认为这是根本问题,导致$('#user_model_details').html(modal_content);
无法真正做任何事情。
请查看:https ://jsfiddle.net/Twisty/vycmkfLe/26/
我添加了以下 HTML:
<div id="user_model_details">
</div>
我还更新了你的代码。
JavaScript
function make_chat_dialog_box(to_user_id, to_user_name) {
var contentDiv = $("<div>", {
id: "user_dialog_" + to_user_id,
class: "user_dialog",
title: "You have chat with " + to_user_name
});
$("<div>", {
id: "chat_history_" + to_user_id,
class: "chat_history"
}).css({
height: "400px",
border: "1px solid #ccc",
"overflow-y": "scroll",
"margin-bottom": "24px",
padding: "16px"
}).data("to-user-id", to_user_id).html("" /*fetch_user_chat_history(to_user_id)*/).appendTo(contentDiv);
$("<div>", {
class: "form-group"
}).appendTo(contentDiv);
$("<textarea>", {
name: "chat_message_" + to_user_id,
id: "chat_message_" + to_user_id,
class: "form-control chat_message"
}).appendTo($(".form-group", contentDiv));
$("<div>", {
class: "form-group",
align: "right"
}).appendTo(contentDiv);
$("<button>", {
type: "button",
name: "send_chat",
id: to_user_id,
class: "btn btn-info send_chat"
}).html("Send").appendTo($(".form-group:eq(1)", contentDiv));
$('#user_model_details').html(contentDiv);
}
我没有看到您的代码有任何问题,但是这更加结构化并且与使用 jQuery 保持一致。
希望有帮助。
推荐阅读
- angular - 使用 Karma 的 Angular 单元测试,测试分支或 serviceSpy () 出错
- keras - 如何将 Pandas 列作为一维字符串张量中的一批句子传递?
- angular - 如何以角度获取数组数组中的值?
- node.js - 如何正确使用 NodeJS 和 Puppeteer 将 SPA 的整页打印为 pdf?
- python - 用于绘制图表演变的 Python 脚本,例如 Paraview
- excel - VBA TextBox.Text 值未正确写入电子表格
- php - 为什么子类不能继承动态设置的属性类?
- jquery - Mongo - 仅通过 _id (findById) 查找是否比使用 _id 和索引字段查找以利用索引更快?
- asp.net-mvc - 在区域管理员视图 ASP.NET MVC 中获取内容文件夹图像
- java - Spring AOP 关闭 Spring Security Annotations