Discussion :

[Arakasix]

Bien le bonjour à tous,

je suis actuellement occupé à développer un système de site-web modulable et j'ai un petit problème dans le module d'administration destiné à modifier les menus du site. Après une heure à rechercher une solution sur google, je commence à me demander si je suis le seul au monde à avoir ce problème.

Le principe est qu'on peut ajouter un nouvel élément de menu, modifier le nom des éléments du menu et changer leur ordre d'apparition.
J'utilise javascript pour ajouter un nouvel input text ou changer l'ordre de deux éléments ( en réalité, la valeur du premier prends la valeur du second et vice-versa ).
Le problème est que dès que javascript fait quelque chose, il réinitialise tous les champs de mon formulaire à leur valeur d'origine.

Le code php et HTML d'affichage des menus contenus dans la bdd :

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
 
<div id="menuList">
	<?php
                if($data['menuItems'] != null)
                {
                        
                        for($k = 0; $k < sizeOf($data['menuItems']); $k++)
                        {
                        ?>
				<input type="text" id="menuItem<?php echo $k; ?>" name="menuItem<?php echo $k; ?>" class="menuItem" value="<?php echo $data['menuItems'][$k]['text']; ?>"/>
				<?php 
                                if($k > 0)
                                { ?>
					<a href="" onclick="moveUp('menuItem<?php echo $k; ?>');"><img src="vue/images/flecheHaut.png" style="position:relative;top:5px;"/></a>
				<?php
                                }
                                ?>
				<?php 
                                if($k < sizeOf($data['menuItems'])-1)
                                { ?>
				<a href="" onclick="moveDown('menuItem<?php echo $k; ?>');"><img src="vue/images/flecheBas.png" style="position:relative;top:5px;"/></a>
				<?php
                                }
                                ?>
				<br />
				<input type="hidden" name="idTextItem<?php echo $k; ?>" id="idTextItem<?php echo $k; ?>" value="<?php echo $data['menuItems'][$k]['idText']; ?>"/>
				<input type="hidden" name="idMenuItem<?php echo $k; ?>" id="idMenuItem<?php echo $k; ?>" value="<?php echo $data['menuItems'][$k]['idMenu']; ?>"/>
 
			<?php
                        }
                }
        ?>
</div>

le code javascript de changement d'ordre de deux éléments :

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
 
function moveUp(idField)
{
 
	var id = "";
	var name = "";
	for(var k = 0; k < idField.length; k++)
	{
		if(idField.charCodeAt(k) >= 48 && idField.charCodeAt(k) < 58)
			id = id+idField.charAt(k);
		else
			name = name+idField.charAt(k);
	}
 
	var element2 = document.getElementById(name+(parseInt(id)-1));
	var element2Value = element2.value;
 
	var element1 = document.getElementById(idField);
 
	element2.value = element1.value;
	element1.value = element2Value;
 
 
}

C'est comme si quelque part je lançais la méthode .reset() du formulaire qui contient la liste des input text.

Je travail avec WAMP et effectue mes tests sur firefox et chrome.

Merci d'avance pour l'aide fournie et le temps consacré.

Bonne journée

[NoSmoking]

Bonjour,

Code :

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

<a href="" onclick="moveUp('menuItem<?php echo $k; ?>');">

il te faut annuler le comportement par défaut des liens en mettant un return false

Code :

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

<a href="" onclick="moveUp('menuItem<?php echo $k; ?>');return false;">

Pourquoi utiliser une balise A quand il existe la balise BUTTON qui est faite pour ce genre d'action?

[Arakasix]

Un tout grand merci, j'ai ajouté le retour aux liens et ça fonctionne parfaitement pour changer de place deux éléments.

J'ai encore le même problème avec le bouton dédié à l'ajout d'un nouveau champ. J'ai tenté d'ajouter aussi return false mais apparemment ce n'est pas exactement le même problème.

La fonction javascript d'ajout d'un input dans le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
function addNewMenuItem()
{
	var field = document.getElementById('nbMenuItem');
	var element = document.getElementById('menuList');
 
	var nb = parseInt(field.value);
	element.innerHTML += 	'<input type="text" id="menuItem'+(nb+1)+'" name="menuItem'+nb+'" class="menuItem" value="menuItem'+nb+'" /><br />';
	field.value++;
}

le bouton d'ajout d'un element :

Code :

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

<input type="button" name="addMenuItem" value="Add menu item" onclick="addNewMenuItem();"/><br />

Et pour répondre à ta question, j'ai choisi les lien au lieu de boutons pour pouvoir cliquer sur une image et non sur un bouton, c'est un choix graphique en fait ^^

[RomainVALERI]

Et pour répondre à ta question, j'ai choisi les lien au lieu de boutons pour pouvoir cliquer sur une image et non sur un bouton, c'est un choix graphique en fait ^^

Pour info, tu peux looker ton bouton comme tu veux, et si tu veux une image, tu peux la mettre à l'intérieur de ton bouton sans problème (voir spec)

Sinon, à part ça (même si c'est un détail) : ton élément ayant pour id 'nbMenuItem' est-il un input text ? Si oui il faut protéger ton parseInt :

Code :

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

1
2
3
4
	var field = document.getElementById('nbMenuItem');
	var element = document.getElementById('menuList');
 
	var nb = parseInt(field.value, 10);

(pour éviter une conversion à la volée en octal en cas de saisie '08' ou '09')

[Arakasix]

ah non c'est un input hidden que j'incrémente à chaque nouvelle insertion d'un input text et qui reçoit une valeur de base lors du chargement de la base selon le nombre d'entrées déjà dans la db.

Je ne savais pas ( ou j'avais oublié ) pour le bouton et les images, merci de l'info ^^