move onclick to messages.js

Author: simonLeary42

resources/templates/header.php

@@ -140,14 +140,7 @@
     echo "<div id='messages'>";
     $messages = UnityHTTPD::getMessages();
     if (count($messages) >= 3) {
-        echo "
-          <button
-            id='clear_all_messages_button'
-            onclick=\"$('#messages .message button').click();\"
-          >
-            Clear All Messages
-          </button>
-        ";
+        echo "<button id='clear_all_messages_button'>Clear All Messages</button>";
     }
     foreach ($messages as [$title, $body, $level]) {
         echo sprintf(
@@ -156,19 +149,9 @@
                 <h3>%s</h3>
                 <p>%s</p>
                 <button
-                  onclick=\"
-                    this.parentElement.style.display='none';
-                    $.ajax({
-                        url: '/panel/ajax/delete_message.php',
-                        method: 'POST',
-                        data: {
-                          'level': '%s',
-                          'title': '%s',
-                          'body': '%s',
-                        }
-                    });
-                    hideClearAllMessagesButtonIfAllMessagesAlreadyCleared();
-                  \"
+                  data-level='%s'
+                  data-title='%s'
+                  data-body='%s'
                 >
                   ×
                 </button>

webroot/js/messages.js

@@ -4,3 +4,25 @@ function hideClearAllMessagesButtonIfAllMessagesAlreadyCleared() {
         $('#clear_all_messages_button').hide();
     }
 }
+
+$(document).ready(function () {
+    $('#messages').on('click', '.message button', function () {
+        var button = $(this);
+        var message = button.parent();
+        message.hide();
+        $.ajax({
+            url: '/panel/ajax/delete_message.php',
+            method: 'POST',
+            data: {
+                'level': button.data('level'),
+                'title': button.data('title'),
+                'body': button.data('body')
+            }
+        });
+        hideClearAllMessagesButtonIfAllMessagesAlreadyCleared();
+    });
+
+    $('#clear_all_messages_button').on('click', function () {
+        $('#messages .message button').click();
+    });
+});