.

templates/accounts_bulk_create.html

@@ -40,6 +40,12 @@
     <input type="button" value="Load Data" _="on click createTable()" >
 
 
+    <div role="alert" id="alert" class="alert alert-info "
+    _="on load hide me">
+
+    </div>
+
+
     <div>
         <ul id="users-list">
         </ul>
@@ -102,7 +108,7 @@
                 users.push(user)
                 emails.push(user.email)
                 console.log(user)
-                $("#users-list").append(`<li>Name: ${user.first_name} ${user.last_name}<br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}<br/>
+                $("#users-list").append(`<li>Name: <span class="name">${user.first_name} ${user.last_name}</span><br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}<br/>
                     <form>
                     <input type="text" name="first_name" value="${user.first_name}" hidden>
                     <input type="text" name="last_name" value="${user.last_name}" hidden>
@@ -138,10 +144,37 @@
             // If we want to show the table
             //document.body.appendChild(myTable);
 
+            document.addEventListener('htmx:afterRequest', function(evt) {
+                updateWarnings();
+
+            });
 
 
         }
     </script>
+    <script type="text/hyperscript">
+        def updateWarnings()
+            log "test" 
+            then
+            if <#users-list li:has(.error)/>
+            put "Errors<br/>" into #alert
+            then for error in<#users-list li:has(.error)/>
+                beep! error then
+                put textContent of beep! .name in error at end of #alert
+                then 
+                put " " + textContent of beep! .error in error at end of #alert
+                then make a <br/> then put it at the end of #alert
+                then add .alert-warning to #alert
+
+            end
+
+            else
+            put "no errors" into #alert
+            end
+            then show #alert
+
+        end
+    </script>
     <style>
         table{
             {% comment %} border-collapse: collapse; {% endcomment %}