CODEWITHSUNDEEP
javascriptphpjqueryhtmlmodal-dialog
Jainish Kothary
Jainish Kothary

Reputation: 93

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>

Upvotes: 0

Views: 194

Answers (1)

Jainish Kothary
Jainish Kothary

Reputation: 93

Finally found the mistake in this one. Extreme silly mistake.I closed the </div> at the end of the page rather then closing it in the same line like this:

<div class="split Connect_Content" id="Connect_Cnt"></div>

</div> at end of page needs to be erased. It solved the problem. Sorry to disturb you guys.

Upvotes: 1

Related Questions