AJAX Drag and Drop, autosave and auto update

Gainax · April 17, 2008

Hi

I have created a drag and drop application whereby users who view it are able to drag and drop a series of rows, edit them and then click 'save' which saves the row information to a txt file.

What I'm looking to do is, make it so that everytime a user drags and drops a particular row, the information is saved dynamically, possibly to a database, rather than a txt file, without the need to click on the save button.

As the application is a table, with 5 columns, the final column, is to be a number (from 1 > n).

What I'm looking to do is, when a user drags, lets say row 1 and drops it to replace row 3, I want to dynamically update the numbers.

Example

A - B - C - 1

D - E - F - 2

G - H - I -3

So when row one is moved, currently on my version it reads:

D - E - F - 2

G - H - I -3

A - B - C - 1

What i want it to read is:

D - E - F - 1

G - H - I -2

A - B - C - 3

My code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>ABA Priority List</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="js/sort.js">
	</script>
	<link rel="stylesheet" type="text/css" href="styles/styles.css" />
	<script type="text/javascript">
		//------------------------------
		//Custom Info
		var colNames=new Array
		(
			"Briefed by:",
			"DIGITAL",
			"Needed by:",
			"STATUS",
			"PRIORITY"
		);

		var defaultCellText="-";
		//--------------------------------
		//--------------------------------

		var sortObj=null;
		window.addEvent("domready",function()
		{
			sortObj=new Sortables($('TableList'));

			$("AddButton").addEvent("click",function()
			{
				addRow();
			});

			$("SaveButton").addEvent("click",function()
			{
				save();
			});

			$("SortRadio").addEvent("click",function()
			{
				sortMode();
			});

			$("EditRadio").addEvent("click",function()
			{
				editMode();
			});

			$("RevertButton").addEvent("click",function(){
				revert();
			});

			$$("#Controls form")[0].reset();

			if(!window.ie)
				$("TableList").setStyle("margin-left","110px");

			getDataFromServer();
		});

		function getRow(datArray)
		{
			var info=new Array(defaultCellText,defaultCellText,defaultCellText,defaultCellText,defaultCellText);
			if(typeof datArray !== "undefined")
			{
				info=datArray;
			}

			var row=maker("li").addClass("rowItem unsaved");

			row.appendChild(maker("p").addClass("cellP close").setHTML('<img src="images/close.png" class="x" alt="[x]" />').addEvent("click",function()
			{
						this.parentNode.remove();
					}
				)
			);

			for(var i=0;i<5;i++){
				row.appendChild(maker("p").addClass("cellP col"+(i+1)).setHTML('<input type="text" value="'+info[i]+'" />'));
			}

			return row;
		}

		function addRow(datArray)
		{
			$("TableList").appendChild(getRow(datArray));
			sortObj.detach();
			sortObj=null;
			sortObj=new Sortables($('TableList'));
			$$(".rowItem .close .x").setStyle("display","inline");
			$("SortRadio").click();

		}

		function maker(tag){
			return $(document.createElement(tag));
		}

		function save()
		{
			var args=getDataFromForm();

			var myAjax = new Ajax("data/save.php",
			{
					data: "data="+args,
					method: 'post',
					onRequest:function(){
						$("Status").setHTML("<span>Saving</span>");
					},
					onComplete:function(response)
					{
						alert(response);
						if(response=="Data saved")
						{
							var d=new Date();
							$("Status").setText("Last save: "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
							$$("#TableList .rowItem").removeClass("unsaved");
							$$("#TableList .rowItem").addClass("saved");
						}
					}
				}
			);
			myAjax.request();
		}

		function editMode()
		{
			sortObj.detach();
			$$(".rowItem .close .x").setStyle("display","inline");
			$$("#TableList input").setStyle("background","white");
		}

		function sortMode()
		{
			sortObj.attach();
			$$(".rowItem .close .x").setStyle("display","none");
			$$("#TableList input").setStyle("background","transparent");
		}

		function revert()
		{
			if(!confirm("Are you sure you want to revert to the last saved state?"))
				return;
			getDataFromServer();
		}

		function getDataFromServer(){
			var myAjax = new Ajax("data/load.php",
			{
					method: 'get',
					onRequest:function()
					{
						$("Status").setHTML("<span>Loading</span>");
					},
					onComplete:function(response)
					{
						var data=eval(response);
						if(typeof response.length !=="undefined")
						{
							$("TableList").setHTML('');
							for(var i=0;i<data.length;i++)
							{
								addRow(data[i]);
							}
							$("Status").setText("");
							$$("#TableList .rowItem").removeClass("unsaved");
							$$("#TableList .rowItem").addClass("saved");
						}
					}
				}
			);
			myAjax.request();
		}

		function getDataFromForm()
		{
			var rows=$$("#TableList li");
			var str="";

			for(var i=0;i<rows.length;i++)
			{
				var cols=rows[i].getElements("input");
				var colstr="";
				for(var j=0;j<cols.length;j++)
				{
					if(j!=0)
						colstr+=',';
					colstr+='"'+encodeURIComponent(hEsc(cols[j].value))+'"';
				}
				str+=colstr+"\n";
			}

			return str;
		}

		function hEsc(str)
		{
			var targ=str;

			targ=targ.replace(/'/g,"&#39;");
			targ=targ.replace(/"/g,""");
			targ=targ.replace(/</g,"<");
			targ=targ.replace(/</g,">");

			return targ;
		}
	</script>
</head>
<body>
<div id="wrapper">
<h1>ABA Priority List - <?php echo date('l jS F Y'); ?></h1>

	<div id="DataDiv">
		<div id="OuterControls">
			<div id="Controls">
				<input type="image" src="images/button.jpg" name="AddRow" width="90" height="22" id="AddButton" value="AddRow" STYLE="margin: 5px;">
				<form onsubmit="return false" method="post" action="#">
				<p>
					<input type="radio" id="SortRadio" value="sort" name="mode" checked="checked" STYLE="margin-left: 5px; "/> Sort mode
				</p>
				<p>
					<input type="radio" id="EditRadio" value="sort" name="mode" STYLE="margin-left: 5px; " /> Edit mode
				</p>
			</form>
			<input type="image" src="images/save.jpg" name="SaveButton" width="41" height="17" id="SaveButton" value="SaveButton" STYLE="margin-left: 3px; margin-top: 5px;float: left;">
			<input type="image" src="images/revert.jpg" name="Revertbutton" width="49" height="17" id="RevertButton" value="RevertButton" STYLE="margin-left: 1px; margin-right: 3px; margin-top: 5px; float: right;">

			<br /><br />
			<p class="saved2">
			<span class="inside">Saved</span>
			</p>
			<p class="unsaved2">
				<span class="inside">Unsaved</span>
			</p>
			<p id="Status">
			</p>
		</div>
			</div>

		<li class="rowItem header">
			<p class="cellP close"></p>
			<p class="cellP col1"><script>document.write(colNames[0])</script></p>
			<p class="cellP col2"><script>document.write(colNames[1])</script></p>
			<p class="cellP col3"><script>document.write(colNames[2])</script></p>
			<p class="cellP col4"><script>document.write(colNames[3])</script></p>
			<p class="cellP col5"><script>document.write(colNames[4])</script></p>
		</li>
		<ul id="TableList">
			<span>Loading saved data</span>

		</ul>
	</div>
		</div>
</body>
</html>

Sign In

AJAX Drag and Drop, autosave and auto update

Recommended Posts

Gainax

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information