Version 5.2.2, finished example 28 - Load table content (with AJAX)

dbunic · Apr 1, 2017 · 7ec8c9e · 7ec8c9e
1 parent d925f4d
commit 7ec8c9e
Show file tree

Hide file tree

Showing 18 changed files with 386 additions and 334 deletions.
diff --git a/changes.txt b/changes.txt
@@ -1,9 +1,14 @@
 Changes for REDIPS.drag library
 
-5.2.1 (2017-03-01)
+5.2.2 (2017-04-01)
+- added clearTable() - method deletes all DIV elements with redips-drag class name from table
+- added example28 - Load table content (with AJAX)
+
+5.2.1 (2017-03-08)
 - modified saveContent() - method now sends class names and innerText of DIV elements
 - added loadContent() - method loads table content from server side JSON output
-- added event.loadError(obj) - it's called in case if placing DIV element to the table is not possible (nonexistent table coordinates)
+- added error.loadContent(obj) - it's called in case if placing DIV element to the table is not possible (nonexistent table coordinates)
+- added error.ajax(xhr)
 
 5.2.0 (2017-02-06)
 - added ajaxCall() method for making easier AJAX requests

diff --git a/example01/index.html b/example01/index.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
 		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 		<script type="text/javascript" src="../header.js"></script>
-		<script type="text/javascript" src="../redips-drag-source.js"></script>
+		<script type="text/javascript" src="../redips-drag-min.js"></script>
 		<script type="text/javascript" src="script.js"></script>
 		<title>Example 1: Three tables</title>
 	</head>

diff --git a/example03/ajax/script.js b/example03/ajax/script.js
@@ -21,30 +21,25 @@ redips.init = function () {
 	rd.event.dropped = function () {
 		// get element position (method returns array with current and source positions - tableIndex, rowIndex and cellIndex)
 		var pos = rd.getPosition();
-		// save DIV element
-		rd.ajaxCall('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_'), redips.handler);
+		// save DIV element (AJAX handler is not needed)
+		rd.ajaxCall('ajax/db_save.php?p=' + rd.obj.id + '_' + pos.join('_'));
 	};
 	// delete - after element is deleted
 	rd.event.deleted = function () {
 		// get element position
 		var pos = rd.getPosition(),
 			row = pos[4],
 			col = pos[5];
-		// delete element
-		rd.ajaxCall('ajax/db_delete.php?p=' + rd.obj.id + '_' + row + '_' + col, redips.handler);
+		// delete element (AJAX handler is not needed)
+		rd.ajaxCall('ajax/db_delete.php?p=' + rd.obj.id + '_' + row + '_' + col);
 	};
-	// print message to the message line
-	redips.printMessage('AJAX version');
-};
-
-
-// AJAX handler after save or delete 
-redips.handler = function (xhr) {
-	// display error message if something was wrong
-	if (xhr.status !== 200) {
+	// set error handler for AJAX call
+	rd.error.ajax = function (xhr) {
 		// display error message
 		document.getElementById('message').innerHTML = 'Error: [' + xhr.status + '] ' + xhr.statusText;
-	}
+	};
+	// print message to the message line
+	redips.printMessage('AJAX version');
 };
 
 

diff --git a/example03/config_mysql.php b/example03/config_mysql.php
diff --git a/example16/script.js b/example16/script.js
@@ -130,21 +130,21 @@ redips.init = function () {
 		// set hover color for cloned elements
 		rd.hover.colorTd = redips.hover2;
 	};
+	// set error handler for AJAX calls
+	rd.error.ajax = function (xhr, obj) {
+		// set DIV innerHTML to display error message
+		obj.div.innerHTML = 'Error: [' + xhr.status + '] ' + xhr.statusText;
+		// return false to stop calling callback function
+		return false;
+	};
 };
 
 
 // AJAX handler - display response in div.innerHTML
 // callback method is called with XHR and obj object
 // obj is just passed from ajaxCall to this callback function
 redips.handler = function (xhr, obj) {
-	// if status is OK
-	if (xhr.status === 200) {
-		obj.div.innerHTML = xhr.responseText;
-	}
-	// else display error
-	else {
-		obj.div.innerHTML = 'Error: [' + xhr.status + '] ' + xhr.statusText;
-	}
+	obj.div.innerHTML = xhr.responseText;
 };
 
 

diff --git a/example22/script.js b/example22/script.js
@@ -73,19 +73,20 @@ redips.init = function () {
 			rd.obj.style.height = redips.size.h;
 		}
 	};
+	// set error handler for AJAX calls
+	rd.error.ajax = function (xhr) {
+		// display error message
+		redips.rd.obj.innerHTML = 'Oops, an error occurred: [' + xhr.status + '] ' + xhr.statusText;
+		// return false to stop calling callback function
+		return false;
+	};
 };
 
 
 // AJAX handler - called after DIV element is dropped to the right table (dropzone)
 redips.handler1 = function (xhr) {
-	// if status is OK then display DIV content
-	if (xhr.status === 200) {
-		redips.rd.obj.innerHTML = xhr.responseText;
-	}
-	// otherwise display nice error message
-	else {
-		redips.rd.obj.innerHTML = 'Oops, an error occurred: [' + xhr.status + '] ' + xhr.statusText;
-	}
+	// display DIV content
+	redips.rd.obj.innerHTML = xhr.responseText;
 };
 
 
@@ -116,25 +117,18 @@ redips.handler2 = function (xhr) {
 	var status, // status from the AJAX service (it should return string "OK")
 		message, // displayed message to the user
 		msg = document.getElementById('message');
-	// if status is OK process AJAX respond
-	if (xhr.status === 200) {
-		// status from the AJAX service
-		status = xhr.responseText;
-		// test if returned status is OK
-		if (status === 'OK') {
-			// set new person name to the redips.pname variable (this will be used when object will be back to the left table)
-			redips.pname = document.getElementById('fname').value + ' ' + document.getElementById('lname').value;
-			// set message
-			message = 'Saved!';
-		}
-		// else prepare error message
-		else {
-			message = 'Error1 [' + status + ']';
-		}
+	// status from the AJAX service
+	status = xhr.responseText;
+	// test if returned status is OK
+	if (status === 'OK') {
+		// set new person name to the redips.pname variable (this will be used when object will be back to the left table)
+		redips.pname = document.getElementById('fname').value + ' ' + document.getElementById('lname').value;
+		// set message
+		message = 'Saved!';
 	}
-	// otherwise set AJAX error (like service not found etc)
+	// else prepare error message
 	else {
-		message = 'Error2 [' + xhr.status + '] ' + xhr.statusText;
+		message = 'Error1 [' + status + ']';
 	}
 	// display message
 	msg.innerHTML = message;

diff --git a/example23/db_save.php b/example23/db_save.php
@@ -4,7 +4,7 @@
 $param = $_POST['p'];
 
 // demo: print AJAX string
-print 'AJAX: ';
+print 'AJAX saved: ';
 
 // demo: loop to display all p[] values
 foreach ($param as $key => $val) {
@@ -18,6 +18,6 @@
 // ..
 // ..
 
-// if everything went OK, then return string 'OK'
+// return string 'OK' if everything was OK ('OK' string can be tested in AJAX callback function)
 //print 'OK';
 ?>
diff --git a/example23/script.js b/example23/script.js
@@ -35,6 +35,13 @@ redips.init = function () {
 	rd.event.deleted = function (targetCell) {
 		redips.addItem(rd.obj);
 	};
+	// set error handler for AJAX call
+	rd.error.ajax = function (xhr) {
+		// display error message
+		redips.displayMessage('AJAX error: [' + xhr.status + '] ' + xhr.statusText, 2000);
+		// return false to stop calling callback function
+		return false;
+	};
 };
 
 
@@ -60,35 +67,29 @@ redips.save = function () {
 };
 
 
-// AJAX handler - called after click on "Save" button
+// AJAX callback function
 redips.handler = function (xhr) {
-	// displayed message to the user
-	var message;
-	// response is OK
-	if (xhr.status === 200) {
-		/*
-		 * original code 
-		 * 
-		// status from the AJAX service
-		status = xhr.responseText;
-		// test if returned status is OK
-		if (status === 'OK') {
-			// set message and delay
-			message = 'Saved!';
-		}
-		else {
-			message = 'Error [' + status + ']';
-		}
-		*/
-		// demo code
-		message = xhr.responseText;
+	/*
+	//
+	// test status returned from AJAX service
+	//
+	var status = xhr.responseText;
+	// test if status is OK
+	if (status === 'OK') {
+		message = 'Saved!';
 	}
-	// if request status isn't OK
 	else {
-		message = 'Error: [' + xhr.status + '] ' + xhr.statusText;
+		message = 'Error [' + status + ']';
 	}
-	// display message and set timeout to delete message
+	// display message
 	redips.displayMessage(message, 2000);
+	*/
+
+	//
+	// demo code
+	//
+	// display message
+	redips.displayMessage(xhr.responseText, 2000);
 };
 
 

diff --git a/example24/script.js b/example24/script.js
@@ -87,6 +87,7 @@ redips.init = function () {
 
 // AJAX handler - display response from redips.ajaxField in div.innerHTML
 // callback method is called with XHR and obj object (obj is just passed from ajaxCall to this callback function)
+// error handling is wrapped inside callback function
 redips.handler1 = function (xhr, obj) {
 	// prepare title and layout local variables
 	var title,
@@ -195,6 +196,7 @@ redips.save = function () {
 
 
 // AJAX handler - called after save button is clicked
+// error handling is wrapped inside callback function
 redips.handler2 = function (xhr) {
 	// set reference to message element
 	var message = document.getElementById('message');

diff --git a/example28/db_ajax1.php b/example28/db_ajax1.php
@@ -1,5 +1,5 @@
 <?php 
 
-print '[["d2",2,2,"orange","A2"],["d1",1,5,"green","A1"],["d3",3,3,"green","A3"],["d4",4,0,"orange","A4"]]';
+print '[["d2",2,2,"blue","A1"],["d1",4,5,"blue","A2"],["d3",3,2,"blue","A3"],["d4",1,4,"blue","A4"]]';
 
 ?>
diff --git a/example28/db_ajax2.html b/example28/db_ajax2.html
@@ -0,0 +1 @@
+[["d2",2,2,"blue","A1"],["d1",4,5,"blue","A2"],["d3",3,2,"blue","A3"],["d4",1,4,"blue","A4"]]