JQuery UI Dialog box for Live Chat User

Question

I am building a Live Chat box for each user, using jquery UI. Here is my codes:

This is the button for users to click on to chat with a certain member, ie, 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>

And below is the Jquery code I used to call the popup window when the start chat button is clicked. But, the popup window does not jump out.

<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>

My expectation is to have the popup window as formatted.

You can take a look at the demo at hiteachers[dot]com/clogin.php username (Tên đăng nhập) box : test6 password (Mật khẩu): Test6 (capital T)

and hit sign in (Đăng nhập) button for the start chat button for your review.

Your help is appreciated.

Answer 1

Based on your code and your HTML, I do not see an element with the id user_model_details . I think this is the root issue and causes $('#user_model_details').html(modal_content); to fail to really do anything.

Please review: https://jsfiddle.net/Twisty/vycmkfLe/26/

I added the following HTML:

<div id="user_model_details">
</div>

I also updated your code.

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);
  }

I didn't see anything wrong with your code, yet this is a bit more structured and in alignment with using jQuery.

Hope that helps.