Discussion :

[titiboy001]

Bonjour tout le monde,
Depuis quelques jours, je suis en galère avec le plugin msDropdown.
J'ai un formulaire avec une liste déroulante qui contient des images (c'est pour cela que j'utilise msDropdown).
Dans ce formulaire, j'ai un "bouton" qui me permet d'ajouter des nouvelles listes déroulantes.
A chaque fois que l'on clique sur le bouton, une nouvelle liste déroulante apparaît, jusqu'à l'infini.

Au début j'étais parti avec la fonction append(). La 2eme liste déroulante est bien formatée avec le plugin, mais pas les suivantes.
En plus, les div des listes déroulante on la même id. Pas top du tout :/

Code php :

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
$(document).ready(function (){
	$(".addROLE").click(function (){
<?php
require_once('/config/secureDev.php');
$cnx = sqlsrv_connect( CSTRING, $cinfos);
if( !$cnx ){
?>La connexion n'a pu être établie.<?php
	die( print_r( sqlsrv_errors(), true));
}
else{
	$sqlroleslist 	= "SELECT [ID_ROLE],[LIB_ROLE] FROM [TABLE].[dbo].[ROLES] ORDER BY [ID_ROLE]";
	$cmdlist		= sqlsrv_query($cnx,$sqlroleslist);
	$jsval	= '<select id="roleslist2" name="postlist[]"><option>Séléctionnez un rôle</option>';
	while ($roles = sqlsrv_fetch_array($cmdlist)){
		$role_id	=	$roles['ID_ROLE'];
		$role_lib	=	$roles['LIB_ROLE'];
		$jsval		=	$jsval.'<option   data-image="/inc/img/roles/'.$role_id.'.png"  name="postrole[]" value="|A|'.$role_id.'" class="'.$role_id.'" >'.addslashes($role_lib).'</option>';
	}
	$jsval = $jsval.'</select>';
?>						
}					
sqlsrv_close($cnx);	
?>			
str_to_append = '<br/><?php echo $jsval; ?>'				
	$("#newROLE").append(str_to_append);
	$("#roleslist2").msDropDown();
})
}
)

Du coup je suis parti sur de l'ajax pour avoir au moins des id différentes pour chaque div.

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
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	}
	return xhr;
}
var nbJs = 0;
function add(){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('NEWROLE_LIST').innerHTML += leselect;
			$("#roleslist"+(nbJs+1)).msDropDown();			
		}
	}
	xhr.open("POST","apps/ajaxDropdown.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	nbJs++;
	xhr.send("nbJs="+nbJs);
}

Et le fichier ajaxDropdown.php :

Code php :

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
<?php
if(isset($_POST["nbJs"])){
	require_once('../config/secureDev.php'); 
	$cnx = sqlsrv_connect(CSTRING, $cinfos);
	if( !$cnx ){
		?>La connexion n'a pu être établie.<?php
		die( print_r( sqlsrv_errors(), true));
	}else{
		$_POST["nbJs"]++;
		$sqlroleslist 	= "SELECT [ID_ROLE],[LIB_ROLE] FROM [TABLE].[dbo].[ROLES] ORDER BY [ID_ROLE]";
		$cmdlist		= sqlsrv_query($cnx,$sqlroleslist);
		$rowlist		= sqlsrv_has_rows( $cmdlist );
		$i				= 1;
		echo '<select id="roleslist'.$_POST["nbJs"].'" name="postlist[]">';
		echo '<option>S&eacute;l&eacute;ctionnez un r&ocirc;le</option>';
		while($roles = sqlsrv_fetch_array($cmdlist)){
			$role_id	=	$roles['ID_ROLE'];
			$role_lib	=	$roles['LIB_ROLE'];
			echo '<option   data-image="/inc/img/roles/'.$role_id.'.png"  name="postrole[]" value="|A|'.$role_id.'" class="'.$role_id.'" >'.addslashes($role_lib).'</option>';
			echo $role_lib;
			echo '</option>';
		}
		echo '</select>';
	}
}
?>

Avec cette 2eme piste, msDropdown me formate bien mes listes déroulantes à chaque fois que je clique sur le bouton ajouter.
Le problème avec cette méthode c'est que mes listes déroulantes générées au milieu ne sont plus sélectionnables. (Je peux modifier/cliquer que sur ma première et ma dernière liste)
Or je veux qu'a tout moment l'utilisateur puisse modifier n'importe quelles listes.

Merci d'avance de votre aide.

[titiboy001]

Bon finalement j'ai enfin réussi.
J'étais parti ce matin dans du clonage mais sans succès.
Je suis revenu sur ma 2eme piste.

Au lieu de faire :

Code :

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

document.getElementById('NEWROLE_LIST').innerHTML += leselect;

A chaque clique de mon bouton, je crée une nouvelle div et j'insère dedans ma liste déroulante.

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 add(){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var div = document.createElement('div');
			div.id='NEWROLE_LIST'+nbJs;
			document.getElementById('NEWROLE_LIST_ADD_DIV').appendChild(div);
			leselect = xhr.responseText;
			document.getElementById('NEWROLE_LIST'+nbJs).innerHTML = leselect;
			//$("#roleslist"+(nbJs+1)).msDropDown();
			//$("#selecticon"+(nbJs+1)).msDropDown();
			$(".tstDropDown").msDropDown();
		}
	}

Je ne sais pas si c'est la façon la plus opti à faire, mais au moins ça marche.

[NoSmoking]

Bonjour,
tant à utiliser jQuery ne crois tu pas qu'il faudrait réellement l'utiliser.

Ce code par exemple document.getElementById('NEWROLE_LIST_ADD_DIV').appendChild(div); fait un peu tâche!