[AJAX] Question JQUERY & Ajax

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

[AJAX] Question JQUERY & Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager