Good Evening All!

I am trying to do a small scale chat module.

What I have:
So far I have been able to implement the following:
1. Chat Window
2. Chat message form
3. Chat gets saved without page reload (using AJAX)
4. Chat Messages are displayed on left (the other person chatting) and right (chats posted by the chat form)
5. Only logged in users can use the chat.

The code for the same is (chat-forum.php):
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Chat Module - Forum' clonable='1'>
   <cms:editable name="user_id" type="relation" masterpage="users/index.php" has="one" order="1" />
   <cms:editable name='chat_message' type='text' required='1' order='2' />
</cms:template>

<cms:if k_logged_out >
    <cms:redirect "<cms:login_link />" />
</cms:if>

<!DOCTYPE html>
<html>
   <head>
      <title>Chat</title>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
      <style type="text/css">
         /* Chat Module */
         .gxcpl-chat-window {
            border: 1px solid #cccccc;
            background-color: #ffffff;
            padding: 10px;
            border-radius: 4px;
            height: 500px;
            overflow-y: scroll;
            overflow-x: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         }
         .gxcpl-chat-card {
            width: 350px;
            min-height: 1%;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,0.20);
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         }
         .gxcpl-chat-card-blue {
            background-color: #3a7cec;
         }
         .gxcpl-chat-card-green {
            background-color: #2ca24c;
         }
         .gxcpl-chat-card > .gxcpl-chat-card-header {
            font-weight: 600;
            padding: 5px 10px;
         }
         .gxcpl-chat-card > .gxcpl-chat-card-body {
            padding: 5px 10px;
         }
         /* Chat Module */

         /* Spacing */
         .gxcpl-ptop-10 {
            padding-top: 10px !important;
         }
         .gxcpl-ptop-20 {
            padding-top: 20px !important;
         }
         .gxcpl-divider-dark {
            border-bottom: 1px solid rgba(0,0,0,0.25);
         }
         /* Spacing */
      </style>
   </head>
   <body style="margin-top: 10px;">

      <!-- Message Display Window -->
      <div class="container">

         <div class="row">
            <div class="col-md-12 gxcpl-chat-window" id="gxcpl-chat-window">
               <cms:if k_logged_in >
                   <cms:pages masterpage=k_user_template id=k_user_id limit='1'>
                       <cms:set logged_in_user_id = "<cms:show k_page_id />" scope="global" />
                   </cms:pages>
               </cms:if>

               <cms:pages masterpage=k_template_name show_future_entries='1' skip_custom_fields='1' order='asc' >
               <cms:no_results>
               <div class="row">
                  <div class="col-md-4 col-md-offset-4">
                     <h3 class="text-center text-muted">
                        No messages yet!
                     </h3>
                  </div>
               </div>
               </cms:no_results>
               
               <cms:related_pages 'user_id' >
                  <cms:set other_user_id = "<cms:show k_page_id />" scope="global" />
               </cms:related_pages>               
               
               <div class="row">
                  <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                     <div class="gxcpl-chat-card <cms:if logged_in_user_id eq other_user_id >pull-right gxcpl-chat-card-blue<cms:else />pull-left gxcpl-chat-card-green</cms:if>">
                        <div class="gxcpl-chat-card-header" id="chat_user_name"><cms:related_pages 'user_id' ><cms:show ipt_emp_fname /> <cms:show ipt_emp_lname /></cms:related_pages></div>
                        <div class="gxcpl-divider-dark"></div>
                        <div class="gxcpl-chat-card-body" id="chat_msg"><cms:show k_page_title /></div>
                     </div>
                  </div>
                  <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 <cms:if logged_in_user_id eq other_user_id >text-right<cms:else />text-left</cms:if>">
                     <small class="text-muted" id="message_date"></small>
                  </div>                     
               </div>
               <div class="gxcpl-ptop-20"></div>
               </cms:pages>
            
            </div>
         </div>
      </div>
      <!-- Message Display Window -->

      <div class="gxcpl-ptop-10"></div>

      <!-- Form -->
      <div class="container">
         <div class="row">
            <!-- <div class="col-md-12"> -->
            <cms:form
                 masterpage=k_template_name
                 mode='create'
                 enctype='multipart/form-data'
                 method='post'
                 anchor='0'
                 id='chat_message_form'
             >

                 <cms:if k_success >

                     <cms:db_persist_form
                         _invalidate_cache='0'
                         _auto_title='1'
                         k_page_title = "<cms:show frm_chat_message />"
                         user_id="<cms:show k_user_id />"
                     />
                     <cms:if k_success>
                        <cms:set_flash name='submit_success' value='1' />
                        <cms:redirect k_page_link />
                    </cms:if>
                 </cms:if>                   

                 <div class="input-group" style="box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);">
                  <cms:input type="bound" class="form-control" name="chat_message" placeholder="Write your message..." autofocus="autofocus" />
                  <div class="input-group-btn">
                     <button class="btn btn-success" type="submit">
                        <i class="fa fa-send"></i> SEND
                     </button>
                  </div>
               </div>

               <div class="gxcpl-ptop-10"></div>

                 <cms:set submit_success="<cms:get_flash 'submit_success' />" />
                <cms:if submit_success >
                   <div class="alert alert-success" style="padding: 2px 5px; margin-bottom: 0px;">
                    <strong>Success!</strong> Message sent.
                   </div>
               </cms:if>

               <cms:if k_error >
                     <div class="error">
                         <cms:each k_error >
                             <div class="alert alert-danger" style="padding: 2px 5px; margin-bottom: 0px;">
                                <strong>Oops!</strong> Try again.
                             </div>
                         </cms:each>
                     </div>
                 </cms:if>

             </cms:form>
            <!-- </div> -->
         </div>
      </div>
      <!-- Form -->

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

      <script type="text/javascript">
         // Keep Chat window to bottom
         var element = document.getElementById("gxcpl-chat-window");
         element.scrollTop = element.scrollHeight;

         // Save form using ajax
         $(function () {
            $('form').on('submit', function (e) {
               e.preventDefault();
               $.ajax({
                  type: 'post',
                  url: '<cms:show k_site_link />chat-forum.php',
                  data: $('form').serialize(),
                  success: function () {
                     document.getElementById("chat_message_form").reset();
                     //alert('form was submitted');
                  }
               });
            });
         });
      </script>
   </body>
</html>
<?php COUCH::invoke(); ?>


Code for chat-json.php:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:if k_logged_out >
    <cms:redirect "<cms:login_link />" />
</cms:if>
<cms:set logged_in_user_id="<cms:if k_logged_in ><cms:pages masterpage=k_user_template id=k_user_id limit='1'><cms:show k_page_id /></cms:pages></cms:if>" scope="global" />

<cms:content_type 'application/json'/>

{
   "messages":
   [
      <cms:pages masterpage="chat.php" show_future_entries='1' skip_custom_fields='1' order='asc' >
      {
         "message_id":<cms:escape_json><cms:show k_page_id /></cms:escape_json>,
         "username":<cms:escape_json><cms:related_pages 'user_id'><cms:show ipt_emp_fname /> <cms:show ipt_emp_lname /></cms:related_pages></cms:escape_json>,

         "msg_display_class":<cms:escape_json><cms:set other_user_id="<cms:related_pages 'user_id' ><cms:show k_page_id /></cms:related_pages>" scope="global" /><cms:if logged_in_user_id eq other_user_id ><cms:set right="pull-right gxcpl-chat-card-blue" scope="global" /><cms:show right /><cms:else /><cms:set left="pull-left gxcpl-chat-card-green" scope="global" /><cms:show left /></cms:if></cms:escape_json>,

         "message":<cms:escape_json><cms:show k_page_title /></cms:escape_json>,
         "date":<cms:escape_json><cms:date k_page_date format="M d | h:i A" /></cms:escape_json>
      }<cms:if "<cms:not k_paginated_bottom />">,</cms:if>
      </cms:pages>
   ]
}

<?php COUCH::invoke(); ?>


Problem Area:
The problem is that I need to refresh the page to display the new message.
(I feel this is not exactly a CouchCMS issue but an AJAX issue.)

Help For:
If you implement the code and see, you can post the form without a reload. Is it possible to display the new message upon successful submission of the form to all users' chat box who are currently chatting?
I tried to implement the same using the code:
Code: Select all
<script>
var previous = null;
var current = null;
setInterval (function() {
   $.getJSON("<cms:show k_site_link />chat-json.php", function(loadLog) {
               current = JSON.stringify(loadLog);           
                  if (previous && current && previous !== current) {
                      console.log('refresh');
                      location.reload();
                  }
                  previous = current;
        });     
}, 2000);
</script>

but this code is not of much use. as it reloads the page and i do not have the AJAX type effect as in the form (no reload, but form saved).

Regards,
GenXCoders (Aashish)