How to Display Recent message in MessageBox?

Question

I'm using jquery and javascript to display messages, in backend I'm reversing list of messages but it displaying first message but I need recent sent and received message.

 function scrollToLatestChatMessage(chatContainer) {
   console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
   $(".msg_container_base").animate({
     scrollTop : $('.msg_container_base')[0].scrollHeight
   });
  console.log("Entry::scrollToLatestChatMessage in chat.js ");
}       
  var str = '<div class="popup-box chat-popup chat-window" id="channel-'
        + channelId
        + '">'
        + ' <div class="col-xs-12 col-md-12">'
        + ' <div class="panel panel-default">'

        + '  <div class="top-bar">'
        + '       <div class="col-md-9 col-xs-9">'
        + '<img src="'
        + imageName
        + '" class="img-chat-box  img-thumbnail" >'
        + '<span>'
        + name
        + '</span>'
        + '</div><div class="col-md-3 col-xs-3" style="text-align: right;">'
        + '<a href="javascript:void(0)"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>'
        + ' <a href="javascript:close_popup(\''
        + channelId
        + '\')"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>'
        + ' </div></div>'

        + '<div class="panel-body msg_container_base">'
        + '<input type="hidden" name="friendId" id="friendId" value="'
        + toUserId
        + '"/>'
        + '<input type="hidden" name="channelId" id="channelId" value="'
        + channelId
        + '"/>'
        + '<input type="hidden" name="chatType" id="chatType" value="'
        + chatType
        + '"/>'
        + '</div>'
        + '<div class="panel-chat-footer">'
        + '<div class="input-group">'
        + '<input id="txtSendMessage" type="text"'
        + 'class="chat-text-box input-sm chat_input"'
        + ' placeholder="Write your message here..." required="required" /> <span'
        + ' class="input-group-btn">'
        + '<button class="btn btn-primary btn-sm" id="sentMessageBtn">Send</button>'
        + '</span>' + '</div>' + '</div>' + '</div>';
html = $.parseHTML(str), $("body").append(html);

Its displaying first message but I need recent message which is sent or received.chat image displaying first message.

Provide HTML for `.msg_container_base` – User863 Jun 24 '19 at 09:05 — User863, Jun 24 '19 at 09:05

score 0 · Accepted Answer · answered Jun 24 '19 at 09:10

0

try to use the latest method

 function scrollToLatestChatMessage(chatContainer) {
   console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
   $(".msg_container_base").animate({
     scrollTop : $('.msg_container_base').prop("scrollHeight")
   },1000);
  console.log("Entry::scrollToLatestChatMessage in chat.js ");
}

answered Jun 24 '19 at 09:10

Nishal K.R

1,090
11
21

its scrolling slowly to recent message from first but what i need is it should display recent message if i open chat box! – Darshan Sid Jun 24 '19 at 09:13
@DarshanSid reduce from `1000` to `1`. – Nishal K.R Jun 24 '19 at 09:14
ya its working but problem is in millisecond its loading and displaying recent message but what if i have crores of messages, it will be affected speed right if i open chat box? – Darshan Sid Jun 24 '19 at 09:30
@DarshanSid You should need to limit the messages on the first time loading. And while scrolling, you need to calls the next set of chats – Nishal K.R Jun 24 '19 at 09:34
@DarshanSid If you think that was helpful please give me upvote – Nishal K.R Jun 24 '19 at 09:34
thank you for solution can u help with code how to limit the messages and on scrolling call next set?? – Darshan Sid Jun 24 '19 at 09:37
@DarshanSid: You need to fetch limited count messages from the database. And check the scroll reach on top, fetch again the balance limited chat messages [check this](https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll) – Nishal K.R Jun 24 '19 at 09:47

How to Display Recent message in MessageBox?

1 Answers1