Ajax et Javascript

Bonjour à tous,

je débute en Ajax, et je souhaiterais savoir une chose :
Est-ce que l'on peu "importer" du nouveau code JavaScript via une "requête" Ajax ?

Je m'explique :

Je fais lance une "requête" Ajax avec :

...
xhr.open("POST","ajax_dispatcher.php",true);
...

et je recupère la réponse avec :

...
reponse = xhr.responseText;
...

je mets la réponse dans une div avec :

....innerHTML = reponse;

Ma page ajax_dispatcher.php pourrait être :

<script type="text/javascript">
alert("Ya du code JavaScript !");           
</script>
Ya du code HTML !

En ouvrant cette page directement avec une navigateur, on a une petite fenêtre avec écrit "Ya du code JavaScript !" dedans, et sur la page, on voit le texte "Ya du code HTML !"

En utilisant Ajax pour récuperer la page et la mettre dans une div, "Ya du code HTML !" arrive, mais ya pas ma fenêtre avec Javascript "Ya du code JavaScript !".


Est-ce normal ?
Comment faire pour que la JavaScript passe ?

Merci d'avance

parce que, pour ton exemple :
   
        .....
        je mets la réponse dans une div avec
            ....innerHTML = reponse;
            alert("Ya du code JavaScript !");        
   
    ça baigne....

    je sais bien que ce n'est pas un alert dont tu as besoin !

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Je n'avais pas vu que le sujet était déjà traité, et à vrai dire je n'avais pas fait de recherche, vu que je ne savais pas quels mots clés utiliser pour ma recherche, il doit y avoir foule de messages qui parle de "Ajax" et "JavaScript".

Pour le "pourquoi faire ?" :
En fait, je développe une application web de reporting actuellement, et il y a pas mal de tableaux à afficher, et j'ai donc crée une classe Tableau qui me permettra de gérer tous mes tableaux (double tri, traitement des données avant affichage, lien vers une page ou fonction JS...).

Voici le squelette que j'utilise pour gérer une colonne :

1.         $this->numCol = $i;
2.         $this->colonnes[$i]['field'] = "CHAMP"; // nom du champ dans la requete
3.         $this->colonnes[$i]['name'] = "Titre col"; // nom de la colonne
4.         $this->colonnes[$i]['width'] = "10%"; // largeur de la colonne
5.         $this->colonnes[$i]['align'] = "left"; // alignement des donnees
6.         $this->colonnes[$i]['func'] = ""; // fonction a appeler pour traiter les donnees
7.         $this->colonnes[$i]['pref'] = ""; // prefixe
8.         $this->colonnes[$i]['suff'] = ""; // suffixe
9.         $this->colonnes[$i]['link']['dest'] = "javascript:fonctionJavaScript"; // lien
10.         $this->colonnes[$i]['link']['params'][0] = $this->numCol;// numero de la colonne (du tableau $this->colonnes) contenant la valeur du parametre
11.         $this->colonnes[$i]['tri'] = $triDefaut; // OUI si on peu trier sur cette colonne, sinon NON
12.         $this->colonnes[$i]['prim'] = OUI; // colonne de tri primaire OUI/NON
13.         $this->colonnes[$i]['sec'] = NON; // colonne de trisecondaire OUI/NON
14.         $this->colonnes[$i]['ordre'] = $ordreDefaut; // ordre du tri ASC/DESC

Ma classe Tableau mouline un tableau contenant des informations sur les colonnes, avec un autre tableau contenant les données.


Dans ma page principale, j'ai plusieurs div, et chacune d'entre elle est géré par une classe qui a un tableau pour définir les colonnes. Chaque classe a également ces fonctions JavaScript que je souhaite "écrire" en même temps que le tableau...


Je ne sais pas si je suis bien clair, voici ma classe "DetailCommandes" pour exemple (elle n'est pas finie, et il y a quelques erreurs, mais c'est pour montrer l'idée) :

1. <?php
2. require_once("oracle.class.php");
3. require_once("tableau.class.php");
4. require_once("requetes_oracle.inc.php");
5. require_once("gestion_erreurs.inc.php");
6. require_once("graphique.class.php");
7. /**
8.  * Classe DetailCommandes.
9.  * Gere la zone (calque) contenant les commandes pour une contremarque et un code BocDrive.
10.  *
11.  * @author MPY
12.  * @version 1.0
13.  * @package include
14.  */
15. class DetailCommandes
16. {
17.     /** @var contremarque. */
18.     private $contremarque;
19.    
20.     /** @var code BocDrive a analyser. */
21.     private $bocdrive;
22.    
23.     /** @var identifiant du calque (balise div) contenant le detail des commandes. */
24.     private $div;
25.    
26.     /** @var societe a laquelle la contremarque est rattachee. */
27.     private $societe;
28.    
29.     /** @var site auquel la contremarque est rattachee. */
30.     private $site;
31.    
32.     /** @var tableau contenant la mise en forme du tableau a afficher. */
33.     private $colonnes;
34.    
35.     /**
36.      * Constructeur.
37.      *
38.      * @param array $params 'contremarque' : contremarque.
39.      *                         'bocdrive' : code BocDrive.
40.      *                         'div' : identifiant du calque (balise div) sur la page web.
41.      */
42.     public function __construct($params)
43.     {
44.         if(!@isset($params['contremarque']) || !@isset($params['contremarque']))
45.         {
46.             ERREUR();
47.             exit;
48.         }
49.         $this->contremarque = $params['contremarque'];
50.         $this->bocdrive = $params['bocdrive'];
51.         $this->div = $params['div'];
52.         $this->societe = $_SESSION['Societe'];
53.         $this->site = $_SESSION['Site'];
54.        
55.         $triDefaut = OUI;
56.         $ordreDefaut = ASC;
57.                
58.         $i=0;
59.         $this->numColDateCom = $i;
60.         $this->colonnes[$i]['field'] = "D_DATECOM"; // nom du champ dans la requete
61.         $this->colonnes[$i]['name'] = "Date Com"; // nom de la colonne
62.         $this->colonnes[$i]['width'] = "10%"; // largeur de la colonne
63.         $this->colonnes[$i]['align'] = "left"; // alignement des donnees
64.         $this->colonnes[$i]['func'] = ""; // fonction a appeler pour traiter les donnees
65.         $this->colonnes[$i]['pref'] = ""; // prefixe
66.         $this->colonnes[$i]['suff'] = ""; // suffixe
67.         $this->colonnes[$i]['link']['dest'] = ""; // lien
68.         $this->colonnes[$i]['tri'] = $triDefaut; // OUI si on peu trier sur cette colonne, sinon NON
69.         $this->colonnes[$i]['prim'] = NON; // colonne de tri primaire OUI/NON
70.         $this->colonnes[$i]['sec'] = NON; // colonne de trisecondaire OUI/NON
71.         $this->colonnes[$i]['ordre'] = DESC; // ordre du tri ASC/DESC
72.        
73.         $i++;
74.         $this->numColNumCom = $i;
75.         $this->colonnes[$i]['field'] = "C_NUMCOM";
76.         $this->colonnes[$i]['name'] = "Num Com";
77.         $this->colonnes[$i]['width'] = "15%";
78.         $this->colonnes[$i]['align'] = "left";
79.         $this->colonnes[$i]['func'] = "";
80.         $this->colonnes[$i]['pref'] = "";
81.         $this->colonnes[$i]['suff'] = "";
82.         $this->colonnes[$i]['link']['dest'] = "javascript:afficherPostesCommande";
83.         $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
84.         $this->colonnes[$i]['tri'] = $triDefaut;
85.         $this->colonnes[$i]['prim'] = NON;
86.         $this->colonnes[$i]['sec'] = NON;
87.         $this->colonnes[$i]['ordre'] = DESC;
88.        
89.         $i++;
90.         $this->numColFournisseur = $i;
91.         $this->colonnes[$i]['field'] = "C_FOUR";
92.         $this->colonnes[$i]['name'] = "Fournisseur";
93.         $this->colonnes[$i]['width'] = "25%";
94.         $this->colonnes[$i]['align'] = "left";
95.         $this->colonnes[$i]['func'] = "";
96.         $this->colonnes[$i]['pref'] = "";
97.         $this->colonnes[$i]['suff'] = "";
98.         $this->colonnes[$i]['link']['dest'] = "";
99.         $this->colonnes[$i]['tri'] = $triDefaut;
100.         $this->colonnes[$i]['prim'] = NON;
101.         $this->colonnes[$i]['sec'] = NON;
102.         $this->colonnes[$i]['ordre'] = $ordreDefaut;
103.        
104.         $i++;
105.         $this->numColMontantCommande = $i;
106.         $this->colonnes[$i]['field'] = "N_MONTCOM_EUR";
107.         $this->colonnes[$i]['name'] = "Montant Com (&euro;)";
108.         $this->colonnes[$i]['width'] = "25%";
109.         $this->colonnes[$i]['align'] = "right";
110.         $this->colonnes[$i]['func'] = "";
111.         $this->colonnes[$i]['pref'] = "";
112.         $this->colonnes[$i]['suff'] = "";
113.         $this->colonnes[$i]['link']['dest'] = "javascript:afficherPostesCommande";
114.         $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
115.         $this->colonnes[$i]['tri'] = $triDefaut;
116.         $this->colonnes[$i]['prim'] = NON;
117.         $this->colonnes[$i]['sec'] = NON;
118.         $this->colonnes[$i]['ordre'] = $ordreDefaut;
119.        
120.         $i++;
121.         $this->numColMontantReceptions = $i;
122.         $this->colonnes[$i]['field'] = "N_MONTREC_EUR";
123.         $this->colonnes[$i]['name'] = "Montant Receps (&euro;)";
124.         $this->colonnes[$i]['width'] = "25%";
125.         $this->colonnes[$i]['align'] = "right";
126.         $this->colonnes[$i]['func'] = "";
127.         $this->colonnes[$i]['pref'] = "";
128.         $this->colonnes[$i]['suff'] = "";
129.         $this->colonnes[$i]['link']['dest'] = "javascript:afficherReceptionsPourCommande";
130.         $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
131.         $this->colonnes[$i]['tri'] = NON;
132.         $this->colonnes[$i]['prim'] = NON;
133.         $this->colonnes[$i]['sec'] = NON;
134.         $this->colonnes[$i]['ordre'] = $ordreDefaut;
135.     }
136.    
137.     /**
138.      * Affiche le detail des commandes pour un code BocDrive et une contremarque.
139.      *
140.      * @param array $params 'prim' : numero de la colonne de tri primaire.
141.      *                         'ordreprim' : ordre de tri du tri primaire.
142.      *                         'sec' : numero de la colonne de tri secondaire.
143.      *                         'ordresec' : ordre de tri du tri secondaire.
144.      */
145.     public function affiche($params=NULL)
146.     {
147.         $triprim = "";
148.         $trisec = "";
149.        
150.         if(@isset($params['prim']))
151.         {// reinitialisation des tris primaires et secondaire pour pouvoir changer le tri
152.             for($i=0; @isset($this->colonnes[$i]); $i++)
153.                 $this->colonnes[$i]['prim'] = NON;
154.             if(isset($params['sec']))
155.                 for($i=0; @isset($this->colonnes[$i]); $i++)
156.                     $this->colonnes[$i]['prim'] = NON;
157.         }
158.         else
159.         {// si les tris ne sont pas defini, on prend ceux par defaut
160.             for($i=0; @isset($this->colonnes[$i]); $i++)
161.             {
162.                 if($this->colonnes[$i]['prim'] == OUI)
163.                 {
164.                     $params['prim'] = $i;
165.                     $params['ordreprim'] = $this->colonnes[$i]['ordre'];
166.                 }
167.                 if($this->colonnes[$i]['sec'] == OUI)
168.                 {
169.                     $params['prim'] = $i;
170.                     $params['ordreprim'] = $this->colonnes[$i]['ordre'];
171.                 }
172.             }
173.         }
174.         // colonne de tri primaire
175.         if(@isset($params['prim']))
176.         {
177.             if(@isset($this->colonnes[$params['prim']]) && $this->colonnes[$params['prim']]['tri']==OUI)
178.             {
179.                 $this->colonnes[$params['prim']]['prim'] = OUI;
180.                 if(!@isset($params['ordreprim']) || ($params['ordreprim']!=ASC && $params['ordreprim']!=DESC))
181.                     $params['ordreprim'] = ASC;
182.                 $this->colonnes[$params['prim']]['ordre'] = $params['ordreprim'];
183.                
184.                 $triprim = $this->colonnes[$params['prim']]['field']." ".$this->colonnes[$params['prim']]['ordre'];
185.             }
186.         }
187.         // colonne de tri secondaire
188.         if(@isset($params['sec']))
189.         {
190.             if(@isset($this->colonnes[$params['sec']]) && $this->colonnes[$params['sec']]['tri']==OUI)
191.             {
192.                 $this->colonnes[$params['sec']]['sec'] = OUI;
193.                 if(!@isset($params['ordresec']) || ($params['ordresec']!=ASC && $params['ordresec']!=DESC))
194.                     $params['ordresec'] = ASC;
195.                 $this->colonnes[$params['sec']]['ordre'] = $params['ordresec'];
196.                
197.                 $trisec = $this->colonnes[$params['sec']]['field']." ".$this->colonnes[$params['sec']]['ordre'];
198.             }
199.         }
200.        
201.         ?>
202.             <script type="text/javascript">
203.             <!--
204.            
205.             function afficherPostesCommande(numcommande)
206.             {
207.             <?php echo
208.                 AJAX_REQUEST_FUNC."(\"".DIV_DETAILPOSTESCOMMANDE."\", \"DetailPostesCommande\", \"contremarque".FIELD_SEPARATOR."numcommande".FIELD_SEPARATOR."div".ROW_SEPARATOR.$this->contremarque.FIELD_SEPARATOR."\"+numcommande+\"".FIELD_SEPARATOR.DIV_DETAILPOSTESCOMMANDE."\", \"affiche\", \"\");";
209.             ?>
210.             }
211.            
212.             function afficherReceptionsPourCommande(numcommande)
213.             {
214.             <?php echo
215.                 AJAX_REQUEST_FUNC."(\"".DIV_DETAILRECEPTIONS."\", \"DetailReceptions\", \"contremarque".FIELD_SEPARATOR."numcommande".FIELD_SEPARATOR."div".ROW_SEPARATOR.$this->contremarque.FIELD_SEPARATOR."\"+numcommande+\"".FIELD_SEPARATOR.DIV_DETAILPOSTESCOMMANDE."\", \"affiche\", \"\");";
216.             ?>
217.             }
218.            
219.             //-->
220.             </script>
221.         <?php
222.         echo "
223.             <fieldset>
224.             <legend>D&eacute;tail des commandes</legend>
225.                 <center>
226.                 <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" class=\"donnees\">";
227.        
228.         $trisec = (@isset($this->colonnes[$params['sec']]) && $this->colonnes[$params['sec']]['tri']==OUI)?$this->colonnes[$params['sec']]['field']." ".$this->colonnes[$params['sec']]['ordre']:"";
229.         $commandes = $_SESSION['BddAppliAchats']->executer(reqDetailCommandes($this->contremarque, $this->societe, $this->site, $this->bocdrive, $triprim, $trisec),__FILE__,__FUNCTION__,__LINE__);
230.         $affTab = new Tableau($this->colonnes,$this->div);
231.         $affTab->afficheEntete(__CLASS__,"contremarque".FIELD_SEPARATOR."bocdrive".FIELD_SEPARATOR."div".ROW_SEPARATOR.$this->contremarque.FIELD_SEPARATOR.$this->bocdrive.FIELD_SEPARATOR.$this->div,
232.                             __FUNCTION__,"prim".FIELD_SEPARATOR."ordreprim".FIELD_SEPARATOR."sec".FIELD_SEPARATOR."ordresec".ROW_SEPARATOR);
233.                            
234.         foreach($commandes as $ligne)
235.             $affTab->afficheLigne($ligne);
236.     }
237. }
238. ?>

Si tu as des questions, des remarques, n'ésites pas.

>>Chaque classe a également ces fonctions JavaScript que je souhaite "écrire" en même temps que le tableau...

    regarde le lien... il y a des approches de solutions....

    je donne mon avis, qui n'a aucune espèce d'importance et ne vaut pas grand chose :
        j'éviterais.

    une fonction générale dans la page html à laquelle on passe des paramètres
       ( le tabelau qu'on traite... )

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Ok merci.

Je continue sur l'autre post (ici).