diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
index 1f0a3f1..29dadd3 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/020-output/60-object/object.js
@@ -15,56 +15,26 @@
  * limitations under the License.
  */
 
-(function ($) {
-
-
-  $.widget("demo.maps", {
-
-    options: {
-      position: { // tobago
-        x: -60.687103,
-        y: 11.249123
-      },
-      zoom: 0.2
-    },
-
-    _create: function () {
-      this._on({
-        click: function (event) {
-          var position = this.element.data("maps-position");
-          if (position === null) {
-            position = this.options.position;
-          }
-          var zoom = this.element.data("maps-zoom");
-          if (zoom === null) {
-            zoom = this.options.zoom;
-          }
-          var target = this.element.data("maps-target");
-          var url = 'https://www.openstreetmap.org/export/embed.html?bbox='
+class MapDemo {
+  static init() {
+    document.querySelectorAll("[data-maps-target]").forEach((element) => element.addEventListener("click",
+        function (event) {
+          const button = event.currentTarget;
+          const targetId = button.dataset.mapsTarget;
+          const position = JSON.parse(button.dataset.mapsPosition);
+          const zoom = JSON.parse(button.dataset.mapsZoom);
+          const url = 'https://www.openstreetmap.org/export/embed.html?bbox='
               + (position.x - zoom) + ','
               + (position.y - zoom) + ','
               + (position.x + zoom) + ','
               + (position.y + zoom);
-          jQuery(DomUtils.escapeClientId(target)).attr('src', url);
-        }
-      });
-    },
+          document.getElementById(targetId).setAttribute("src", url);
+          event.preventDefault();
+        }));
+  }
+}
 
-    _setOption: function (key, value) {
-    },
-
-    _destroy: function () {
-    }
-
-  });
-
-}(jQuery));
-
-var initMaps = function () {
-  jQuery("[data-maps-target]")
-      .maps()
-      .first()
-      .click();
-};
-
-Listener.register(initMaps, Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", MapDemo.init);
+// todo: ajax
+Listener.register(MapDemo.init, Phase.DOCUMENT_READY);
+Listener.register(MapDemo.init, Phase.AFTER_UPDATE);
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
index 566d628..697ba0c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/00-tinymce/TinyMCE.xhtml
@@ -27,6 +27,9 @@
           file="#{request.contextPath}/content/20-component/110-wysiwyg/00-tinymce/tinymce/js/tinymce/tinymce.min.js"/>
   <tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/00-tinymce/tinymce.js"/>
 
+<!--  todo-->
+  <tc:badge value="Todo: This page needs to be refactored, still using jQuery..." markup="warning"/>
+
   <tc:section label="Installation">
     <p>Download <tc:link link="http://www.tinymce.com/" target="_blank" label="TinyMCE"/>
       and unpack the ZIP file directly beside this XHTML-file.</p>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
index 6cbdf50..fb3fc0a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/110-wysiwyg/01-ckeditor/CKEditor.xhtml
@@ -27,6 +27,9 @@
           file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/ckeditor/ckeditor.js"/>
   <tc:script file="#{request.contextPath}/content/20-component/110-wysiwyg/01-ckeditor/demo-ckeditor.js"/>
 
+  <!--  todo-->
+  <tc:badge value="Todo: This page needs to be refactored, still using jQuery..." markup="warning"/>
+
   <tc:section label="Installation">
     <p>Download <tc:link link="http://ckeditor.com/" target="_blank" label="CKEditor"/>
       and unpack the ZIP file directly beside this XHTML-file.
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
index 875bdaa..0f019d2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/70-dataAttribute/dataAttribute.js
@@ -15,55 +15,25 @@
  * limitations under the License.
  */
 
-/*
- jQuery(function () {
- jQuery("[data-colored]")
- .css("background-color", "#aaaaaa")
- .click(function () {
- jQuery(this).css("background-color", jQuery(this).data("colored"));
- })
- .dblclick(function () {
- jQuery(this).css("background-color", "#aaaaaa");
- });
- });
- */
+class ColoredDemo {
 
-(function ($) {
-
-    $.widget("demo.colored", {
-
-        options: {
-            resetColor: "#aaaaaa"
-        },
-
-        _create: function () {
-            this.element.css("background-color", this.options.resetColor);
-            this._on({
-                click: function (event) {
-                    this.element.css("background-color", this.element.data("color"));
-                },
-                dblclick: function (event) {
-                    this.element.css("background-color", this.options.resetColor);
-                }
-            });
-        },
-
-        _setOption: function (key, value) {
-            switch (key) {
-                case "resetColor":
-                    this.options.resetColor = value;
-                    break;
-            }
-            this._super("_setOption", key, value);
-        },
-
-        _destroy: function () {
-        }
-
+  static init() {
+    document.querySelectorAll("[data-color]").forEach((element) => {
+      element.addEventListener("click",
+          function (event) {
+            const area = event.currentTarget;
+            area.style.backgroundColor = area.dataset.color;
+          });
+      element.addEventListener("dblclick",
+          function (event) {
+            const area = event.currentTarget;
+            area.style.backgroundColor = "#aaaaaa";
+          });
     });
+  }
+}
 
-}(jQuery));
-
-Listener.register(function() {
-    jQuery("[data-color]").colored({resetColor: "#f8f8f8"});
-}, Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", ColoredDemo.init);
+// todo: ajax
+// Listener.register(ColoredDemo.init, Phase.DOCUMENT_READY);
+// Listener.register(ColoredDemo.init, Phase.AFTER_UPDATE);
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/script/login.js b/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
index d75eeda..c70412f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/script/login.js
@@ -15,30 +15,24 @@
  * limitations under the License.
  */
 
-/**
- * Copies the values from the data-login attribute to the username/password fields.
- */
-Demo.prepareQuickLinks = function () {
-  jQuery("button[data-login]").click(function () {
-    var link = jQuery(this);
-    var login = link.data("login");
-    jQuery(DomUtils.escapeClientId("page:mainForm:username::field")).val(login.username);
-    jQuery(DomUtils.escapeClientId("page:mainForm:password::field")).val(login.password);
-    return false;
-  });
-};
+class LoginDemo {
 
-Listener.register(Demo.prepareQuickLinks, Phase.DOCUMENT_READY);
+  /**
+   * Copies the values from the data-login attribute to the username/password fields.
+   */
+  static initQuickLinks() {
+    document.querySelectorAll("button[data-login]").forEach((element) => element.addEventListener("click",
+        function (event) {
+          const link = event.currentTarget;
+          const login = JSON.parse(link.dataset.login);
+          document.getElementById("page:mainForm:username::field").value = login.username;
+          document.getElementById("page:mainForm:password::field").value = login.password;
+          event.preventDefault();
+        }));
+  };
+}
 
-/**
- * This code is needed to "repair" the submit parameter names and url to use
- * the names that a required for servlet authentication.
- */
-Demo.prepareLoginForm = function() {
-  jQuery(DomUtils.escapeClientId("page:mainForm:username::field")).attr("name", "j_username");
-  jQuery(DomUtils.escapeClientId("page:mainForm:password::field")).attr("name", "j_password");
-  var contextPath = jQuery(DomUtils.escapeClientId("page:mainForm:login")).data("context-path");
-  jQuery(DomUtils.escapeClientId("page::form")).attr("action", contextPath + "/j_security_check");
-};
-
-// XXX turned off in the moment Tobago5.Listener.register(Demo.prepareLoginForm, Tobago5.Phase.DOCUMENT_READY);
+document.addEventListener("DOMContentLoaded", LoginDemo.initQuickLinks);
+// todo: ajax
+// Listener.register(LoginDemo.initQuickLinks, Phase.DOCUMENT_READY);
+// Listener.register(LoginDemo.initQuickLinks, Phase.AFTER_UPDATE);