One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function:
function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) {
console.log('Attempting to execute notification');
var notificationArea = $('#notification_area');
var notificationHtml;
notificationHtml += '<div class="container">';
notificationHtml += '<div class="col-md-' + notificationSize + ' col-centered">'; // column
notificationHtml += '<div class="draggable panel panel-pink">';
notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
notificationHtml += notificationTitle;
notificationHtml += '</div>';
notificationHtml += '<div class="panel-body">';
notificationHtml += notificationContent;
notificationHtml += '</div>';
notificationHtml += '</div>';
notificationHtml += '</div>'; // end column
notificationHtml += '</div>';
$("#notification_area").prepend(notificationHtml);
$('.draggable').draggable();
}
The issue I am facing is that although I declare the draggable class, it only works for the first notification created. Is there a way to make all divs with that class draggable?
HTML Structure:
<div id="notification_area">
<!-- Notifications will automatically be added here. -->
</div>
Modified full code:
var ws = new WebSocket('ws://localhost:8181/');
var isConnected = false;
function initializeWebSockets() {
ws.onmessage = function (messageEvent) {
receiveMessage(messageEvent.data);
};
ws.onopen = function () {
onConnectionOpen();
};
ws.onclose = function () {
onConnectionClose();
}
}
function receiveMessage(messageData) {
var messageParts = messageData.includes('\\') ? messageData.split('\\') : messageData;
if (messageData.includes("\\")) {
if (messageParts[0] == "compose:show_custom_notification") {
displayBootstrapNotification(messageParts[1], messageParts[2], messageParts[3], messageParts[4]);
}
}
else {
if (messageData == "compose:authentication_complete") {
console.log('Authentication to WebSocket server has been completed.');
}
if (messageData == "compose:authentication_failed") {
sendMessage("client_identity_token " + habboSso);
}
}
}
function onConnectionOpen() {
console.log('Connected to the WebSocket server.');
isConnected = true;
sendMessage("client_identity_token " + habboSso);
}
function onConnectionClose() {
if (!isConnected) {
console.log('Failed to connect to the WebSocket server.');
}
else {
console.log('The connection to the WebSocket server was unexpectedly closed.');
}
}
function sendMessage(message) {
if (isConnected) {
ws.send(message);
}
}
initializeWebSockets();
function displayBootstrapNotification(notificationTitle, notificationContent, notificationColor, notificationSize) {
console.log('Attempting to execute notification');
var notificationArea = $('#notification_area');
var notificationHtml;
const randomId = '' + new Date().getTime() + '_' + Math.random();
notificationHtml += '<div class="col-md-' + notificationSize + ' col-centered">';
notificationHtml += '<div id="' + randomId + '" class="draggable panel panel-pink">';
notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
notificationHtml += notificationTitle;
notificationHtml += '</div>';
notificationHtml += '<div class="panel-body">';
notificationHtml += notificationContent;
notificationHtml += '</div>';
notificationHtml += '</div>';
notificationHtml += '</div>';
$("#notification_area").prepend(notificationHtml);
setTimeout(function() {
const element = $('#'+randomId);
element.removeAttr('id');
element.draggable();
}, 0);
}