jQuery addClass example

Change class name on click in jQuery

by jmpp77

HTML

<div id="messages">
  
</div>

<form action="" id="formsend">
  <input type="text" id="message">
</form>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#messages {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 350px;
  overflow-y: auto;
}
#messages p {
  border: thin solid gray;
  border-radius: 2px;
  padding: 0.5rem 1rem;
}

JavaScript

const token = '2ef1105995f57a5d0eb5495323866fe5'
const user_id = 6;

let allMessages = [];
let lastRequestTimestamp = 0;
let cursorBegin, cursorEnd;

// Quand la page se charge ...
$(function() {
  $('#messages').on('scroll', onMessageScroll);
 
  getNewMessages(); 
});

function getNewMessages() {
	API.getAllMessages(lastRequestTimestamp).done(function(response) {
    setTimeout(getNewMessages, 3000);

    if (lastRequestTimestamp === 0) {
      allMessages = response.result.talk;
      cursorEnd = allMessages.length;
      cursorBegin = cursorEnd - 10;
      lastRequestTimestamp = response.result.last_timestamp;
    }
    else {
      if (response.result.talk.length === 0) return;
      lastRequestTimestamp = response.result.last_timestamp;
      allMessages = allMessages.concat(response.result.talk);
      cursorEnd = allMessages.length;
    }

    renderMessages(allMessages.slice(cursorBegin, cursorEnd));
  });
}

function onMessageScroll() {
	if ($(this)[0].scrollTop === 0) {
  	cursorBegin = cursorBegin - 10;
    
    renderMessages(allMessages.slice(cursorBegin, cursorEnd));
  }
}

// Met à jour le DOM avec une liste de messages pré-établis
function renderMessages(messages) {
  	$('#messages').html(
    	messages.map(message => `<p><strong>&lt;${message.user_name}&gt;</strong> : ${message.content}</p>`)
    );
}

// Service API

const API = {
	getAllMessages(timestamp = 0) {
  	return $.ajax({
    	url : `//greenvelvet.alwaysdata.net/kwick/api/talk/list/${token}/${timestamp}`,
      dataType : 'jsonp'
    });
  },
  
  sendMessage(message) {
  	return $.ajax({
    	url : `//greenvelvet.alwaysdata.net/kwick/api/say/${token}/${user_id}/${encodeURIComponent(message)}`,
      dataType : 'jsonp'
    });
  }
}