IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Remplissage options avec résultat d'une requête mysql


Sujet :

AJAX

  1. #1
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut [AJAX] Remplissage options avec résultat d'une requête mysql
    Bonjour a tous.

    En fait je suis a la recherche d'un exemple concret car je n'arrive pas a comprendre et adapter les tutos existants en ligne.

    Je dois remplir un select a partir d'une base de donnees mysql dans un fichier javascript qui est importé dans la page php.

    La page php je l'ai faite avec un retour en json mais comment acceder concretement a cette page et exploiter ce qu'elle me renvoi?

    Si quelqun pouvait m'expliquer cela (je comprends vite mais faut m'expliquer longtemps lol) ça serait genial.

    Merci d'avance

    la page php avec l'acces a la base et l'encodage json:
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <?php
    $requete['type_ligne']="SELECT id_type_ligne, nom_type, type_ligne FROM type_ligne;";
    $type_ligne=$sql->TabResSQL($requete['type_ligne']);
    $type_ligne=json_encode($type_ligne);
    return $type_ligne;
    ?>

    le code js dans le quel je dois integrer le resultat:
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    function ajout_nombre_select(nb, objInput)
    {
    	var reg = /^[0-9]*$/;
     
    	if(!reg.test(objInput.value))
    	{
    		objInput.value = objInput.value.substring(0,objInput.value.length-1);
    	}
    	//recuperation du conteneur (div) qui contiendra les select
    	c=document.getElementById('div_a_remplir_suivant_nb_po');
    	//Suppression des select presents dans le conteneur au cas de changement avant remplissage
    	//avec le bon nombre de select
    	while (c.hasChildNodes())
    	{
    		c.removeChild(c.lastChild);
    	}
     
    	//Boucle qui remplis le conteneur avec le nombre de select demande.
    	for(boucle = 1; boucle <= nb; boucle++)
    	{
    		//creation du label contenant le titre du select
    		label=document.createElement("label");
    		//creation neud de text pour le label
    		text_label= document.createTextNode('PO N°'+boucle);
    		//asignation du neud text au label
    		label.appendChild(text_label);
    		//creation span
    		span=document.createElement("span");
    		//attribution de la classe filtre legende au span
    		span.setAttribute('class',"filtres legende");
    		//assignation du label au span
    		span.appendChild(label);
    		//assignation du span au conteneur (div)
    		c.appendChild(span);
    		//creation du select
    		ch=document.createElement('select');
     
     
     
    		elem1=document.createElement("option");
    		elem2=document.createElement("option");
    		elem3=document.createElement("option");
    //                                        Attribution des valeurs au select
    		elem1.setAttribute('value',"...");
    		elem2.setAttribute('value',"analogique");
    		elem3.setAttribute('value',"numerique");
    //                                        Creation des neux de text qui seront affiche dans le select
    		valeur1 = document.createTextNode('...');
    		valeur2 = document.createTextNode('Analogique');
    		valeur3 = document.createTextNode('Numerique');
    //                                        Atribution des neux de text aux options
    		elem1.appendChild(valeur1);
    		elem2.appendChild(valeur2);
    		elem3.appendChild(valeur3);
    //                                        Atribution des options au select
    		ch.appendChild(elem1);
    		ch.appendChild(elem2);
    		ch.appendChild(elem3);
    //                                        On donne un nom au select
    		ch.setAttribute('name',"po"+boucle);
    //                                         Atribution du select au conteneur
    		c.appendChild(ch);
     
     
    		//creation du label contenant le titre de la checkbox
    		label2=document.createElement("label");
    		//creation neud de text pour le label
    		text_label2= document.createTextNode('Mise en continuité');
    		//asignation du neud text au label
    		label2.appendChild(text_label2);
    		//creation span
    		span2=document.createElement("span");
    		//attribution de la classe filtre legende au span
    		span2.setAttribute('class',"filtres legende");
    		//assignation du label au span
    		span2.appendChild(label2);
    		//assignation du span au conteneur (div)
    		c.appendChild(span2);
    		//creation de la checkbox
    		ch2=document.createElement('input');
    		ch2.setAttribute('type','checkbox');
    		//Attribution des valeurs à la checkbox
    		ch2.setAttribute('value',"oui");
    		//On donne un nom à la checkbox
    		ch2.setAttribute('name',"mise_en_con"+boucle);
    		//Atribution de la checkbox au conteneur
    		c.appendChild(ch2);
     
     
    			 //creation du label contenant le titre du select
    		label=document.createElement("label");
    		//creation neud de text pour le label
    		text_label= document.createTextNode('Avec PO N°');
    		//asignation du neud text au label
    		label.appendChild(text_label);
    		//creation span
    		span=document.createElement("span");
    		//attribution de la classe filtre legende au span
    		span.setAttribute('class',"filtres legende");
    		//assignation du label au span
    		span.appendChild(label);
    		//assignation du span au conteneur (div)
    		c.appendChild(span);
    		//creation du select
    		ch=document.createElement('select');
    		//creation des options
     
    		for(var i = 1; i <= nb; i++)
    		{
     
    			if(i!=boucle)
    			{
    				elem=document.createElement("option");
    				elem.setAttribute('value',i);
    				valeur = document.createTextNode(i);
    				elem.appendChild(valeur);
    				ch.appendChild(elem);
    			}
     
     
    		}
     
    		//On donne un nom au select
    		ch.setAttribute('name',"po2"+boucle);
    		 //Atribution du select au conteneur
    		c.appendChild(ch);
     
    	   //creation d'un br'
    		separateur = document.createElement("br");
    		//Atribution du br au conteneur apres le select.
    		c.appendChild(separateur);
    	}
    }
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Tu veux dire un appel ajax ?.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    en fait oui j'ai une page js qui est appelé dans ma page php

    Je dois trouver un moyen de récupérer des informations en BdD mysql et construire mon select avec mais comme j'ai fait l'impasse (j'ai honte je sais ) sur ajax je cherche mais ne comprends rien aux tuto trouvé
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Le principe d'ajax est de faire un aller retour sur le serveur sans recharger la page ...

    Le schéma classique lorsque l'on avait besoin d'aller cherche une info sur le serveur était d'avoir un formulaire, ce qui impliquait un rechargement de page.

    Ajax (xmlhttprequest) permet de lancer une requete vers le seveur sans recharger la page.

    en gros tu pointes vers une page (en passant ou non des paramètres)
    et tu reçois en retour une réponse du serveur sous forme d'xml ou de string

    Pour vulgariser, c'est comme si tu envoyais un chauffeur avec une liste de courses chercher des marchandises sur le serveur.
    Il part avec la liste de courses (les paramètres) arrive à l'adresse indiquée, remets sa liste.
    Le vendeur du magasin (langage serveur) prend la liste et opère aux traitements coté sevreur (requete ou autre ...) puis fait un echo du resultat

    Le chauffeur récupère les marchandises (la réponse du serveur xml ou string)
    et les ramène au navigateuir coté client.
    De retour sur la page ton javascript tiaite les marchandises reçues (xml ou string)

    Si tu comprends ce schéma jette un oeil sur ce tuto http://siddh.developpez.com/articles/ajax/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    Oui ça c'est le principe de base. Mais dans la pratique je bloque.

    J'ai construit un objet xlmhttprequest comme ça:
    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
    if (window.XMLHttpRequest)    //  Objet standard
    { 
    	xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
    } 
    else  if (window.ActiveXObject)      //  Internet Explorer
    {
    	xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
     
    xhr.onreadystatechange = function()
    {
    	var affich_list=xhr.responseText;
    	alert(affich_list);
    	//obj = document.getElementById(id_ecrire);
    	//obj.innerHTML = affich_list;
    };
     
    xhr.open("GET", "acces_ajax_options_poster.php" , true);
    xhr.send(null);
    Trouve dans un tuto

    Mais comment je fais pour le lancer vers une page php qui effectue la requête et surtout comment lire cela après?
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    lis le tuto de siddh c'est bein expliqué ...
    la declaration du "moteur"
    l'appel
    le retour ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    OK merci je vais regarder.
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  8. #8
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    mon conseil pour bien comprendre Ajax :

    C'est, à mon avis, la meilleure façon d'apprendre, et surtout de ne pas en ressortir "frustré", en disant "je n'ai rien compris" ou "dans la pratique je bloque"...

  9. #9
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    Alors j'ai suivis le tuto mais je suis bloqué.
    Je récupéré bien quelque chose de ma page php dans le xhr.responseText
    mais comment faire pour le select?
    J'ai fait en sorte que pour les tests la page php m'affiche ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <option value="choix1">Choix 1</option>
    Mais impossible de le mettre dans le select.

    Voici le code utilisé pour l'instant.
    Si vous voyez ou je me fourvoie ça m'arrangerais bien ^^
    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
     getXhr;
                //xhr.open("GET", "acces_ajax_options_poster.php" , true);
                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
                }
     
                /**
                 * Méthode qui sera appelée sur le click du bouton
                 */
     
                    var xhr = getXhr()
                    // On défini ce qu'on va faire quand on aura la réponse
                    xhr.onreadystatechange = function(){
                        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                        if(xhr.readyState == 4 && xhr.status == 200){
                            alert(xhr.responseText);
                            leselect = xhr.responseText;
                            document.getElementById("po"+boucle).innerHTML = leselect;
                        }
     
                    }
                    xhr.open("GET","pages/acces_ajax_options_poster.php",true);
                    xhr.send(null);
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  10. #10
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    Ou est il possible de récupérer un tableau directement? comme ça je construis mes options en faisant ma sauce tranquillement
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  11. #11
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    tu peux nous remontrer le tout, en expliquant ce que tu veux faire, + codes des fichiers ?
    Là, on n'a que des bouts de codes éparpillés,...

    document.getElementById("po"+boucle) ??
    "pages/acces_ajax_options_poster.php" ??
    ...

    Ma grand-mère faisait ça aussi : elle parlait dans sa tête, et de temps en temps elle sortait une phrase.
    C'était drôle, mais le sens général nous échappait totalement.

  12. #12
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
        alert(ton_tableau_js);
     
        function ajout_nombre_select(nb, objInput)
        {
            var reg = /^[0-9]*$/;
     
            if(!reg.test(objInput.value))
            {
                objInput.value = objInput.value.substring(0,objInput.value.length-1);
            }
            //recuperation du conteneur (div) qui contiendra les select
            c=document.getElementById('div_a_remplir_suivant_nb_po');
            //Suppression des select presents dans le conteneur au cas de changement avant remplissage
            //avec le bon nombre de select
            while (c.hasChildNodes())
            {
                c.removeChild(c.lastChild);
            }
     
            //Boucle qui remplis le conteneur avec le nombre de select demande.
            for(boucle = 1; boucle <= nb; boucle++)
            {
                //creation du label contenant le titre du select
                label=document.createElement("label");
                //creation neud de text pour le label
                text_label= document.createTextNode('PO N°'+boucle);
                //asignation du neud text au label
                label.appendChild(text_label);
                //creation span
                span=document.createElement("span");
                //attribution de la classe filtre legende au span
                span.setAttribute('class',"filtres legende");
                //assignation du label au span
                span.appendChild(label);
                //assignation du span au conteneur (div)
                c.appendChild(span);
                //creation du select
                ch=document.createElement('select');
                ch.setAttribute('name',"po"+boucle);
                var newname="po"+boucle;
                ch.setAttribute('id',newname);
                //---------------------------------------------------------------------------------------
                     getXhr;
                //xhr.open("GET", "acces_ajax_options_poster.php" , true);
                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
                }
     
                /**
                 * Méthode qui sera appelée sur le click du bouton
                 */
     
                    var xhr = getXhr()
                    // On défini ce qu'on va faire quand on aura la réponse
                    xhr.onreadystatechange = function(){
                        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                        if(xhr.readyState == 4 && xhr.status == 200){
                            alert(xhr.responseText);
                            leselect = xhr.responseText;
                            elem1=document.createElement("option");
                            elem1.setAttribute('id','testname');
                            document.getElementById('testname').innerHTML = leselect;
                            ch.appendChild(elem1);
                        }
     
                    }
                    xhr.open("GET","pages/acces_ajax_options_poster.php",true);
                    xhr.send(null);
     
     
     
     
                //---------------------------------------------------------------------------------------
                //                                        elem1=document.createElement("option");
                //                                        elem2=document.createElement("option");
                //                                        elem3=document.createElement("option");
                //                                        Attribution des valeurs au select
                //                                        elem1.setAttribute('value',"...");
                //                                        elem2.setAttribute('value',"analogique");
                //                                        elem3.setAttribute('value',"numerique");
                //                                        Creation des neux de text qui seront affiche dans le select
                //                                        valeur1 = document.createTextNode('...');
                //                                        valeur2 = document.createTextNode('Analogique');
                //                                        valeur3 = document.createTextNode('Numerique');
                //                                        Atribution des neux de text aux options
                //                                        elem1.appendChild(valeur1);
                //                                        elem2.appendChild(valeur2);
                //                                        elem3.appendChild(valeur3);
                //                                        Atribution des options au select
                //                                        ch.appendChild(elem1);
                //                                        ch.appendChild(elem2);
                //                                        ch.appendChild(elem3);
                //                                        On donne un nom au select
     
                //                                         Atribution du select au conteneur
                c.appendChild(ch);
     
     
                //creation du label contenant le titre de la checkbox
                label2=document.createElement("label");
                //creation neud de text pour le label
                text_label2= document.createTextNode('Mise en continuité');
                //asignation du neud text au label
                label2.appendChild(text_label2);
                //creation span
                span2=document.createElement("span");
                //attribution de la classe filtre legende au span
                span2.setAttribute('class',"filtres legende");
                //assignation du label au span
                span2.appendChild(label2);
                //assignation du span au conteneur (div)
                c.appendChild(span2);
                //creation de la checkbox
                ch2=document.createElement('input');
                ch2.setAttribute('type','checkbox');
                //Attribution des valeurs à la checkbox
                ch2.setAttribute('value',"oui");
                //On donne un nom à la checkbox
                ch2.setAttribute('name',"mise_en_con"+boucle);
                //Atribution de la checkbox au conteneur
                c.appendChild(ch2);
     
     
                //creation du label contenant le titre du select
                label=document.createElement("label");
                //creation neud de text pour le label
                text_label= document.createTextNode('Avec PO N°');
                //asignation du neud text au label
                label.appendChild(text_label);
                //creation span
                span=document.createElement("span");
                //attribution de la classe filtre legende au span
                span.setAttribute('class',"filtres legende");
                //assignation du label au span
                span.appendChild(label);
                //assignation du span au conteneur (div)
                c.appendChild(span);
                //creation du select
                ch=document.createElement('select');
                //creation des options
     
                for(var i = 1; i <= nb; i++)
                {
     
                    if(i!=boucle)
                    {
                        elem=document.createElement("option");
                        elem.setAttribute('value',i);
                        valeur = document.createTextNode(i);
                        elem.appendChild(valeur);
                        ch.appendChild(elem);
                    }
     
     
                }
     
                //On donne un nom au select
                ch.setAttribute('name',"po2"+boucle);
                //Atribution du select au conteneur
                c.appendChild(ch);
     
                //creation d'un br'
                separateur = document.createElement("br");
                //Atribution du br au conteneur apres le select.
                c.appendChild(separateur);
            }
        }
    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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    <div id='bodyContents'>
        <div id='BoxPoster'>
            <div class='ruban'><h3>Creation nouveau TFNG</h3></div>
            <div class='coin'></div>
            <div id='BoxData'>
     
                <div class='error' >Veuillez remplir les champs obligatoires.</div>
                <div id ='filigrane'>
                    <div id="breadcrumb">
                        <ul>
                            <li class="first"><span href=1 id="prec" class="titre_page titreEnCours">TITRE ET EMPACEMENT</span><span class="end">&nbsp;</span></li>
                            <li><span href=2 class="titre_page">PO</span><span class="end">&nbsp;</span></li>
                            <li><span href=3 class="titre_page">ALIMENTATIONS</span><span class="end">&nbsp;</span></li>
    <!--					<li><span href=4 class="titre_page">RESUME ET VALIDATION</span><span class="end">&nbsp;</span></li>-->
                        </ul>
                    </div>
                </div>
     
                <div id='global_poster'>
                    <form method='post' action='pages/poster.php' class='poster' name='poster' enctype='multipart/form-data' id='idform'>
     
                        <div class='page'>
                            <div>
                                <span class='filtres legende'><label>Nom du site <span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type='textfield' name='nom_site' id="nom_site" value="..." onfocus="javascript:if(this.value=='...')this.value=''; "  onblur="if(this.value.length==0){this.value='...'}"/>
                                </div>
                            </div>
                            <div>
                                <span class='filtres legende'><label>Ligne<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type='textfield' name='ligne' id="ligne" value="..." onfocus="javascript:if(this.value=='...')this.value=''; "  onblur="if(this.value.length==0){this.value='...'}"/>
                                </div>
                            </div>
                            <div>
                                <span class='filtres legende'><label>PK<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type='textfield' name='pk' id="pk" value="..." onfocus="javascript:if(this.value=='...')this.value=''; "  onblur="if(this.value.length==0){this.value='...'}"/>
                                </div>
                            </div>
                            <div>
                                <span class='filtres legende'><label>Site critique<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type="radio" name="critique" value="oui" checked="checked" /> Oui
                                    <input type="radio" name="critique" value="non" /> Non
                                </div>
                            </div>
     
     
                        </div>
     
                        <div class='page'>
                            <div>
                                <span class='filtres legende'><label>Nombre PO<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type='textfield' name='nb_po' id="nb_po" value="..." onfocus="javascript:if(this.value=='...')this.value=''; "  onblur="if(this.value.length==0){this.value='...'}" onkeydown="ajout_nombre_select(this.value, this)" onkeyup="ajout_nombre_select(this.value, this)"/>
                                </div>
                            </div>
                            <div id="div_a_remplir_suivant_nb_po">
     
                            </div>
                        </div>
     
                        <!--Partie 3 du formulaire-->
                        <div class='page'>
                            <div>
                                <span class='filtres legende'><label>Raccordement<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type="radio" name="raccordement" value="local" checked="checked" /> Local
                                    <input type="radio" name="raccordement" value="deporte" /> Deporté
                                </div>
                            </div>
                            <div>
                                <span class='filtres legende'><label>Alimentation<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type="radio" name="alimentation" value="48" checked="checked" /> 48 Vdc
                                    <input type="radio" name="alimentation" value="230" /> 230 Vac
                                </div>
                            </div>
                            <div>
                                <span class='filtres legende'><label>Alimentation raquable<span class="etoileRouge">*</span></label></span>
                                <div id="type_rex">
                                    <input type="radio" name="alim_raqu" value="oui" checked="checked" /> Oui
                                    <input type="radio" name="alim_raqu" value="non" /> Non
                                </div>
                            </div>
     
                        </div>
     
                        <!--		<div class='page'>
    			<div class='filtres2'><label for='fichier1'>Fichier(s) attaché(s)</label><input type='file'  name='fichier1' value='' size="40" /></div>     
    			<div class='filtres4'><input class='fichiercache' type='file' name='fichier2' value='' size="40" /></div>
    			<div class='filtres4'><input class='fichiercache' type='file' name='fichier3'  size="40" /></div>
    			<div class='filtres3'><label>Info auteur</label></div>
    			<div class='filtres2'><label>Publier sous un autre nom</label></div>
    		</div>-->
     
                        <div id='champs'><span class="etoileRouge">*</span> Champs obligatoires</div>
                </div>
                <div id='btn'>
                    <img src='pictures/btn_suivant.png' id='next' style='float : right' />
                    <div id="save"><img id='enregistrer' src="pictures/btn_enregistrer.png" name='envoyer' value='save' /></div>
                    <img src='pictures/btn_precedent.png' title='Etape précédente' id='prev' style='float:left;' />
     
                 </form>
                </div>
     
     
     
     
            </div>
        </div>
    </div>

    Voila la page complete

    et la page pour l'interogation de la BdD
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <?php
    //$requete['type_ligne']="SELECT id_type_ligne, nom_type, type_ligne FROM type_ligne;";
    //$type_ligne=$sql->TabResSQL($requete['type_ligne']);
    //$type_ligne=json_encode($type_ligne);
    //return $type_ligne;
    echo(' <option value="choix1">Choix 1</option>');
    ?>

    dans la boucle de la première page en js qui genere les différentes selects je voudrais pouvoir faire une requête bdd et remplir le select avec le résultat entre la ligne 56 et 101.

    J'arrive a récupérer un élément option mais le innerhtml pour l'ajouter au select ne prends pas.
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

  13. #13
    Invité
    Invité(e)
    Par défaut
    Tel le Dr Frankenstein, tu essaies de greffer ensemble des bouts de code, en espérant qu'ils vont prendre vie. Malheureusement, il te manque l'étincelle de la connaissance (de l'expérience, si tu préfères).

    Il est possible de générer TOUT le <label> + <span> + <select> + les <option> directement dans le fichier PHP appelé via Ajax.
    Inutile alors de créer en JavaScript ces éléments. le .innerHTML suffit à intégrer tout le code html du <select> (généré avec PHP) dans la page.

    Si tu avais vraiment pris la peine de lire le tuto et faire les exercices, tu aurais sans doute remarqué que celui-ci correspond, à peu de chose près, à ta problématique.
    Et que l'écriture est beaucoup moins compliquée que tu sembles le penser.

    Toute la partie contenue dans :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     	//Boucle qui remplis le conteneur avec le nombre de select demande.
    	for(boucle = 1; boucle <= nb; boucle++)
    	{
    peut être supprimée, et construite DANS le fichier PHP.
    Les paramètres à lui transmettre sont "boucle" et "nb".
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
       xhr.send("boucle="+boucle+"&nb="+nb);
    Dernière modification par Invité ; 06/09/2013 à 12h26.

  14. #14
    Invité
    Invité(e)
    Par défaut
    Sauf erreur, ça devrait ressembler à :
    Code js : 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
    //Création de l'objet XmlHttpRequest
    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;
    }
    Code js : 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
    function ajout_nombre_select(nb, objInput)
    {
    	var reg = /^[0-9]*$/;
     
    	if(!reg.test(objInput.value))
    	{
    		objInput.value = objInput.value.substring(0,objInput.value.length-1);
    	}
    	//recuperation du conteneur (div) qui contiendra les select
    	c=document.getElementById('div_a_remplir_suivant_nb_po');
    	//Suppression des select presents dans le conteneur au cas de changement avant remplissage
    	//avec le bon nombre de select
    	while (c.hasChildNodes())
    	{
    		c.removeChild(c.lastChild);
    	}
     
    		// appel AJAX
    		var xhr = getXhr();
    		// On défini ce qu'on va faire quand on aura la réponse
    		xhr.onreadystatechange = function(){
    			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    			if(xhr.readyState == 4 && xhr.status == 200){
    				var htmlTxt = xhr.responseText;
    				// On se sert de innerHTML pour rajouter les options a la liste
    				document.getElementById('div_a_remplir_suivant_nb_po').innerHTML = htmlTxt;
    			}
    		}
     
    		// Page PHP de traitement + methode (get ou post)
    		xhr.open("GET","pages/acces_ajax_options_poster.php",true);
    		// ne pas oublier ça pour le post
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    		// ne pas oublier de poster les arguments
    		xhr.send("boucle="+boucle+"&nb="+nb);
     
    }
    pages/acces_ajax_options_poster.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
    29
    30
    31
    32
    33
    34
    35
    <?php
    $boucle = $_GET['boucle'];
    $nb = $_GET['nb'];
    //Boucle qui remplis le conteneur avec le nombre de select demande.
    for($boucle=1; $boucle<=$nb; $boucle++)
    {
    ?>
    	<label>PO N°<?php echo $boucle; ?></label>
    	<span class="filtres legende"></span>
    	<select name="po<?php echo $boucle; ?>">
    		<option value="...">...</option>
    		<option value="analogique">Analogique</option>
    		<option value="numerique">Numerique</option>
    	</select>
     
    	<label>Mise en continuité</label>
    	<span class="filtres legende"></span>
    	<input type="checkbox" name="mise_en_con<?php echo $boucle; ?>" value="oui"/>
     
    	<label>Avec PO N°</label>
    	<span class="filtres legende"></span>
    	<select name="po2<?php echo $boucle; ?>">
    <?php
    	for ($i=1; $i<=$nb; $i++){
    ?>
    		<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
    <?php
    	}
    ?>
    	</select>
     
    	<br />
    <?php
    }
    ?>
    Mais je ne sais pas comment tu veux inclure les éléments issus de la BdD dans le <select> "po2"
    Dernière modification par Invité ; 06/09/2013 à 12h38.

  15. #15
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Points : 778
    Points
    778
    Par défaut
    Sorry pour le délai de réponse mais un petit accident de la route m'a forcé a prendre du repos ^^
    Enfin en tout cas merci beaucoup pour vos réponses. Avec tout ça étant pris a court par le temps je suis passé par une méthode beaucoup moins esthétique mais qui a l'avantage d’être mis rapidement en place car je suis plus a l'aise avec:
    Je reculer les infos nécessaires en php, crée les select avec les bonnes options en php mais avec un Display none et je ne m'occupe que de les afficher ou cacher en javascript.

    Voila merci beaucoup en tout cas ^^
    Spécialiste des questions bêtes

    ”If you can't explain it simply, you don't understand it” (Ce que tu ne peux pas expliquer simplement, tu ne le comprends pas) Albert Einstein

    Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 17/09/2014, 13h49
  2. Réponses: 11
    Dernier message: 06/02/2013, 15h25
  3. Réponses: 3
    Dernier message: 15/05/2012, 20h28
  4. [FPDF] Utilisation du résultat d'une requête MySQL
    Par ns_deux dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 25/01/2009, 01h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo