Ajax et "dragabilité"

**robinou** · 23/08/2007, 22h44

Bonjour,

j'utilise ceci dans une page:

Code :

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

1
2
3
4
5
 
<img src="images/1.png" alt="1" id="1" width="32" height="32" />
<script type="text/javascript">new Draggable('1', {revert:true})</script>
<img src="images/2.png" alt="2" id="2" width="32" height="32" />
<script type="text/javascript">new Draggable('2', {revert:true})</script>

Mes images sont "dragables"

J'utilise Ajax pour aller chercher les ID dans une base et je retourne
le même code dans un DIV:

Code :

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

$('reponse').innerHTML = requester.responseText;

ça m'affiche bien les images mais plus dragables

Une idée?

Merci

**jbeaussier** · 24/08/2007, 11h36

Essaye de relancer le constructeur Draggable juste après

Code :

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

$('reponse').innerHTML = requester.responseText;

**robinou** · 24/08/2007, 11h42

Envoyé par jbeaussier

Essaye de relancer le constructeur Draggable juste après

Code :

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

$('reponse').innerHTML = requester.responseText;

Houla !

Hors de ma compétence ça

voici mon client.js:

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
function bindTextField(e) {
	Event.observe($('edtName'), "blur", syncName, false);
} 
 
function syncName(e) {
	new Ajax.Request('search_results.php',
		{
			method: 'get',
			parameters: $H({'article': $F('edtName')}).toQueryString(),
			onComplete: function(requester) {
		$('reponse').innerHTML = requester.responseText;
			}
		});
	} 
 
Event.observe(window, "load", bindTextField, false);

et mon fichier:

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
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/src/unittest.js" type="text/javascript"></script>
<script src="client.js" type="text/javascript"></script>
<title>demo</title>
<style type="text/css" media="screen">
<!--
@import url("democss.css");
-->
</style>
</head>
 
<body class="oneColElsCtrHdr">
<div id="container">
	<div id="titre">
    	<h4>Magasin FileMaker</h4>
          <input type="text" name="edtName" id="edtName" value="" />
     </div>
</div>
<img src="images/1.png" alt="1" id="1" width="32" height="32" />
<script type="text/javascript">new Draggable('1', {revert:true})</script>
<img src="images/2.png" alt="2" id="2" width="32" height="32" />
<script type="text/javascript">new Draggable('2', {revert:true})</script>
<div id="reponse"></div>
</body>
</html>

Je ne sais pas relancer le constructeur Draggable

Une p'tite aide ?

Merci

**Taum** · 24/08/2007, 12h09

Salut,

Par "relancer le constructeur Draggable", je pense que jbeaussier voulait dire :

Code :

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

1
2
3
4
onComplete: function(requester) {
  $('reponse').innerHTML = requester.responseText;
  ['1', '2'].each(function(id) { new Draggable(id, {revert: true}); });
}

Cela dit, puisque tu utilises Prototype, pourquoi ne pas utiliser Ajax.Updater au lieu de Ajax.Request ?
En plus, Ajax.Updater te permet d'évaluer le JS contenu dans les tags <script> avec l'option evalScripts

**robinou** · 24/08/2007, 12h16

Envoyé par Taum

['1', '2'].each(function(id) { new Draggable(id, {revert: true}); });

1, 2 ? pas dynamique tout ça

je vais essayer avec ajax.updater

(je débute avec prototype et JS)

Merci en tout cas

**robinou** · 24/08/2007, 13h15

Bein,

J'ai utilisé ajax.updater mais idem

Je ne sais pas comment évaluer le script, un exemple ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function bindForm() {
		Event.observe($('edtName'), "blur", switchToAJAX, false);
}
 
function switchToAJAX(e) {
	Event.stop(e);
	var data = $H({'article': $F('edtName')}).toQueryString();
	new Ajax.Updater('reponse', 'search_results.php',
	{
		postBody: data, insertion: Insertion.Bottom
	});
}
 
Event.observe(window, 'load', bindForm, false);

evalScripts:true

Ajax et "dragabilité" [Prototype]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager