Add error handling to al AJAX calls

static/js/wishlists.js

@@ -34,6 +34,13 @@ function initLists() {
 
     var curListId = getUrlListId();
     selectList(curListId);
+  }).fail(function(jqXHR, textMsg, error) {
+    showErrorDialog("Laden mislukt!",
+      "<p>Kan de lijsten niet laden!</p>" +
+      "<p>Probeer eventueel de pagina te verversen</p>" +
+      "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
+        " (" + textMsg + "))<i></small></p>",
+      false);
   });
 }
 
@@ -80,21 +87,27 @@ function updateList(list) {
 
 function updateListHTML(listElem) {
   var listId = listElem.data("list-id");
+  var listHtmlElem = $('.list-html', listElem)
+
   $.ajax({
     url: '/lists/' + listId,
     headers: { 'Accept': 'text/html' }
   }).done(function(html) {
-    var listHtmlElem = $('.list-html', listElem)
     listHtmlElem.html(html);
     $("ul > li", listHtmlElem).has('input[type="checkbox"]')
                               .parent()
                               .addClass("tasklist");
+  }).fail(function(html, textMsg, error) {
+    listHtmlElem.html("<h3><i>Kan lijst niet tonen!</i></h3>" +
+      "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
+        " (" + textMsg + "))<i></small></p>");
   });
 }
 
 function saveListChanges(listElem) {
   var listId = listElem.data("list-id");
   var list = lists.find(function(list) { return list.id == listId });
+  var old_data = list.data;
   list.data = $('.list-data', listElem).val();
 
   $.ajax({
@@ -103,7 +116,16 @@ function saveListChanges(listElem) {
     headers: { 'Accept': 'application/json',
                'Content-Type': 'application/json' },
     data: JSON.stringify(list)
-  }).done(updateList);
+  }).done(updateList)
+    .fail(function(jqXHR, textMsg, error) {
+      list.data = old_data;
+      showErrorDialog("Opslaan mislukt!",
+        "<p>Kan de lijst niet opslaan! Probeer later nog eens of " +
+          "annuleer de bewerking.</p>" +
+        "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
+          " (" + textMsg + "))<i></small></p>",
+        true);
+  });
 }
 
 function revertListChanges(listElem) {