Discussion :

[hidewak]

Bonjour,

J'ai un soucis, j'ai trouvé un code sur le net que je voudrais adapter à mon projet mais une partie (la plus importante bien sur ) ne marche pas.

Je voudrais 'dragger' une div d'un endroit à un autre et lorsque je lache la div que sa position soit sauvegarder dans la BD, pour la dragger c'est pas bien dur mais au moment ou je la lache j'arrive à avoir sa position et lorsque je veux la sauvegarder dans la BD, bah ça marche pas :/

Le code :

Dans ma page PHP j'attribue la position à ma div à partir des valeurs prise dans la BD:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$req = $this->conbdd->query('SELECT NomTableau, idMessage, TexteMessage, PosTop, PosLeft FROM tableau, message WHERE message.IdTableau = '.$numB.' AND tableau.idTableau = '.$numB.' AND tableau.idTableau = message.idTableau');
while($list = $req->fetch()){
$codeHtml.='<div id="'.$list['idMessage'].'" class="draggable" onclick="position('."'".''.$list['idMessage'].''."'".')" style="border: 1px solid grey; position: absolute; top:'.$list['PosTop'].'px; left:'.$list['PosLeft'].'px;">'.$list['TexteMessage'].'</div>';
}
$codeHtml.='</div>';

Lorsque je clique sur ma div position.js ce lance :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function position(idIdentifiant)
{
	jQuery.fn.extend({
	   findPos : function() {
		   obj = jQuery(this).get(0);
		   var curleft = obj.offsetLeft || 0;
		   var curtop = obj.offsetTop || 0;
		   while (obj = obj.offsetParent) {
					curleft += obj.offsetLeft
					curtop += obj.offsetTop
		   }
		   return {x:curleft,y:curtop};
	   }
	});
	var myObj = document.getElementById(idIdentifiant);
	pos = $(myObj).findPos();
	var posX = pos.x;
	alert(posX);
	var posY = pos.y;
	alert(posY);
 
	$.ajax({
				type: "POST",
				url: "http://127.0.0.1:8080/wb/up_pos.php",
				data: "id_identifiant="+idIdentifiant+"&posX="+posX+"&posY="+posY,
			});
 
	alert('plop');
};

Qui est censé (si j'ai bien compris) lancer up_pos.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if(isset($_POST['id_identifiant']) && isset($_POST['posX']) && isset($_POST['posY']))
	{
		try
			{
				$connection = new PDO('mysql:host=localhost;dbname=wb', 'root', '');
				$connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
				$posX = $_POST['posX'];
				$posY = $_POST['posY'];
				$idMessage = $_POST['id_identifiant'];
				if(!$connection->query("UPDATE message set PosLeft = ".$posX.", PosTop = ".$posY." WHERE idMessage = ".$idMessage)) echo 'Requête échouée'; 
			}
		catch(Exception $e)
			{
				die('Erreur : '.$e->getMessage());
			}
 
	}	
?>

Traitement :
- Je clique sur ma div puis la drag où je veux sur l'écran
- Lorsque je lache ma div j'ai bien les 3 alerts qui apparaissent
- Je recharge ma page mais ma div revient à sa position initiale et l'update dans la bd n'a pas été faite.

Merci d'avance pour votre aide !

[Bovino]

C'est normal que la page appelée par AJAX soit appelée sur le port 8080 ?
Parce que si ta page appelante est sur le 80, tu seras alors restreint par la Same Origin Policy...

[hidewak]

Ah bah je sais pas si c'est normal, c'est mon localhost :/

Comment puis je faire pour le modifier ?

J'ai modifié le port d'Apache en :3902 (je l'ai changé dans le code aussi) mais toujours le même résultat.

De + j'ai placé un if dans le position.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if($.ajax({
				type: "POST",
				url: "http://127.0.0.1:3902/wb/up_pos.php",
				data: "id_identifiant="+idIdentifiant+"&posX="+posX+"&posY="+posY,
			}))
			{
			alert('YOUPLAAAAAAAAAAAAAAAAAAA');
			}

Et le code passe bien par là :/