Javascript 实时聊天用户的JQuery UI对话框
我正在使用jqueryui为每个用户构建一个实时聊天框。这是我的密码: 这是用户点击与某个成员聊天的按钮,即id=1,name=Johndoe:Javascript 实时聊天用户的JQuery UI对话框,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在使用jqueryui为每个用户构建一个实时聊天框。这是我的密码: 这是用户点击与某个成员聊天的按钮,即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> 开始聊天 下面是我用来在单击开始聊天按钮时调用弹出窗口
<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>
$(文档).ready(函数(){
函数生成聊天对话框(至用户id、至用户名)
{
var modal_内容=“”;
模态_内容+='';
模态内容+=获取用户聊天历史(至用户id);
模态_内容+='';
模态_内容+='';
modal_content+='基于您的代码和HTML,我没有看到id为user_model_details
的元素。我认为这是根本问题,并导致$('#user_model_details').HTML(modal_content)
无法真正做任何事情
请审查:
我添加了以下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);
}
函数生成聊天对话框(至用户id、至用户名称){
var contentDiv=$(“”{
id:“用户对话”+至用户id,
类:“用户对话”,
标题:“您已与“+to_user_name”聊天
});
$("", {
id:“聊天记录”+给用户id,
课程:“聊天室历史”
}).css({
高度:“400px”,
边框:“1px实心#ccc”,
“溢出y”:“滚动”,
“保证金底部”:“24px”,
填充:“16px”
}).data(“to user id”,to_user_id).html(“/*fetch_user_chat_history(to_user_id)*/)。appendTo(contentDiv);
$("", {
班级:“表格组”
}).附录(contentDiv);
$("", {
名称:“聊天室消息”+发送至用户id,
id:“聊天信息”+发送给用户id,
类:“窗体控件聊天信息”
}).appendTo($(“.formgroup”,contentDiv));
$("", {
类:“表单组”,
对齐:“右”
}).附录(contentDiv);
$("", {
键入:“按钮”,
名称:“发送聊天”,
id:to_user_id,
类:“btn btn信息发送\聊天”
}).html(“Send”).appendTo($(“.formgroup:eq(1)”,contentDiv));
$('#用户(模型)详细信息').html(contentDiv);
}
我没有发现您的代码有任何错误,但是这更结构化,并且与使用jQuery保持一致
希望这有帮助。你的问题有点模糊。什么具体不起作用?@Phung of this已经帮助或回答了问题,我希望你能投票或将其标记为答案。嗨,我确实投票了你的答案,但回复信息说“记录了声誉低于15的人的投票,但不要改变酒吧。”所以,我点击了“勾选”来接受这个答案。再次,非常感谢。