Casse tête d'input

Version imprimable

Casse tête d'input

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:

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:

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.

23/07/2012, 11h29
sekaijin

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
23/07/2012, 16h26
minipopov

Re

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.
24/07/2012, 23h00
NoSmoking

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

Une solution

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:

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:

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.