Créer une nouvelle liste avec msDropdown
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:
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:
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:
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éléctionnez un rô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.
