Casse tête d'input

**minipopov** · 23/07/2012, 00h27

Bonjour,

J'ai un soucis avec javascript, je vais d'abord poster les pages.

Donc voici un exemple de code html généré par ma page 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Mon site</title> 
<link href="/webroot/css/style.css" rel="stylesheet" type="text/css" />
</head> 
<body>
	<div class="container">
			<div class="logo">
				<div style="float:left;">
					<img src="/webroot/img/logoc.png" alt="" />
				</div>
									<div style="float:right; color:#666;">
						<p>Bonjour, admin nous sommes le Lundi 23 Ao&ucirc;t 2012 &agrave; 00:08</p>
					</div>
							</div>	
			<div id="menu">
				<ul style="width:720px; margin:0 auto; line-height:30px; vertical-align:middle;">
 
																			<li><a href="/pages/view/Accueil" title="Accueil">Accueil</a></li>
													<li><a href="/pages/view/Rechercher" title="Rechercher">Rechercher</a></li>
													<li><a href="/pages/view/Nos-menus" title="Menus">Menus</a></li>
													<li><a href="/pages/view/Toutes-nos-recettes" title="Nos recettes">Nos recettes</a></li>
													<li><a href="#" title="Inscription">Mon compte</a>
								<ul class="sousmenu" style="position:absolute; z-index:100;">
									<li><a href="/recettes/view/Nom-de-la-recette" style="color:black; background-color:white;">Ajouter une recette</a></li>
									<li><a href="/menus/view/Ma-selection" style="color:black; background-color:white;">Ajouter un menu</a></li>
									<li><a href="/users/view/Mesrecettes" style="color:black; background-color:white;">Mes recettes</a></li>
									<li><a href="#" style="color:black; background-color:white;">Mes menus</a></li>
									<li><a href="#" style="color:black; background-color:white;">Mon compte</a></li>
									<li><a href="/users/logout" style="color:black; background-color:white;">Se d&eacute;connecter</a></li>
								</ul>
							</li>
 
				</ul>
			</div>
			<div class="page" style="padding-top:60px;">
					<table class="inscription">
	<tr>
		<td>
 
<h1>Votre s&eacute;lection de recette</h1>
			<form  method="post" id="menu" action="/Recherche-recette-par-nom.html" >
			<table style="border-collapse:collapse; width:570px; margin:auto; text-align:center;" id="tableau">
				<tr>
					<td style="wdith:30px;">Position</td>
					<td style="wdith:450px;">Nom de la recette</td>
					<td style="wdith:30px;">Monter</td>
					<td style="wdith:30px;">Descendre</td>
					<td style="wdith:30px;">Suppr.</td>
				</tr>	
 
					<tr>
						<td>1</td>
						<td>adazda <input type="hidden" name="adazda" value="21" /> </td>
						<td><img src="/webroot/img/up.png" style="width:16px;"  onclick="up(this);" alt="Monter"/></td>
						<td><img src="/webroot/img/down.png" style="width:16px;" onclick="down(this);" alt="Descendre"/></td>
						<td><img src="/webroot/img/sup.png" style="width:16px;" onclick="suppr(this);" alt="Supprimer"/></td>
					</tr>
					<tr>
						<td>2</td>
						<td>ffff <input type="hidden" name="ffff" value="22" /> </td>
						<td><img src="/webroot/img/up.png" style="width:16px;"  onclick="up(this);" alt="Monter"/></td>
						<td><img src="/webroot/img/down.png" style="width:16px;" onclick="down(this);" alt="Descendre"/></td>
						<td><img src="/webroot/img/sup.png" style="width:16px;" onclick="suppr(this);" alt="Supprimer"/></td>
					</tr>
					<tr>
						<td>3</td>
						<td>aeaeaeaeaae <input type="hidden" name="aeaeaeaeaae" value="23" /> </td>
						<td><img src="/webroot/img/up.png" style="width:16px;"  onclick="up(this);" alt="Monter"/></td>
						<td><img src="/webroot/img/down.png" style="width:16px;" onclick="down(this);" alt="Descendre"/></td>
						<td><img src="/webroot/img/sup.png" style="width:16px;" onclick="suppr(this);" alt="Supprimer"/></td>
					</tr>			<input type="hidden" name="ordre" value=""/>
			</table>
		</form>
		</td>
	</tr>
</table>

Et voici l'ensemble des fonction 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function up(img) {
	var source = img.parentNode.parentNode.rowIndex, cible = source - 1, idMenu = document.getElementById("tableau"), order, ligneSource = idMenu.rows[source], nbr_cellules = idMenu.rows[source].cells.length, o, i, contenu2, champs = document.getElementsByTagName('input');
	order = '';
	//création des lignes
	if (source>1){
		idMenu.deleteRow(source);
		idMenu.insertRow(cible);
		for (o = 0; o < nbr_cellules; o = o + 1) {
			contenu2 = ligneSource.cells[o].innerHTML;
			idMenu.rows[cible].insertCell(-1);
			idMenu.rows[cible].cells[o].innerHTML = contenu2;
		}
	for (o = 1; o < idMenu.rows.length; o = o + 1) {
		idMenu.rows[o].cells[0].innerHTML = o;
	}
	for (o = 0; o <= champs.length-2; o = o + 1) { // on parcourt les champs sauf le dernier car c'est l'ordre
		i = champs[o].value;
		order = order+'/'+i;	
	}
	alert(champs[2].value);
	champs[champs.length-1].value = order;
	}
}
function suppr(img) {
	var source = img.parentNode.parentNode.rowIndex, cible = source + 1, order, idMenu = document.getElementById("tableau"), ligneSource = idMenu.rows[source], nbr_cellules = idMenu.rows[source].cells.length, o, contenu2, champs = document.getElementsByTagName('input');
	order='';
	idMenu.deleteRow(source);
	for (o = 1; o <= idMenu.rows.length; o = o + 1) {
		idMenu.rows[o].cells[0].innerHTML = o;
	}
	var champs = document.getElementsByTagName('input');
	for (o = 0; o < champs.length-1; o = o + 1) { // on parcourt les champs sauf le dernier car c'est l'ordre
		i = champs[o].value;
		order = order+'/'+i;	
	}
	champs[champs.length-1].value = order;
	alert(champs[3].value);
}
function down(img) {
	var source = img.parentNode.parentNode.rowIndex, cible = source + 1, order, idMenu = document.getElementById("tableau"), ligneSource = idMenu.rows[source], nbr_cellules = idMenu.rows[source].cells.length, i, contenu2, champs = document.getElementsByTagName('input');
	order = '';
	//création des lignes
	if (source < idMenu.rows.length - 1) {
		idMenu.deleteRow(source);
		idMenu.insertRow(cible);
		for (o = 0; o < nbr_cellules; o = o + 1) {
			contenu2 = ligneSource.cells[o].innerHTML;
			idMenu.rows[cible].insertCell(-1);
			idMenu.rows[cible].cells[o].innerHTML = contenu2;
		}
	for (var o = 1; o < idMenu.rows.length; o = o + 1) {
		idMenu.rows[o].cells[0].innerHTML = o;
	}
	for (var o = 0; o <= champs.length-2; o = o + 1) { // on parcourt les champs sauf le dernier car c'est l'ordre
		i = champs[o].value;
		order = order+'/'+i;
	}
	alert(champs[2].value);
	champs[champs.length-1].value = order;
	}
}

Donc le problème.. Dans mes fonctions js up et down, vous pouvez voir que j'ai mis un alert(champs[2].value);, sauf que dans down cette variable est vide, et dans up elle contient 23, ce qui est bien l'id du troisième input. Donc pour l'occasion j'ai créé une page http://www.taupe-cuisto.fr/test.php. Avec le code html généré + le js. Donc pour info order et l'ordre des valeurs des input dans l'ordre dans lequel ils apparaissent dans la page.

Si quelqu'un peut comprendre d’où vient cette erreur, car je ne vois vraiment pas ce qui ne va pas.

Cordialement.

Petit complément que je viens de voir, c'est que alert(champs[2].value); n'est vide que si on clique sur le bouton descendre, de la position 2. Désolé pour ce manque d'info.

**sekaijin** · 23/07/2012, 11h29

je ne comprends pas ce que tu veux faire, si c'est déplacer des lignes:

pourquoi supprimer les lignes du tableau pour les recréer (innerHtml les recrée) ?

pourquoi ne pas simplement les déplacer ? les methodes insertBefore et insertAfter sont faite pour ça.

pour up et down l'algo est le même chercher le row suivant ou précédent l'endroit ou mettre le row courant et faire un insertAfter ou InsertAfter

rien à copier ni à recréer

A+JYT

**minipopov** · 23/07/2012, 16h26

Bonjour,

Euh non monter et descendre une ligne sa marche, seulement j'affiche un formulaire dans un tableau pour ordonner ma sélection. Comment ordonner des variable contenu dans $_SESSION sans rechargement de page? bah c'est pas possible en javascript donc ce que j'ai fais. C'est que j'ai créé dans les lignes de mon tableau des input type hidden, dont leur valeur vaut l'id d'un élément de ma sélection. Enfin après mon tableau j'ai un dernier input hidden qui prends comme valeur l'ordre des id dans lequel ils apparaissent dans les lignes du tableau. Voilà, et ce ne marche pas c'est quand je fais la fonction down, il récupère pas correctement les valeur des input et je comprends pas pourquoi.

Cordialement.

**NoSmoking** · 24/07/2012, 23h00

Bonsoir,
tu n'as pas envisagé de passer par des name de la forme name="champ[]" ?

**minipopov** · 27/07/2012, 05h23

Bonjour, désolé je n'ai pas été vraiment disponible mais ce matin j'ai réussi a finir un script jquery qui marche donc je poste la solution. Je met pas la page html généré mais le script php qui la génère.

Donc voilà le script 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<h1>Votre s&eacute;lection de recette</h1>
<?php
if(!isset($_SESSION['menu1'])){
        echo "<p style='color:red; width:600px; margin:auto;'>Vous n'avez s&eacute;lectionner encore aucune recette. Pour cr&eacute;er votre menu, vous devez s&eacute;lectionner les recettes qui le compose en allant sur la page
                        de vue d'une recette, puis en cliquant sur l'ic&ocirc;ne d'ajout de recette <img src='/webroot/img/book.png' alt='' style='width:16px;'/>";             
}else{ ?>
<form  method="post" id="menu" action="/Recherche-recette-par-nom.html">
	<table style="border-collapse:collapse; width:570px; margin:auto; text-align:center;" id="tableau">
		<caption>Ordonner votre recette.</caption>
		<tr style="background-color: #990000;">
			<td style="width:30px; color: #FFFFFF;">Position</td>
			<td style="width:450px; color: #FFFFFF;">Nom de la recette</td>
			<td style="width:30px; color: #FFFFFF;">Suppr.</td>
			<td style="width:30px; color: #FFFFFF;">Monter</td>
			<td style="width:30px; color: #FFFFFF;">Descendre</td>
		</tr>	
		<?php
                $o=1;
                while(!empty($_SESSION['menu'.$o])){
                        echo '
                                <tr>
                                        <td>'.$o.'</td>
                                        <td style="text-align:left;">'.$_SESSION['menu'.$o]->nom.'</td>
                                        <td class="supprimer"><img src="/webroot/img/sup.png" style="width:16px;" alt="Supprimer"/></td>
                                        <td class="versLeHaut"><img src="/webroot/img/up.png" style="width:16px;" alt="Monter"/></td>
                                        <td class="versLeBas"><img src="/webroot/img/down.png" style="width:16px;" alt="Descendre"/></td>
                                        <td>'.$_SESSION['menu'.$o]->id.'</td>
                                </tr>';
                                $o++;
                }
        }
        ?>
	</table>
	<div style="width:570px; margin:auto;">
		<p style="text-align:right;"><input type="hidden" name="order" value=""/>
		<input type="submit" value="Envoyer" /></p>
	</div>
</form>

Puis avec jquery, on cache la dernière colonne, on récupère les valeurs de celles-ci et on insère la chaine dans un input avec val.
Ce qui donne:

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
31
32
33
34
35
36
37
38
39
40
updateLiens();
	$(".versLeHaut, .versLeBas").click(function() {
		var selectedTr = $(this).parent("tr");
		var previousTr = selectedTr.prev();
		var nextTr = selectedTr.next();
		var rowIndex = $('tr').index(selectedTr);
		if(rowIndex>=1){
			if($(this).hasClass("versLeHaut")) {
				selectedTr.insertBefore(previousTr)
			} else {
				selectedTr.insertAfter(nextTr)
			}
			updateLiens();
			setOrder();
			newPosition();
		}
	});
function updateLiens() {
	$("table tr td.versLeHaut, table tr td.versLeBas").show();
	$("table tr:eq(1) td.versLeHaut, table tr:last td.versLeBas").hide();
	$("table tr").each(function(){
		if($('tr').index(this)!=0) {
			$(this).find("td:last").hide(); }
	})
}
function setOrder() {
	var order = "";
	$("table tr").each(function(){
		if($('tr').index(this)!=0) {
			order += $(this).find("td:last").text() + ","; }
			$("[name=order]").val(order);
	})
}
function newPosition() {
	$("table tr").each(function(){
		if($('tr').index(this)!=0) {
			$(this).find("td:first").html($('tr').index(this));
		}
	})
}

Merci pour votre aide en tout cas et désolé d'avoir mis autant de temps pour répondre..

Cordialement.

Casse tête d'input

JavaScript

Discussions similaires

Partager

Partager