Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 27-04-2011 14:45:09

Adrien17
Nouveau membre
Date d'inscription: 27-04-2011
Messages: 3

ZendX_Jquery Ajax, pour un chainage de 2 select

Bonjour,

Je débute avec Zend Framework et MVC, et pour mon formulaire j'aurais besoin d'utiliser un select qui choisit un service et un autre select qui automatiquement choisit les sites de travail en fonction du service choisit précédemment. (dites moi si c'est pas clair)

D'apres ce que j'ai vu il faudrait utiliser ZendX_Jquery et de l'ajax pour réaliser ça, mais je ne sais pas du tout comment faire !? et je trouve très peut d'exemple sur ça !?

Donc je voulais savoir si quelqu'un avait un exemple de ce type de fonction ou bien si on pouvait me guider pou réaliser cette fonction ?

Merci de votre réponse.

Hors ligne

 

#2 27-04-2011 15:00:58

Zenkken
Membre
Date d'inscription: 06-04-2011
Messages: 21

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

Bonjour Adrien17,
J'ai été (+/- suis) confronté au même 'problème' ou du moins à la même situation que toi j'ai à remplir 3 zones de sélection 'zend_form_element_select' la seconde dépendant de la première et la troisième dépendant de la seconde.

Et en effet tu le dis toi même la solution vient de l'Ajax tu vas dynamiquement récupérer la valeur sélectionnée dans ton premier select afin de charger le second. Pour le moment je suis encore en phase bricolage on va dire mais les premiers résultats sont là.

Je ne suis pas sur que ma réponse va vraiment t'aider pour autant je vais essayer de terminer ça afin de te proposer une solution si tu n'en trouves pas d'ici là et ce dès que j'aurai terminé wink

Dernière modification par Zenkken (27-04-2011 15:10:20)

Hors ligne

 

#3 29-04-2011 10:49:41

Adrien17
Nouveau membre
Date d'inscription: 27-04-2011
Messages: 3

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

D'accord, merci de me tenir au courant Zenkken !

Hors ligne

 

#4 29-04-2011 15:04:24

Zenkken
Membre
Date d'inscription: 06-04-2011
Messages: 21

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

Hors ligne

 

#5 16-05-2011 16:25:36

Adrien17
Nouveau membre
Date d'inscription: 27-04-2011
Messages: 3

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

Salut Zenkken je voulais savoir si tu avais avancé de ton côté ? pour savoir si tu avais un truc a me proposer.
Moi j'ai pas avancé, car j'avais mis cette partie de mon programme de coté mais la je me remet dessus.

Hors ligne

 

#6 17-05-2011 12:01:12

Zenkken
Membre
Date d'inscription: 06-04-2011
Messages: 21

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

Alors oui excuse moi du temps de réponse c'est pas super sympa de ma part de ne pas avoir répondu plus tôt désolé wink

Mon select lié marche d'ailleurs j'en ai 3 ^^ Je pense que ma solution est loin d'être optimisée et suis preneur du moindre conseil smile

Voici ma démarche :

Code:

// On remplit le premier select classiquement
<form id='XXX' name='XXX' method='POST'>
    <table id='XXX' name='XXX'> 
        <tr>
            <td>
                <select id='premierSelect' name='premierSelect' onClick="requestSecondSelect(this)" >
                    <?php
                        // Ta connexion à ta base enfin à titre provisoire, évite de laisser ça au milieu 
                        $hote     = 'X';
                        $login     = 'X';
                        $m_d_p     = 'X';
                        $bdd     = 'X';
                        
                        mysql_connect($hote, $login, $m_d_p);
                        mysql_select_db($bdd);
                    
                        echo '<option value="0">RIEN</option>';
                        $query = mysql_query("SELECT * FROM tableVoulue ORDER BY colonneVoulue");
                        while ($back = mysql_fetch_assoc($query)) {
                            echo "\t\t\t\t<option value=\"" . $back["id"] . "\">" . $back["libelle"] . "</option>\n";
                        }
                    ?>
                </select>
            </td>
            <td><select id='secondSelect' name='secondSelect' ></select></td>
        </tr>
    </table>
</form>


// id et libelle tu mets ce que tu veux c'est juste le champ à garder en général l'ID et ensuite ce que ta liste va afficher 
//

Ensuite j'ai créé un fichier oXHR.js dans public/js, fichier trouvé sur le SDZ mais trouvable un peu partout du moins le code

Code:

/* ** cartouche ********************************************************************* */
/* Script complet de gestion d'une requête de type XMLHttpRequest                     */
/* ********************************************************************************** */

function getXMLHttpRequest() {
    var xhr = null;
    
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    
    return xhr;
}

Ensuite dans public/ajax tu créés un fichier qui va gérer ton second select type
public/ajax/XMLHttpRequest_getSecondSelect.php

Code:

<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";
$premierSelect= (isset($_POST["premierSelect"])) ? htmlentities($_POST["premierSelect"]) : NULL;

if ($premierSelect) {
    // Ta connexion à ta base enfin à titre provisoire, évite de laisser ça au milieu 
    $hote     = 'X';
    $login     = 'X';
    $m_d_p     = 'X';
    $bdd     = 'X';
                        
    mysql_connect($hote, $login, $m_d_p);
    mysql_select_db($bdd);
    
    $query = mysql_query("SELECT * FROM tableVoulue WHERE ligneDeLienEntreLesDeuxTable=" . mysql_real_escape_string($premierSelect) . " ORDER BY libelle");
    while ($back = mysql_fetch_assoc($query)) {
        echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["libelle"] . "\" />";
    }
}

echo "</list>";
?>

Et pour finir la fonction qui correspond au onClick="requestSecondSelect(this)" dans un fichier que j'ai nommé moi mesFonctionJS.js à inclure dans ton formulaire et qui encore une fois pour moi se situe exactement dans public/js

Code:

function requestSecondSelect(oSelect) {
    var value = oSelect.options[oSelect.selectedIndex].value;
    var xhr   = getXMLHttpRequest();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            readDataSecondSelect(xhr.responseXML);
        } else if (xhr.readyState < 4) {
            // Si image de Loader
            //document.getElementById("loader").style.display = "inline";
        }
    };
    
    xhr.open("POST", "public/ajax/XMLHttpRequest_getSecondSelect.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("premierSelect=" + value);
}

function readDataSecondSelect(oData) {
    var nodes   = oData.getElementsByTagName("item");
    var oSelect = document.getElementById("secondSelect");
    var oOption, oInner;
    oSelect.innerHTML = "";
    for (var i=0, c=nodes.length; i<c; i++) {
        oOption = document.createElement("option");
        oInner  = document.createTextNode(nodes[i].getAttribute("name"));
        oOption.value = nodes[i].getAttribute("id");
        
        oOption.appendChild(oInner);
        oSelect.appendChild(oOption);
    }
}

Dernière précision tu remplaces mes 'blablaSecondSelect' ou premier par ce que tu veux hein ^^ et en ce qui concerne mon découpage de fichiers idem

Voilà si tu as des questions smile

Hors ligne

 

#7 26-03-2012 17:12:54

BoobzyCola
Nouveau membre
Date d'inscription: 26-03-2012
Messages: 3

Re: ZendX_Jquery Ajax, pour un chainage de 2 select

Bonjour , j'ai un projet unformatique sous le framework zend . Je dois liées 2 listes (select). J'aimerais avoir un petit tutoriel si possible pour faire liées les listes suivantes:

premier select :  la liste des processeurs de la base de données .

second select  : la liste des cartes mere compatibles avec le processeur selectionner dans la premiere liste .

pour cela j'ai trois tables

processeur :

id_processeur
designation_processeur
id_socket

carte_mere :

id_carte_mere
designation_carte_mere
id_socket

je souhaite donc afficher les carte meres possedant le meme id_socket que l'id_socket du processeur choisi.

je sais qu'il faut utiliser le JSON , l'AJAX mais je n'arrive pas a mettre ça en oeuvre sous zend framework.
pourriez vous me montrer pas à pas la demarche a suivre . merci d'avance

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages