Question JQUERY & Ajax [Résolu]

Starneo · 05/12/2011, 14h55

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.

juliens9 · 05/12/2011, 15h04

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.

Starneo · 05/12/2011, 15h28

Merci pour ta réponse.

admin_formulaire.php :

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
 
...
<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 :

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
 
// 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 :

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
// 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 :

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

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" />';

Starneo · 06/12/2011, 15h51

Voici ce que donne le code en image :

Je sélectionne le secteur "Espace verts"

Et ce que ca devrait donner mais ne donne pas :

Starneo · 07/12/2011, 09h14

Autre représentation schématique de ma question.

Starneo · 07/12/2011, 09h50

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

juliens9 · 08/12/2011, 19h11

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 :

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

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

Starneo · 12/12/2011, 11h00

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...

juliens9 · 13/12/2011, 13h55

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

Starneo · 14/12/2011, 10h37

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

juliens9 · 14/12/2011, 14h59

Ya un problème dans le lien.

Starneo · 15/12/2011, 08h32

Forcement avec un lien intranet ^^

Bonne adresse

juliens9 · 19/12/2011, 22h03

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.

Starneo · 21/12/2011, 09h16

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

05/12/2011, 14h55	#1
Starneo Invité régulier Inscription : juillet 2002 Messages : 27 Détails du profil Informations forums : Inscription : juillet 2002 Messages : 27 Points : 6 Points : 6	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.
	00

05/12/2011, 15h04	#2
juliens9 Membre confirmé Directeur technique Inscription : mars 2007 Messages : 192 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Directeur technique Informations forums : Inscription : mars 2007 Messages : 192 Points : 220 Points : 220	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. __________________ Mon Blog sur le developpement, la stratégie et les performances web
	00

13/12/2011, 13h55	#9
juliens9 Membre confirmé Directeur technique Inscription : mars 2007 Messages : 192 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Directeur technique Informations forums : Inscription : mars 2007 Messages : 192 Points : 220 Points : 220	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 __________________ Mon Blog sur le developpement, la stratégie et les performances web
	00

14/12/2011, 14h59	#11
juliens9 Membre confirmé Directeur technique Inscription : mars 2007 Messages : 192 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Directeur technique Informations forums : Inscription : mars 2007 Messages : 192 Points : 220 Points : 220	Ya un problème dans le lien. __________________ Mon Blog sur le developpement, la stratégie et les performances web
	00

19/12/2011, 22h03	#13
juliens9 Membre confirmé Directeur technique Inscription : mars 2007 Messages : 192 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Directeur technique Informations forums : Inscription : mars 2007 Messages : 192 Points : 220 Points : 220	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. __________________ Mon Blog sur le developpement, la stratégie et les performances web
	00

07/12/2011, 09h50	#6
Starneo Invité régulier Inscription : juillet 2002 Messages : 27 Détails du profil Informations forums : Inscription : juillet 2002 Messages : 27 Points : 6 Points : 6	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
	00

12/12/2011, 11h00	#8
Starneo Invité régulier Inscription : juillet 2002 Messages : 27 Détails du profil Informations forums : Inscription : juillet 2002 Messages : 27 Points : 6 Points : 6	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...
	00

15/12/2011, 08h32	#12
Starneo Invité régulier Inscription : juillet 2002 Messages : 27 Détails du profil Informations forums : Inscription : juillet 2002 Messages : 27 Points : 6 Points : 6	Forcement avec un lien intranet ^^ Bonne adresse
	00

21/12/2011, 09h16	#14
Starneo Invité régulier Inscription : juillet 2002 Messages : 27 Détails du profil Informations forums : Inscription : juillet 2002 Messages : 27 Points : 6 Points : 6	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email