Merge pull request #93 from zhangxinxu/develop

Develop

Author: zhangxinxu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobilebone",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "Bone main for mobile web APP with a sigle page mode.",
   "main": "src/mobilebone.js",
   "directories": {

src/mobilebone.js

@@ -38,7 +38,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '2.4.1';
+	Mobilebone.VERSION = '2.4.2';
 
 	/**
 	 * Whether catch attribute of href from element with tag 'a'
@@ -274,7 +274,10 @@
 			}
 
 			// delete page with same id when options.remove !== false
-			var pageid = options.id || pageInto.id;
+			var pageid = options.id || pageInto.id, hashid = options.id || pageInto.id;
+			if (options.id && options.reload == "root") {
+				pageid = pageid.split("?")[0];
+			}
 
 			if (options.remove !== false && store[pageid] && store[pageid] != pageInto && store[pageid].parentElement) {
 				store[pageid].parentElement.removeChild(store[pageid]);
@@ -336,7 +339,10 @@
 			});
 
 			// history
-			var url_push = pageid, url_push_replaced = '';
+			// hashid should a full url address
+			// different with pageid
+			// add on 2.4.2
+			var url_push = hashid, url_push_replaced = '';
 			if (url_push && /^#/.test(url_push) == false) {
 				url_push = "#" + url_push;
 			}
@@ -383,6 +389,7 @@
 			    params:  string|object. ajax params.        - Optional
 	 * @returns string
 	 * @example Mobilebone.getCleanUrl(elementOfA);
+	            Mobilebone.getCleanUrl(elementOfForm);
 	            Mobilebone.getCleanUrl(elementOfA, '', "a=1&b=2");
 		        Mobilebone.getCleanUrl(null, "xxx.html");
 		        Mobilebone.getCleanUrl(null, "xxx.html?a=1&b=2");
@@ -393,10 +400,39 @@
 		if (trigger) {
 			 if (trigger.nodeType == 1) {
 				 // form element
-				 if (trigger.action) return trigger.getAttribute("action");
-				// a element
-				href = trigger.getAttribute("href");
-				formdata = trigger.getAttribute("data-formdata") || trigger.getAttribute("data-data");
+				 if (trigger.action) {
+					 href = trigger.getAttribute("action");
+					 // add on v2.4.1
+					 if (trigger.method && trigger.method.toUpperCase() == "POST") {
+						 return href;
+					 } else if (window.$ && $.fn && $.fn.serialize) {
+						// use jquery serialize()
+						formdata = $(trigger).serialize();
+					 } else {
+						formdata = {};
+						// simple serialize from Mobilebone
+						slice.call(trigger.querySelectorAll("input,select,textarea")).forEach(function(control) {
+							if (control.name && !control.disabled) {
+								var val = control.value.trim(), name = control.name;
+								if (/^radio|checkbox/i.test(control.type)) {
+									if (control.checked) {
+										if (formdata[name]) {
+											formdata[name].push(val);
+										} else {
+											formdata[name] = [val];
+										}
+									}
+								} else {
+									formdata[name] = [val];
+								}
+							}
+						});
+					 }
+				 } else {
+					// a element
+					href = trigger.getAttribute("href");
+					formdata = trigger.getAttribute("data-formdata") || trigger.getAttribute("data-data");
+				 }
 			 } else if (trigger.url) {
 				 href = trigger.url;
 				 formdata = trigger.data;
@@ -407,11 +443,17 @@
 
 		// get formdata
 		formdata = formdata || params || "";
-		
+
 		if (typeof formdata == "object") {
 			var arr_data = [];
-			for (key in params) {
-				arr_data.push(key + "=" + encodeURIComponent(params[key]));	
+			for (key in formdata) {
+				if (!formdata[key].forEach) {
+					formdata[key] = [formdata[key]];					
+				}
+				formdata[key].forEach(function(keyValue) {
+					arr_data.push(key + "=" + encodeURIComponent(keyValue));		
+				});
+				
 			}
 			if (arr_data.length > 0) {
 				formdata = arr_data.join("&");
@@ -526,8 +568,9 @@
 		// do transition
 		optionsTransition.response = response || dom_or_html;
 		optionsTransition.id = this.getCleanUrl(element_or_options) || create_page.id || ("unique" + Date.now());
+		
 		if (is_root == true) {
-			optionsTransition.id = optionsTransition.id.split("?")[0];
+			optionsTransition.reload = "root";
 		}
 		// 'if' statement below added on v2.0.0
 		if (typeof options == "object") { 
@@ -622,7 +665,8 @@
 					}
 				}
 			}
-
+			
+			// ajax的url地址
 			params.url = this.getCleanUrl(trigger_or_options, params.url);	
 			params.target = trigger_or_options;
 
@@ -672,7 +716,7 @@
 		ele_mask.style.visibility = "visible";
 
 		// ajax request
-		var xhr = new XMLHttpRequest();		
+		var xhr = new XMLHttpRequest();			
 		xhr.open(params.type || "GET", params.url + (/\?/.test(params.url)? "&" : "?") + "r=" + Date.now(), params.async, params.username, params.password);
 		xhr.timeout = params.timeout;
 
@@ -756,6 +800,11 @@
 		var ajax = form.getAttribute("data-ajax");
 		if (ajax == "false" || (this.captureForm == false && ajax != "true")) return;
 
+		// All form no cache
+		if (form.getAttribute("data-reload") === null) {
+			form.setAttribute("data-reload", "root");
+		}
+		
 		form.addEventListener("submit", function(event) {
 			// prevent detect
 			var attrPrevent = this.getAttribute("data-preventdefault");

test/form-submit/index.html

@@ -8,21 +8,37 @@
 <link rel="stylesheet" href="../test.css">
 <link rel="stylesheet" href="zxx.lib.css">
 <style>
-input { font-size: 100%; }
-input[name] {
+[name], .submit {
 	height: 40px; width: 100%; padding: 10px; box-sizing: border-box; font-size: 100%;
 }
-.search { height: 40px; padding: 10px; box-sizing: border-box; }
-.submit { height: 40px; font-size: 16px; padding: 0 25px; }
+[type=radio], [type=checkbox] {
+	width: auto; height: auto;
+}
 </style>
 </head>
 
 <body>
 <div id="pageHome" class="page out">
 	<ul>
-        <li class="pl10">
+        <li class="pl10 pr10">
             <form method="get" action="search.html">
-                <input type="search" class="search mr10" required><input type="submit" class="submit" value="搜索">
+            	<p><select name="city" required>
+                	<option value="1">上海</option>
+                    <option value="1">北京</option>
+                </select></p>
+                <p><textarea name="mark">标注内容</textarea></p>
+                <p>
+                	<input type="radio" name="radio" value="1"><label class="mr20">单选1</label>
+                    <input type="radio" name="radio" value="2"><label>单选2</label>
+                </p>
+                <p>
+                	<input type="checkbox" name="check" value="1"><label class="mr20">复选1</label>
+                    <input type="checkbox" name="check" value="2" checked><label class="mr20">复选2</label>
+                    <input type="checkbox" name="check" value="3" checked><label class="mr20">复选3</label>
+                    <input type="checkbox" name="check" value="4"><label class="mr20">复选4</label>
+                </p>
+                <p><input type="search" class="search mr10" name="key" required></p>
+                <p><input type="submit" class="submit" value="搜索"></p>
             </form>
     	</li>
     </ul>
@@ -35,5 +51,6 @@
 </div>
 
 <script src="../../src/mobilebone.js"></script>
+<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
 </body>
 </html>