Radical change in code. Idea changed and made more generic.

Loosman · Loosman · commit 0ef508c796db · 2016-11-07T18:02:42.000+01:00
- make HTML element interactive or trigger AJAX call
- Ajax responds with JSON or XML package that contains set of actions
- Manipulate the dom based on the received actions

This is the basic idea. It should save some time for the developer and make it easy to make interactive pages that that are connected to a back-end.

Todo:

- Create server side library for creating packages
- Use history api to store ajax history
- test post and file upload
diff --git a/MicroBoatWebapp.js b/MicroBoatWebapp.js
diff --git a/exampleWithAllParameters.json b/exampleWithAllParameters.json
@@ -0,0 +1,34 @@
+{
+  "load":{
+    "query":".target",
+    "html":"<h1>Hello world</h1>",
+    "method":"load",
+    "animation":"fade"
+  },
+  "redirect":{
+    "location":"/this/page",
+    "timeout": 300
+  },
+  "refresh":500,
+  "navigate":{
+    "location":"/this/page",
+    "timeout": 300
+  },
+  "action":{
+    "action":"/ajax/count",
+    "formquery":".myform"
+  },
+  "script":"alert('hello world')",
+  "empty":".emptyme",
+  "delete":".removeme",
+  "change":{
+    "query":"#button",
+    "attributes":{
+      "value":"ajax done"
+    },
+    "class":{
+      "remove":"busy",
+      "add":"finish"
+    }
+  }
+}
diff --git a/exampleWithMinimalParameters.json b/exampleWithMinimalParameters.json
@@ -0,0 +1,19 @@
+{
+  "load":{
+    "query":".target",
+    "html":"<h1>Hello world</h1>"
+  },
+  "redirect":"/this/page",
+  "refresh":0,
+  "navigate":"/this/page",
+  "action":"/ajax/count",
+  "script":"alert('hello world')",
+  "empty":".emptyme",
+  "delete":".removeme",
+  "change":{
+    "query":"#button",
+    "attributes":{
+      "class":"done"
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>MicroBoatWebapp 0.1.0</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="MicroBoatWebapp.js"></script>
+	</head>
+	<body>
+		<h1>hello</h1>
+		<action action="test.json"></action>
+		<div class="target"></div>
+		<button action="test2.json">test</button>
+	</body>
+</html>
diff --git a/oldindex.html b/oldindex.html
@@ -20,6 +20,7 @@
 		</script>
 	</head>
 	<body>
-		<action action="start" param="test" ></action>
+		<h1>hello</h1>
+		<div class="target"></div>
 	</body>
 </html>
diff --git a/test.html b/test.html
@@ -0,0 +1,2 @@
+<h1>Test</h1>
+<p>This is a test.</p>
diff --git a/test.json b/test.json
@@ -0,0 +1,6 @@
+{
+  "load":{
+    "query":".target",
+    "html":"<i><b>Hello world</b></i>"
+  }
+}
diff --git a/test.xml b/test.xml
@@ -0,0 +1,5 @@
+<ajax>
+    <load query=".target">
+        <i>This is loaded with the xml package</i>
+    </load>
+</ajax>
diff --git a/test2.json b/test2.json
@@ -0,0 +1,6 @@
+{
+  "load":{
+    "query":".target",
+    "html":"<p>you pressed the button</p><button action=\"test.json\">test action after dom manipulation</button>"
+  }
+}
diff --git a/todo.txt b/todo.txt

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<h1>Test</h1>`
	`2`	`+<p>This is a test.</p>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +<ajax>
 +    <load query=".target">
 +        <i>This is loaded with the xml package</i>
 +    </load>
 +</ajax>