11521 sujets

JavaScript, DOM et API Web HTML5

Mise à jour d'un tableau suite à un drag and drop

Bonjour à tous,

Je sèche complètement sur un sujet que je trouve assez complexe.
J'utilise REDIPS drag and drop pour réaliser un planning. Le tableau fonctionne parfaitement et je parviens à récupérer les résultats soit en plain query string soit en format JSON.

Le hic est que je ne sais pas comment faire pour que lors du rechargement de la page les modifications réalisées via le drag and drop puissent être prises en compte. Je ne sais absolument pas comment m'y prendre.

Pour voir le tableau en version light : http://www.studio-tennis.fr/test/REDIPS_drag/example01/

En ce qui concerne les codes.

Voila pour le html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<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="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<!-- tables inside this DIV could have draggable content -->
		<div id="redips-drag">
			<table id="table1">
				<colgroup><col width="200"/><col width="200"/><col width="200"/><col width="200"/></colgroup>
				<tr>
					<td class="redips-mark">Jour</td>
					<td class="redips-mark">Date</td>
					<td class="redips-mark">Matin</td>
					<td class="redips-mark">Arpès-Midi</td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			<table id="table3">
				<colgroup><col width="200"/><col width="200"/><col width="200"/></colgroup>
				<tr style="background-color: #eee">
					<td id="message" class="redips-mark" title="You can not drop here">Table3</td>
					<td><div id="d1" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Zobel</div></td>
					<td><div id="d2" class="redips-drag t3 redips-clone" title="infinite cloning">Agathe Nadimi</div></td>
				</tr>
				<tr>
					<td><div id="d3" class="redips-drag t3 redips-clone" title="infinite cloning">Philippe Maudieu</div></td>
					<td><div id="d4" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Delbasse</div></td>
					<td><div id="d5" class="redips-drag t3 redips-clone" title="infinite cloning">F. Micheak</div></td>
				</tr>
				<tr>
					<td><div id="d6" class="redips-drag t3 redips-clone" title="infinite cloning">Fabrice Laviec</div></td>
					<td><div id="d7" class="redips-drag t3 redips-clone" title="infinite cloning">Didier Leduc</div></td>
					<td><div id="d8" class="redips-drag t3 redips-clone" title="infinite cloning">Frédérique De Boissieu</div></td>
				</tr>
				<tr style="background-color: #eee">
					<td><div id="d9" class="redips-drag t3 redips-clone" title="infinite cloning">Julien Marfisi</div></td>
					<td><div id="d10" class="redips-drag t3 redips-clone" title="infinite cloning">Dominique Beaulieu</div></td>
					<td class="redips-trash" title="Trash">Trash</td>
				</tr>
			</table>
			<div><input type="button" value="Save1" class="button" onclick="save('plain')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (plain query string)</span></div>
			<div><input type="button" value="Save2" class="button" onclick="save('json')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (JSON format)</span></div>	
		</div>
	</body>
</html>


Voila pour le fichier javascript :


/* enable strict mode */
"use strict";

// define redips_init variable
var redipsInit;


// redips initialization
redipsInit = function () {
	// reference to the REDIPS.drag library and message line
	var	rd = REDIPS.drag,
		msg = document.getElementById('message');
	// how to display disabled elements
	rd.style.borderDisabled = 'solid';	// border style for disabled element will not be changed (default is dotted)
	rd.style.opacityDisabled = 60;		// disabled elements will have opacity effect
	// initialization
	rd.init();
	// only "smile" can be placed to the marked cell
	rd.mark.exception.d8 = 'smile';
	// prepare handlers
	rd.event.clicked = function () {
		msg.innerHTML = 'Clicked';
	};
	rd.event.dblClicked = function () {
		msg.innerHTML = 'Dblclicked';
	};
	rd.event.moved  = function () {
		msg.innerHTML = 'Moved';
	};
	rd.event.notMoved = function () {
		msg.innerHTML = 'Not moved';
	};
	rd.event.dropped = function () {
		msg.innerHTML = 'Dropped';
	};
	rd.event.switched = function () {
		msg.innerHTML = 'Switched';
	};
	rd.event.clonedEnd1 = function () {
		msg.innerHTML = 'Cloned end1';
	};
	rd.event.clonedEnd2 = function () {
		msg.innerHTML = 'Cloned end2';
	};
	rd.event.notCloned = function () {
		msg.innerHTML = 'Not cloned';
	};
	rd.event.deleted = function (cloned) {
		// if cloned element is directly moved to the trash
		if (cloned) {
			// set id of original element (read from redips property)
			// var id_original = rd.obj.redips.id_original;
			msg.innerHTML = 'Deleted (c)';
		}
		else {
			msg.innerHTML = 'Deleted';
		}
	};
	rd.event.undeleted = function () {
		msg.innerHTML = 'Undeleted';
	};
	rd.event.cloned = function () {
		// display message
		msg.innerHTML = 'Cloned';
		// append 'd' to the element text (Clone -> Cloned)
		rd.obj.innerHTML += '';
	};
	rd.event.changed = function () {
		// get target and source position (method returns positions as array)
		var pos = rd.getPosition();
		// display current row and current cell
		msg.innerHTML = 'Changed: ' + pos[1] + ' ' + pos[2];
	};
};


// toggles trash_ask parameter defined at the top
function toggleConfirm(chk) {
	if (chk.checked === true) {
		REDIPS.drag.trash.question = 'Are you sure you want to delete DIV element?';
	}
	else {
		REDIPS.drag.trash.question = null;
	}
}


// toggles delete_cloned parameter defined at the top
function toggleDeleteCloned(chk) {
	REDIPS.drag.clone.drop = !chk.checked;
}


// enables / disables dragging
function toggleDragging(chk) {
	REDIPS.drag.enableDrag(chk.checked);
}


// function sets drop_option parameter defined at the top
function setMode(radioButton) {
	REDIPS.drag.dropMode = radioButton.value;
}


// show prepared content for saving
function save(type) {
	// define table_content variable
	var table_content;
	// prepare table content of first table in JSON format or as plain query string (depends on value of "type" variable)
	table_content = REDIPS.drag.saveContent('table1', type);
	// if content doesn't exist
	if (!table_content) {
		alert('Table is empty!');
	}
	// display query string
	else if (type === 'json') {
		//window.open('/my/multiple-parameters-json.php?p=' + table_content, 'Mypop', 'width=350,height=260,scrollbars=yes');
		window.open('multiple-parameters-json.php?p=' + table_content, 'Mypop', 'width=350,height=260,scrollbars=yes');
	}
	else {
		//window.open('/my/multiple-parameters.php?' + table_content, 'Mypop', 'width=350,height=160,scrollbars=yes');
		window.open('multiple-parameters.php?' + table_content, 'Mypop', 'width=350,height=260,scrollbars=yes');
	}
}


// add onload event listener
if (window.addEventListener) {
	window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
	window.attachEvent('onload', redipsInit);
}


Enfin, le fichier php qui affiche le résultat de la sauvegarde (JSON) :


<html>
<head>
	<title>www.redips.net - Reading multiple parameters from URL</title>
	<style>body{font-family:Verdana,Arial,Helvetica,sans-serif;}</style>
</head>
<body>
	<b>Query string</b>
	<br/>
	<?php print(urldecode($_SERVER['QUERY_STRING'])) ?>
	<br/>
	<br/>
	<b>Accepted parameters:</b>
	<br/>
	<?php
		// accept JSON parameter (and Un-quote string if needed)
		$p = stripslashes($_REQUEST['p']);
		// decode JSON object (it shouldn't be decoded as associative array)
		$arr = json_decode($p);
		// open loop through each array element
		foreach ($arr as $p){
			// set id, row index and cell index
			$id = $p[0];
			$row = $p[1];
			$cell = $p[2];
			// instead of print, you can store accepted parameteres to the database
			print "Id=$id Row=$row Cell=$cell<br>";
		}
	?>
</body>
</html>


Merci pour votre aide. Bonne journée à tous !
Bin il suffit de stocker ces informations quelque part pour les réutiliser ensuite.
Tu peux soit passer par des sessions PHP si c'est temporaire ou utiliser des cookies si c'est pour une durée un peu plus longue. Il y a même leur équivalent en JS avec localStorage et sessionStorage.
Merci pour ta réponse Zelalsan.

Ca me permet d'éclaircir un peu le pb de l'enregistrement. Le plus gros problème pour moi est l'utilisation de cela par exemple :

p=[["d3c0",2,2],["d5c0",4,2],["d7c0",4,3]]


Cela représente les données du tableau après sauvegarde au format JSON.

Comment je peux utiliser cette sauvegarde pour pré remplir mon tableau lors de l'actualisation de cette page ?
Après un json_decode j'obtiens :


Id=d3c0 Row=2 Cell=2
Id=d5c0 Row=4 Cell=2
Id=d7c0 Row=4 Cell=3


J'ai une idée mais je sais pas si c'est faisable. Je pensais enregistrer ces infos en BDD pour ensuite remplir mon tableau en faisant appel à cette BDD. Mais comment indiquer quelles cellules remplir dans le code ?

Si vous avez une meilleure idée je suis preneur Smiley cligne
Sujet clos
Aller à