Combobox sans recharge page en JS

**claude77** · 26/01/2017, 13h58

Bonjour,
je sollicite votre aide pour un problème qui m'occupe depuis plusieurs semaines

j'ai un formulaire avec 5 combo box qui recharge la page à chaque fois me faisant perdre le résultat des premières
j'avais trouvé une function en JS qui permettait de lire une base mysql sans rechargement
j'ai bien un résultat, mais je ne vois pas comment construire mes combobox.
si une âme charitable pouvait me donner un coup de main, c'est la seule chose qui me manque pour terminer une gestion d'association
mon code d'appel de la function:

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
/ Déclare un tableau associatif javascript de la forme
//   tableau["nomchamp"][n°ligne] == valeur
// contenant le résultat d'une requête mysql.
 
// $requete : chaine de caractères contenant la requête mysql à lancer.
// $id_table : nom de la variable tableau à déclarer en javascript.
 
//----------------- connexion BdD et Tables --------------------------
include("_connect7.php");
$table="types_cotisation";
 
//--------------------------------------------------------------------
//prepartion de la requete à envoyer à la function
$requete= "SELECT `id_type_cotis`, `libelle_type_cotis` FROM `$table`";
 
//id à passer à la requete
$id_table="id_type_cotis"; //nom de l'id de la table
 
//--------------------------------------------------------------------
//appel de la fonction JavaScript
//--------------------------------------------------------------------
mysql_to_js ($requete, $id_table);
 
//Traitement du return de la function dans une combobox
//
//
?>

Ma fonction

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
//********************************************************************
//--------------------------------------------------------------------
// fonction JavaScript mysql_to_js
//--------------------------------------------------------------------
//********************************************************************
?>
<script language="JavaScript" type="text/javascript">
<?php
function mysql_to_js($requete, $id_table)
{
include("_connect7.php");
 
// ------------------ Requête mysql ----------------------------------
//echo $requete;echo"<br />"; test reception requete
	$result = mysqli_query($SQL,$requete)
	or die('Erreur SQL !   ----->'.$result.'&nbsp;&nbsp;'.mysqli_error($SQL).$requete);
 
	$taille = mysqli_num_rows($result);
//echo $taille;echo"<br />";// test ok retourne nombre ecritures trouvées 7
 
//--------------------------------------------------------------------	
// Ecriture de la déclaration du tableau javascript si la requête
// contient quelque chose, sinon déclaration d'un tableau null.
//--------------------------------------------------------------------	
 
$numfields = mysqli_num_fields($result); // retourne le nombre de champs (colonnes)
//echo $numfields;echo"<br />";// test ok retourne 2 colonnes
 
	if($numfields > 0) 
	{	
// Déclaration de la variable tableau.
		echo("var ".$id_table." = new Array(".$numfields.");\n");
 
// Déclaration des tableaux de valeurs pour chaque champs.
	for($i=0; $i<$numfields; $i++) 
		{
	 echo($id_table."['".mysql_field_name($result, $i)."'] = new Array(".$taille.");\n");	
		echo"<br />";
		//echo"<br />";
		}
		if($taille>0)  // si un resultat est trouvé
		{	
		echo "<br />";
			$i=1; //i=0
			while($rows = mysqli_fetch_assoc($result))
			{
 
				foreach($rows as $key => $value)
				{
				//	echo'<pre>';print_r($rows);	echo'</pre>';
				echo($id_table."['".mysqli_escape_string($SQL,$key)."'][".$i."] = '".mysqli_escape_string($SQL,$value)."';<br >");
 
 
				//echo"<br />";
				//return ($return); // facultatif 
				}				
				$i++;
 
			}	
mysql_free_result($result);			
		}		
	}
else echo("var ".$id_table." = null;\n");	
}	
?>
</script>

le résultat de sortie pour faire la combo

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
var id_type_cotis = new Array(2); id_type_cotis[''] = new Array(7);
id_type_cotis[''] = new Array(7);
 
id_type_cotis['id_type_cotis'][1] = '1';
id_type_cotis['libelle_type_cotis'][1] = 'Adhesion Internet+Axona';
id_type_cotis['id_type_cotis'][2] = '2';
id_type_cotis['libelle_type_cotis'][2] = 'Adhésion Internet Simple';
id_type_cotis['id_type_cotis'][3] = '3';
id_type_cotis['libelle_type_cotis'][3] = 'Membre Bienfaiteur Internet+Ax';
id_type_cotis['id_type_cotis'][4] = '4';
id_type_cotis['libelle_type_cotis'][4] = 'Membre Bienfaiteur+Internet';
id_type_cotis['id_type_cotis'][5] = '5';
id_type_cotis['libelle_type_cotis'][5] = 'Abonnement AXONA sans Adhésion';
id_type_cotis['id_type_cotis'][6] = '6';
id_type_cotis['libelle_type_cotis'][6] = 'Donateurs';
id_type_cotis['id_type_cotis'][7] = '7';
id_type_cotis['libelle_type_cotis'][7] = 'Adh Gratuite ou Couple';

**SpaceFrog** · 26/01/2017, 14h23

Avec Jquery il existe cascading combos
http://www.igniteui.com/combo/cascading-combos

http://demos.telerik.com/kendo-ui/co...cadingcombobox

**claude77** · 26/01/2017, 14h29

Bonjour,
merci pour la réponse

je n'ai pas besoin de combo en cascades, simplement une petite combo de rien du tout
et si j'arrivais à faire avec cette petite fonction toute simple et sympathique je suis un homme heureux

a vous lire

**SpaceFrog** · 26/01/2017, 14h46

Il faut des options avec des values ?

tu veux quoi en value et quoi en libellé

Code :

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

1
2
3
 
<select>
  <option value="?">libellé</option>

ton array est en php ? il faudra le passer en js avec un json encode

a moins que tu veuilles construire le select en php ?

**claude77** · 26/01/2017, 14h52

merci de ton aide

le plus simple sera le mieux, a 70 printemps les neurones sont hs

le tout est de ne pas recharger la page
j'ai ai au moins 5 dans le mème formulaire

j'avais pas vu le haut du message:
je veux afficher les libellés dans la combo et récupérer l'id pour l'enregistrer

**SpaceFrog** · 26/01/2017, 16h33

Questions subsidiaires

tu charges tous les éléments pour les combos au chargement de la page, ou est ce que un évènement sur la page doit aller récupérer les infos pour le combe pour le serveur?

Cela déterminera si on doit faire un ajax pour aller récupérer les données pour les combos ou non

**claude77** · 26/01/2017, 16h37

je peux charger toutes les combos au premier chargement

**SpaceFrog** · 26/01/2017, 16h54

Une dernière pour la route utilises tu Jquery ?

**SpaceFrog** · 26/01/2017, 16h55

avec un json pour un combo
https://jsfiddle.net/08pjsky8/1

**claude77** · 26/01/2017, 17h05

merci

la réponse va être un peu plus longue, il faut que je cogite mais çà à l'air très bien

il faut que je charge JQ google dans le head ou d'autres biblio
comment je récupère l'id choisi ???

**SpaceFrog** · 26/01/2017, 17h16

1) intégrer jquery :
http://mathieu-robin.developpez.com/...-jquery/#LII-A

2) https://jsfiddle.net/08pjsky8/2/
qui récupère le id_type_cotis
on peut aussi récupérer le texte ...

Tout dépend aussi du moment de la récupération ...
SI tu veux en parler plus en détail je suis sur le chat de développez pendant les heures de bureau ...

**claude77** · 26/01/2017, 17h22

merci c'est çà

encore un petit coup pour la route
là, les éléments de la combo sont en dur dans le script

comment les récupérer dans ma table comme mon exemple de script ???

**SpaceFrog** · 26/01/2017, 17h31

regarde du coté de json encode en php

il faut passer la variable à 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
<?php 
var id_type_cotis = new Array(2); id_type_cotis[''] = new Array(7);
id_type_cotis[''] = new Array(7);
 
id_type_cotis['id_type_cotis'][1] = '1';
id_type_cotis['libelle_type_cotis'][1] = 'Adhesion Internet+Axona';
id_type_cotis['id_type_cotis'][2] = '2';
id_type_cotis['libelle_type_cotis'][2] = 'Adhésion Internet Simple';
id_type_cotis['id_type_cotis'][3] = '3';
id_type_cotis['libelle_type_cotis'][3] = 'Membre Bienfaiteur Internet+Ax';
id_type_cotis['id_type_cotis'][4] = '4';
id_type_cotis['libelle_type_cotis'][4] = 'Membre Bienfaiteur+Internet';
id_type_cotis['id_type_cotis'][5] = '5';
id_type_cotis['libelle_type_cotis'][5] = 'Abonnement AXONA sans Adhésion';
id_type_cotis['id_type_cotis'][6] = '6';
id_type_cotis['libelle_type_cotis'][6] = 'Donateurs';
id_type_cotis['id_type_cotis'][7] = '7';
id_type_cotis['libelle_type_cotis'][7] = 'Adh Gratuite ou Couple'; 
?>
<script type="text/javascript">
var id_type_cotis  = <?php echo json_encode(id_type_cotis); ?> ;
.../...
</script>

En fonction de ce que donnera le code source généré il faudrait peut être revoir un peu le script pour exploiter le json obtenu ...
On verra ça demain ... je file

**claude77** · 26/01/2017, 17h35

merci de ta gentillesse

effectivement je vais voir çà demain

bonne soirée

**SpaceFrog** · 27/01/2017, 08h31

Ceci étant on pourrait aussi bien crée les combos coté serveur avec php ...

**claude77** · 27/01/2017, 09h19

bonjour,
j’espère que la route n'a pas été trop difficile avec la pluie givrante

je préférerais le php si c'est possible , j'y suis un petit peu plus a l'aise
je voudrais garder le principe de la function pour que le script soit universel
on passe juste la requête et l'ID et ça renvoi la combo
ca peut donc servir à toutes les combo

merci pour ton aide, le reste de l'appli est prête reste que ça

**SpaceFrog** · 27/01/2017, 10h31

en 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
27
28
<?php
$id_type_cotis = array();
$id_type_cotis[''] = array();
$id_type_cotis[''] = array();
 
$id_type_cotis['id_type_cotis'][1] = '1';
$id_type_cotis['libelle_type_cotis'][1] = 'Adhesion Internet+Axona';
$id_type_cotis['id_type_cotis'][2] = '2';
$id_type_cotis['libelle_type_cotis'][2] = 'Adhésion Internet Simple';
$id_type_cotis['id_type_cotis'][3] = '3';
$id_type_cotis['libelle_type_cotis'][3] = 'Membre Bienfaiteur Internet+Ax';
$id_type_cotis['id_type_cotis'][4] = '4';
$id_type_cotis['libelle_type_cotis'][4] = 'Membre Bienfaiteur+Internet';
$id_type_cotis['id_type_cotis'][5] = '5';
$id_type_cotis['libelle_type_cotis'][5] = 'Abonnement AXONA sans Adhésion';
$id_type_cotis['id_type_cotis'][6] = '6';
$id_type_cotis['libelle_type_cotis'][6] = 'Donateurs';
$id_type_cotis['id_type_cotis'][7] = '7';
$id_type_cotis['libelle_type_cotis'][7] = 'Adh Gratuite ou Couple';
 
 
echo '<select id="mysel">';
 
foreach( $id_type_cotis['libelle_type_cotis'] as $i => $val){
    echo '<option value="'.$id_type_cotis['id_type_cotis'][$i] .'">'.$val.'</option>';
}
echo '</select>';
?>

Si tu as des questions, tu peux me retrouver en live sur http://chat.developpez.com/

**claude77** · 27/01/2017, 14h30

j'ai fait çà

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
if($taille>0)  // si un resultat est trouvé
		{	
			echo '<select id="mysel">';
			$i=0; //i=0
			while($rows = mysqli_fetch_assoc($result))
			{				
			foreach($rows as $key => $value)
			{
				echo '<option value="'.$id_table['$id_table'][$i] .'">'.$value.' </option>';
			}
			echo '</select>';
 
				//return ($return); // facultatif 							
			}	
			$i++;	
 
		}

le resultat ici c'est presque cà
http://cg-aisne.org/_essai/combobox/...mbobox_js7.php

**claude77** · 30/01/2017, 09h46

Bonjour spaceFrog j’espère que le we c'est bien passé
j'ai réussi à refaire au propre la function et çà fonctionne
l'id remonte bien mais pas le libellé de la combo
il reste à à mettre le retour id et libelle dans des variables php $droit_statut et libelle statut

donc j'ai

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
//*****************************************************
//--------------------------------------------------------------------
//-------------------- combobox droit_statut -------------------------
//--------------------------------------------------------------------
//*****************************************************
echo"<tr><td>droit de l'adhérent :</td>	";	
echo'<td>';
 
//--------------------------------------------------------------------
//prepartion de la requete à envoyer à la function
//--------------------------------------------------------------------
$table2 = "GratosAsso_statut";// Nom de la Table
$id_table="droit_statut"; //nom de l'id de la table
$libelle_table="libelle_statut";// nom du libellé des champs combo
 
$requete= "SELECT `$id_table`, `$libelle_table` FROM `$table2`";
include ("combo_droit_function.php");
//--------------------------------------------------------------------
//appel de la fonction JavaScript  vers fichier combo_droit_function.php
//--------------------------------------------------------------------
mysql_to_js ($requete, $id_table,$libelle_table);
 
//--------------------------------------------------------------------
//----Traitement du return de la function combobox -------------------
//--------------------------------------------------------------------
 ?>
<div id="choix"></div>
<script type="text/javascript">
    $( function(){
        // ici le code js
        $('#mysel').on('change', function(){
            userchoix= $(this).val();
            $('#choix').html(userchoix);
 
            })
        })
</script>
</td>
<?php
echo"<td>";
echo" &nbsp;&nbsp;&nbsp;&nbsp;";
echo"</td></tr>";
 
//--------------------------------------------------------------------
//--------------------------------------------------------------------
// fin de appel de la fonction combobox droit_statut
//--------------------------------------------------------------------
//*****************************************************
?>

et la function qui devient universelle

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
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
<?php
//********************************************************************
//********************************************************************
//--------------------------------------------------------------------
// fonction JavaScript mysql_to_js
//--------------------------------------------------------------------
//********************************************************************
//********************************************************************
?>
<script language="JavaScript" type="text/javascript">
<?php
function mysql_to_js($requete, $id_table, $libelle_table)
{
require_once('../_admin/_connect.php');	
 
//echo $requete;     echo"<br />"; //test reception requete
//echo $id_table;     echo"<br />";// test reception requete
 
// ------------------ Requête mysql ----------------------------------
 
global $SQL;
$result = mysqli_query($SQL,$requete)
	or die('Erreur SQL !   ----->'.$result.'&nbsp;&nbsp;'.mysqli_error($SQL).$requete);
 
	$taille = mysqli_num_rows($result);
//echo $taille;echo"<br />";// test ok retourne nombre ecritures trouvées 
 
//--------------------------------------------------------------------	
// Ecriture de la déclaration du tableau javascript si la requête
// contient quelque chose, sinon déclaration d'un tableau null.
//--------------------------------------------------------------------	
 
$numfields = mysqli_num_fields($result); // retourne le nombre de champs (colonnes)
//echo $numfields;echo"<br />";// test ok retourne 2 colonnes
 
	if($numfields > 0) 
	{	
		if($taille>0)  // si un resultat est trouvé
		{				
			echo '<select id="mysel">';
			echo'<OPTION SELECTED VALUE="">Votre choix </option>';
			while($rows = mysqli_fetch_array($result))
			{	
			echo '<option value="'.$rows[$id_table].'">'.$rows[$libelle_table].' </option>';
 			}
			mysql_free_result($result);
			echo '</select>';							
			}	
 
	}	
else
	echo("var ".$id_table." = null;\n");	
} //fin function
 
?>
</script>

et je ne vois pas comment convertir les retours du JQ en php $droit_statut et $libelle statut

merci encore de ton aide qui va me permettre de terminer ma gestion d'adhérent d'association

**claude77** · 06/05/2017, 17h23

bon voila après de longue recherche le script qui fonctionne sans recharge de la page

Code html :

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
81
82
83
84
85
86
87
88
89
90
//-------------------- combobox droit_statut -------------------------
//--------------------------------------------------------------------
//********************************************************************
echo"<tr><td>droit de l'adhérent :</td>	";	
echo'<td>';
//--------------------------------------------------------------------
//preparation de la requete à envoyer à la function JS
//--------------------------------------------------------------------
$table2 = "GratosAsso_statut";// Nom de la Table
$id_table="droit_statut"; //nom de l'id de la table
$libelle_table="libelle_statut";// nom du libellé des champs combo
$requete= "SELECT `$id_table`, `$libelle_table` FROM `$table2`";
 
//--------------------------------------------------------------------
//appel de la fonction JavaScript  
//--------------------------------------------------------------------
mysql_to_js ($requete, $id_table,$libelle_table);
 
//----Traitement du return de la function combobox -------------------
//--------------------------------------------------------------------
?>
<script type="text/javascript">
    $( function(){
            $('#mysel2').on('change', function(){
            userchoix= $(this).val();
            $('#choix').html(userchoix);
            
            })
        })              
</script>
<?php
 $id_table2='  <div id="choix"></div> '; //Récupere l'ID de l'option Choisie
 
//--------------- affichache de l'ID du choix ------------------------
$droit_statut=$id_table2;
echo" <td>vous avez choisi droit:--->". $droit_statut;
echo"</td></tr>";
//-------------------------------------------------------------------
// --------- fin de appel de la fonction combobox droit_statut -------
//---------------------------------------------------------------------
 
//********************************************************************
//********************************************************************
//--------------------------------------------------------------------
// fonction JavaScript mysql_to_js
//--------------------------------------------------------------------
//********************************************************************
//********************************************************************
?>
<script language="JavaScript" type="text/javascript">
<?php
 
function mysql_to_js($requete, $id_table, $libelle_table)
{
global $SQL;
 
// ------------------ Requête mysql ----------------------------------
 
$result = mysqli_query($SQL,$requete)
        or die('Erreur SQL !   ----->'.$result.'&nbsp;&nbsp;'.mysqli_error($SQL).$requete);
 
        $taille = mysqli_num_rows($result);
        
//--------------------------------------------------------------------  
// Ecriture de la déclaration du tableau javascript si la requête
// contient quelque chose, sinon déclaration d'un tableau null.
//--------------------------------------------------------------------  
 
$numfields = mysqli_num_fields($result); // retourne le nombre de champs (colonnes)
 
        if($numfields > 0) 
        {       
                if($taille>0)  // si un resultat est trouvé
                {                       
                        echo '<select id="mysel2">';
                        
                        echo'<OPTION  SELECTED VALUE="">Votre choix</option>';
                        while($rows = mysqli_fetch_array($result))
                        {       
                        echo '<option value="'.$rows[$id_table].'">'.$rows[$libelle_table].' </option>';
                        }
                        //mysql_free_result($result);
                        echo '</select>';       
        
                        }       
        }       
        else
        echo("var ".$id_table." = null;\n");    
} 
//------------------------- fin function JS -----------------------------

Combobox sans recharge page en JS

JavaScript

Discussions similaires

Partager

Partager