title: Retrieve messages on Page load Strophe js
body: <p>I am trying to retrieve the messages whenever Uses logs in and the page loads. Right now I can able to retrieve the messages whenever the User sends the message to other User i.e., with the onMessage function. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>var archive = [];
  
  // Retrives the messages whenever User sends the messages to Other User.
  // TODO: Should be better when User logins and page loads
  
  var q = {
      onMessage: function(message) {
          try {
              var id = message.querySelector('result').getAttribute('id');
              var fwd = message.querySelector('forwarded');
              var d = fwd.querySelector('delay').getAttribute('stamp');
              var msg = fwd.querySelector('message');
              var msg_data = {
                  id:id,
                  with: Strophe.getBareJidFromJid(msg.getAttribute('to')),
                  timestamp: (new Date(d)),
                  timestamp_orig: d,
                  from: Strophe.getBareJidFromJid(msg.getAttribute('from')),
                  to: Strophe.getBareJidFromJid(msg.getAttribute('to')),
                  type: msg.getAttribute('type'),
                  body: msg.getAttribute('body'),
                  message: Strophe.getText(msg.getElementsByTagName('body')[0]),
                  avatar:'images/default_avatar_image.png'
              };
              archive.val(archive.val() + msg_data.from + ":" + msg_data.message + "\n" + msg_data.to + ":" + msg_data.message + "\n");
      archive.scrollTop(archive[0].scrollHeight - archive.height());
              console.log('xmpp.history.message',msg_data.message);
          } catch(err){
              if(typeof(err) == 'TypeError'){
                  try {
                      console.log(err.stack)
                  } catch(err2){
                      console.log(err,err2);
                  }
              }
          }
          return true;
      },
      onComplete: function(response) {
          console.log('xmpp.history.end',{query:q,data:data,response:response});
      }
  };
  
  console.log('xmpp.history.start',{query:q});
  
  
  function onMessage(msg) {
  
      // Calls whenever User receives the messages 
      // and shows the received message in messagebox
  
      var fromJid = msg.getAttribute("from"),
          bareFromJid = Strophe.getBareJidFromJid(fromJid),
          type = msg.getAttribute("type"),
          elems = msg.getElementsByTagName("body");
  
      if (type == "chat" &amp;&amp; elems.length &gt; 0) {
          var body = elems[0],
              message = Strophe.getText(body);
  
          showMessage(bareFromJid + ": " + message);
  
          connection.mam.query(Strophe.getBareJidFromJid(connection.jid), q);
  }
  
      return true;
  }
  
  function send() {
  
      // Calls whenever User sends the messages
      // and shows the message in messagebox
  
      var to = $('#to-jid').get(0).value,
          myBareJid = Strophe.getBareJidFromJid(connection.jid);
          message = $('#message').val(),
          reply = $msg({to: to, type: 'chat'})
              .c("body")
              .t(message);
  
      connection.send(reply.tree());
      showMessage(myBareJid + ": " + message);
  }
  
  $(document).ready(function () {
      connection = new Strophe.Connection(BOSH_SERVICE);
      archive = $("#archive-messages");
      archive.val("");
      connection.rawInput = function (data) { log('RECV: ' + data); };
      connection.rawOutput = function (data) { log('SEND: ' + data); };
  
      Strophe.log = function (level, msg) { log('LOG: ' + msg); };
  
      $("#send").bind('click', send);
  
  });
  </code></pre>
  
  <p>So what happens in my code is whenever User receives the message, then all the messages be retrieved between those two Users. </p>
  
  <p>How can I retrieve the messages in the chat box when I clicked on the particular User??</p>