[AJAX] Question JQUERY & Ajax

Version imprimable

05/12/2011, 14h55
Starneo

[AJAX] Question JQUERY & Ajax

Bonjour,

Je me pose une question concernant la faisabilité d'une action que je souhaite réaliser.

Avant de la formuler voici quelques informations nécessaires à la compréhension de la question.

Je possède une page php/html avec un formulaire.
L'utilisateur est invité à choisir une option parmi x boutons radio.
En fonction de celui qui à été coché j'incorpore la suite du formulaire (ceci en Ajax, requête HXR).
Dans cette deuxième partie du formulaire ce trouve un champ avec un plugin autocomplete. Via la librairie Jquery et le plugins associé.

Mon problème est que je n'arrive pas à faire fonctionner l'autocomplete de ce champ. Si j'affiche uniquement la page chargé via l'ajax le plugin fonctionne.

Ma question est donc la suivante, est t'il possible de charger un fichier en Ajax dans un autre fichier lui même chargé en Ajax ?

D'avance merci pour vos lumières.
05/12/2011, 15h04
juliens9

Tu peux effectivement charger de l'ajax via une requete xhr, car au final ce n'est que du javascript. Après il faut que tu fasse attention au moment de charger les libraires jquery (l'autocomplete par exemple), et que les chemins soient respectés, par rapport au fichier source de chargement.

Poste ton code, si tu veux qu'on t'aide à trouver ce qui ne fonctionne pas dans ton script.

Merci pour ta réponse.

admin_formulaire.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
27
28
 
...
<script type="text/javascript" src="js/listes_xhr.js" charset="iso_8859-1"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {	
	$("#site_esp").autocomplete("../sites_esp.php", {
		width: 200,
		matchContains: true,
		mustMatch: true,
		selectFirst: false
 
	});
 
	$("#site_esp").result(function(event, data, formatted) {
		$("#site_esp_id").val(data[1]);
	});
});
</script>
</head>
<body>
...
// Début du formulaire
echo '<form name="form_dem" action="admin_valid_demande.php" method="POST" onSubmit="return verifSelection(this)">';
 
// Affichage des étapes spécifique à chaque secteur
echo '<div id="next_step"></div>';

Le Contenue de la balise "next_step" est chargé en Ajax grace a listes_xhr.js

listes_xhr.js :

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
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
 
// Création de la variable globale qui contiendra l'objet XHR
var requete = null;
/**
 * Fonction privée qui va créer un objet XHR.
 * Cette fonction initialisera la valeur dans la variable globale définie
 * ci-dessus.
 */
function creerRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 
/** Choix du secteur **/
// Fonction permettant la mise à jour de l'affichage en fonction du secteur sélectionné
function actualiserNextStep()
{
    var listeSecteurs = requete.responseText;
    var blocListe = document.getElementById('next_step');
    blocListe.innerHTML = listeSecteurs;
}
 
// Fonction permettant la création de l'objet XHR ainsi que la récupération des données modifiées pour les sites de niveau 2
function load_sec(id_secteur)
{
    /* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
    if(id_secteur == 'vide')
    {
        document.getElementById('next_step').innerHTML = '';
    }
    else
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var blocListe = document.getElementById('next_step');
        blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
        /* On crée l'objet XHR */
        creerRequete();
        /* Définition du fichier de traitement */
        var url = '../ajax/secteurs.php?id_secteur='+ id_secteur;
        /* Envoi de la requête à la page de traitement */
        requete.open('GET', url, true);
        /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
        requete.onreadystatechange = function()
        {
            /* Lorsque l'état est à 4 */
            if(requete.readyState == 4)
            {
                /* Si on a un statut à 200 */
                if(requete.status == 200)
                {
                    /* Mise à jour de l'affichage, on appelle la fonction apropriée */
                    actualiserNextStep();
                }
            }
        };
        requete.send(null);
    }
}

La page secteurs.php comporte juste un switch permettant de faire une include de la bonne page.

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
// On récupère le numéro du secteur choisi.
$id_secteur = isset($_GET['id_secteur']) ? $_GET['id_secteur'] : false;
// Si celui-ci existe, on procède à la requête
 
if(false !== $id_secteur)
{
	// Affichage de la page en fonction du secteur sélectionnée
	switch ($id_secteur){
		case 1:
			include ('../form_sec_bat.php');
		break;
		case 2:
			include ('../form_sec_esp.php');
		break;
		case 3:
			include ('../form_sec_voi.php');
		break;
		case 4:
			include ('../form_sec_dem.php');
		break;
		case 5:
			include ('../form_sec_eve.php');
		break;
		case 6:
			include ('../form_sec_mec.php');
		break;
	}	
}

Dans le cas qui m'intéresse voici la page qui est chargé.
form_sec_esp.php :

Code:

1
2
3
4
5
<?php
//--- SECTEUR ESPACES VERTS ---//
header('Content-Type: text/html; charset=ISO-8859-15');
echo '<input type="text" name="site_esp" id="site_esp" value="" autocomplete="off" />';
echo '<input type="hidden" name="site_esp_id" id="site_esp_id" />';

06/12/2011, 15h51
Starneo

3 pièce(s) jointe(s)

Voici ce que donne le code en image :

http://www.developpez.net/forums/att...1&d=1323182710

Je sélectionne le secteur "Espace verts"
http://www.developpez.net/forums/att...1&d=1323182732

Et ce que ca devrait donner mais ne donne pas :

http://www.developpez.net/forums/att...1&d=1323182732
07/12/2011, 09h14
Starneo

1 pièce(s) jointe(s)

Autre représentation schématique de ma question.

http://www.developpez.net/forums/att...1&d=1323247420
07/12/2011, 09h50
Starneo

En sachant que la partie droite (celle du secteur batiment) fonctionne.
Mais le script Ajax de deuxième niveau qui est appelé est le même qu'au premier niveau (c'est juste une autre fonction) ce qui n'est pas le cas pour la partie gauche qui au deuxième niveau fait appel à un autre script.

Cela est t'il donc possible ? (parce que c'est la que je bloque).

D'avance merci
08/12/2011, 19h11
juliens9
Tout d'abord pour te rassuré, ton problème est largement résolvable. C'est juste un problème aux niveaux de quand sont fait les appels jquery.

Tu fais un appel de ton autocomplete sur #site_esp, alors que celui n'es crée qu'apres interaction utilisateur. Le plugin ne peut donc pas fonctionné et te génère surement une erreur (regarde dans ta console)
Code:

1 2 3 4 5 6 $("#site_esp").autocomplete("../sites_esp.php", { width: 200, matchContains: true, mustMatch: true, selectFirst: false });
Donc :
- soit tu fait ton appel .autocomplete qu'apres affichage de ton input,
- soit tu créé dès le début, ton input site_esp que tu cache dans un premier temps ( display:none) puis que t'affiche ensuite

En esperant que ca regle ton problème
12/12/2011, 11h00
Starneo

Bonjour Julien,

Je te remercie d'avoir pris le temps de lire ce sujet et d'y avoir apporté ta contribution.

La lecture de ta réponse me rassure mais je n'ai cependant pas réussi à le faire fonctionner.

Dans le premier cas, placer le script après l'input n'a rien changé et dans le deuxième cas cela me semble pas possible car je ne peu avoir qu'un seul champ avec l'id="site_esp". De plus utiliser l'option display dans ce cas ne convient pas car l'input est appelé via une autre page php lors de l'include.

Ton message m'ayant redonné espoir je vais continuer de chercher la solution à ce problème (me faudrait un peu de NZT-48 ^^).

EDIT :
Lorsque je fais manuellement l'include de la page contenant la suite de mon formulaire (sans passer par ma première fonction ajax), mon champ autocomplete fonctionne correctement.
Pour trouver les erreurs j'utilise firebug sous Firefox ou Chrome, mais ils ne me remonte aucune erreur. Ils ne détectent peut être que les erreurs du premier niveau...
13/12/2011, 13h55
juliens9

Dans le premier cas, placer le script après l'input n'a rien changé

=> il ne faut pas que tu place ton script après l'input, mais plutot que tu fasses ton appel .autocomplete() dans le callback de ton appel ajax.

dans le deuxième cas cela me semble pas possible car je ne peu avoir qu'un seul champ avec l'id="site_esp". De plus utiliser l'option display dans ce cas ne convient pas car l'input est appelé via une autre page php lors de l'include.

=> il ne faut pas que tu créé un 2e input, mais seulement que tu créé ton input dans la premiere page. L'option display est tout à fait compatible avec ton cas. Il te suffit de faire un .show() ou un .display='block' dans ton callback ajax
14/12/2011, 10h37
Starneo

Citation:

=> il ne faut pas que tu place ton script après l'input, mais plutot que tu fasses ton appel .autocomplete() dans le callback de ton appel ajax.

C'est pourtant ce que j'ai fait :(

Je me permet une dernière fois de faire appel à toi.

Ci-joint un site de test avec mon problème :
site de test

J'ai également mis dessus une capture de chaque page.

D'avance merci
14/12/2011, 14h59
juliens9

Ya un problème dans le lien.
15/12/2011, 08h32
Starneo

Forcement avec un lien intranet ^^

Bonne adresse
19/12/2011, 22h03
juliens9

Le problème vient bien du moment ou tu appel ta fonction autocomplete. Il faut que tu fasse ton appel dans ta fonction load_sec apres ton actualiserNextStep. La tu fait ton appel avec le $().ready() qui lui est relatif au document principal et non pas au chargement ajax.

Par exemple essaye de mettre un alert() avant ton .autocomplete, tu veras que ton code, dans l'état actuel n'est jamais exécute.

Autres conseil, evites les SELECT *, et vu que t'utilises du jquery, la fonction $.ajax() te permettra de faire pas mal de chose de manière beaucoup plus simple.
21/12/2011, 09h16
Starneo

Bonjour Julien,

Je voulais te remercier d'avoir pris le temps de m'aider. J'ai grâce à toi compris mon erreur.
Merci également pour tes conseils.

Je te souhaite de bonne fêtes de noël.

Cordialement,
Sylvain