Ajax et Javascript [Résolu]

Signaler
Messages postés
206
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
7 mars 2012
-
Messages postés
206
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
7 mars 2012
-
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

5 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    on en a déjà causé, et on en cause ici.

    la question fondamentale : pourquoi faire ?
        généralement c'est totalement inutile !
    mettre le javascript, bêtement, dans la page...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]

en général c'est stupide de généraliser.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
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 !

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
206
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
7 mars 2012

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 :<ol><li>        $this->numCol $i;</li><li>        $this->colonnes[$i]['field'] "CHAMP"; // nom du champ dans la requete</li><li>        $this->colonnes[$i]['name'] = "Titre col"; // nom de la colonne</li><li>        $this->colonnes[$i]['width'] = "10%"; // largeur de la colonne</li><li>        $this->colonnes[$i]['align'] = "left"; // alignement des donnees</li><li>        $this->colonnes[$i]['func'] = ""; // fonction a appeler pour traiter les donnees</li><li>        $this->colonnes[$i]['pref'] = ""; // prefixe</li><li>        $this->colonnes[$i]['suff'] = ""; // suffixe</li><li>        $this->colonnes[$i]['link']['dest'] = "javascript:fonctionJavaScript"; // lien</li><li>        $this->colonnes[$i]['link']['params'][0] = $this->numCol;// numero de la colonne (du tableau $this->colonnes) contenant la valeur du parametre</li><li>        $this->colonnes[$i]['tri'] = $triDefaut; // OUI si on peu trier sur cette colonne, sinon NON</li><li>        $this->colonnes[$i]['prim'] = OUI; // colonne de tri primaire OUI/NON</li><li>        $this->colonnes[$i]['sec'] = NON; // colonne de trisecondaire OUI/NON</li><li>        $this->colonnes[$i]['ordre'] = $ordreDefaut; // ordre du tri ASC/DESC</li></ol>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) :
<ol><li><?php
</li><li>require_once("oracle.class.php");
</li><li>require_once("tableau.class.php");
</li><li>require_once("requetes_oracle.inc.php");
</li><li>require_once("gestion_erreurs.inc.php");
</li><li>require_once("graphique.class.php");
</li><li>/**
</li><li> * Classe DetailCommandes.
</li><li> * Gere la zone (calque) contenant les commandes pour une contremarque et un code BocDrive.
</li><li> *
</li><li> * @author MPY
</li><li> * @version 1.0
</li><li> * @package include
</li><li> */
</li><li>class DetailCommandes
</li><li>{
</li><li>    /** @var contremarque. */
</li><li>    private $contremarque;
</li><li>   
</li><li>    /** @var code BocDrive a analyser. */
</li><li>    private $bocdrive;
</li><li>   
</li><li>    /** @var identifiant du calque (balise div) contenant le detail des commandes. */
</li><li>    private $div;
</li><li>   
</li><li>    /** @var societe a laquelle la contremarque est rattachee. */
</li><li>    private $societe;
</li><li>   
</li><li>    /** @var site auquel la contremarque est rattachee. */
</li><li>    private $site;
</li><li>   
</li><li>    /** @var tableau contenant la mise en forme du tableau a afficher. */
</li><li>    private $colonnes;
</li><li>   
</li><li>    /**
</li><li>     * Constructeur.
</li><li>     *
</li><li>     * @param array $params 'contremarque' : contremarque.
</li><li>     *                         'bocdrive' : code BocDrive.
</li><li>     *                         'div' : identifiant du calque (balise div) sur la page web.
</li><li>     */
</li><li>    public function __construct($params)
</li><li>    {
</li><li>        if(!@isset($params['contremarque']) || !@isset($params['contremarque']))
</li><li>        {
</li><li>            ERREUR();
</li><li>            exit;
</li><li>        }
</li><li>        $this->contremarque = $params['contremarque'];
</li><li>        $this->bocdrive = $params['bocdrive'];
</li><li>        $this->div = $params['div'];
</li><li>        $this->societe = $_SESSION['Societe'];
</li><li>        $this->site = $_SESSION['Site'];
</li><li>       
</li><li>        $triDefaut = OUI;
</li><li>        $ordreDefaut = ASC;
</li><li>               
</li><li>        $i=0;
</li><li>        $this->numColDateCom = $i;
</li><li>        $this->colonnes[$i]['field'] = "D_DATECOM"; // nom du champ dans la requete
</li><li>        $this->colonnes[$i]['name'] = "Date Com"; // nom de la colonne
</li><li>        $this->colonnes[$i]['width'] = "10%"; // largeur de la colonne
</li><li>        $this->colonnes[$i]['align'] = "left"; // alignement des donnees
</li><li>        $this->colonnes[$i]['func'] = ""; // fonction a appeler pour traiter les donnees
</li><li>        $this->colonnes[$i]['pref'] = ""; // prefixe
</li><li>        $this->colonnes[$i]['suff'] = ""; // suffixe
</li><li>        $this->colonnes[$i]['link']['dest'] = ""; // lien
</li><li>        $this->colonnes[$i]['tri'] = $triDefaut; // OUI si on peu trier sur cette colonne, sinon NON
</li><li>        $this->colonnes[$i]['prim'] = NON; // colonne de tri primaire OUI/NON
</li><li>        $this->colonnes[$i]['sec'] = NON; // colonne de trisecondaire OUI/NON
</li><li>        $this->colonnes[$i]['ordre'] = DESC; // ordre du tri ASC/DESC
</li><li>       
</li><li>        $i++;
</li><li>        $this->numColNumCom = $i;
</li><li>        $this->colonnes[$i]['field'] = "C_NUMCOM";
</li><li>        $this->colonnes[$i]['name'] = "Num Com";
</li><li>        $this->colonnes[$i]['width'] = "15%";
</li><li>        $this->colonnes[$i]['align'] = "left";
</li><li>        $this->colonnes[$i]['func'] = "";
</li><li>        $this->colonnes[$i]['pref'] = "";
</li><li>        $this->colonnes[$i]['suff'] = "";
</li><li>        $this->colonnes[$i]['link']['dest'] = "javascript:afficherPostesCommande";
</li><li>        $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
</li><li>        $this->colonnes[$i]['tri'] = $triDefaut;
</li><li>        $this->colonnes[$i]['prim'] = NON;
</li><li>        $this->colonnes[$i]['sec'] = NON;
</li><li>        $this->colonnes[$i]['ordre'] = DESC;
</li><li>       
</li><li>        $i++;
</li><li>        $this->numColFournisseur = $i;
</li><li>        $this->colonnes[$i]['field'] = "C_FOUR";
</li><li>        $this->colonnes[$i]['name'] = "Fournisseur";
</li><li>        $this->colonnes[$i]['width'] = "25%";
</li><li>        $this->colonnes[$i]['align'] = "left";
</li><li>        $this->colonnes[$i]['func'] = "";
</li><li>        $this->colonnes[$i]['pref'] = "";
</li><li>        $this->colonnes[$i]['suff'] = "";
</li><li>        $this->colonnes[$i]['link']['dest'] = "";
</li><li>        $this->colonnes[$i]['tri'] = $triDefaut;
</li><li>        $this->colonnes[$i]['prim'] = NON;
</li><li>        $this->colonnes[$i]['sec'] = NON;
</li><li>        $this->colonnes[$i]['ordre'] = $ordreDefaut;
</li><li>       
</li><li>        $i++;
</li><li>        $this->numColMontantCommande = $i;
</li><li>        $this->colonnes[$i]['field'] = "N_MONTCOM_EUR";
</li><li>        $this->colonnes[$i]['name'] = "Montant Com (&euro;)";
</li><li>        $this->colonnes[$i]['width'] = "25%";
</li><li>        $this->colonnes[$i]['align'] = "right";
</li><li>        $this->colonnes[$i]['func'] = "";
</li><li>        $this->colonnes[$i]['pref'] = "";
</li><li>        $this->colonnes[$i]['suff'] = "";
</li><li>        $this->colonnes[$i]['link']['dest'] = "javascript:afficherPostesCommande";
</li><li>        $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
</li><li>        $this->colonnes[$i]['tri'] = $triDefaut;
</li><li>        $this->colonnes[$i]['prim'] = NON;
</li><li>        $this->colonnes[$i]['sec'] = NON;
</li><li>        $this->colonnes[$i]['ordre'] = $ordreDefaut;
</li><li>       
</li><li>        $i++;
</li><li>        $this->numColMontantReceptions = $i;
</li><li>        $this->colonnes[$i]['field'] = "N_MONTREC_EUR";
</li><li>        $this->colonnes[$i]['name'] = "Montant Receps (&euro;)";
</li><li>        $this->colonnes[$i]['width'] = "25%";
</li><li>        $this->colonnes[$i]['align'] = "right";
</li><li>        $this->colonnes[$i]['func'] = "";
</li><li>        $this->colonnes[$i]['pref'] = "";
</li><li>        $this->colonnes[$i]['suff'] = "";
</li><li>        $this->colonnes[$i]['link']['dest'] = "javascript:afficherReceptionsPourCommande";
</li><li>        $this->colonnes[$i]['link']['params'][0] = $this->numColNumCom;
</li><li>        $this->colonnes[$i]['tri'] = NON;
</li><li>        $this->colonnes[$i]['prim'] = NON;
</li><li>        $this->colonnes[$i]['sec'] = NON;
</li><li>        $this->colonnes[$i]['ordre'] = $ordreDefaut;
</li><li>    }
</li><li>   
</li><li>    /**
</li><li>     * Affiche le detail des commandes pour un code BocDrive et une contremarque.
</li><li>     *
</li><li>     * @param array $params 'prim' : numero de la colonne de tri primaire.
</li><li>     *                         'ordreprim' : ordre de tri du tri primaire.
</li><li>     *                         'sec' : numero de la colonne de tri secondaire.
</li><li>     *                         'ordresec' : ordre de tri du tri secondaire.
</li><li>     */
</li><li>    public function affiche($params=NULL)
</li><li>    {
</li><li>        $triprim = "";
</li><li>        $trisec = "";
</li><li>       
</li><li>        if(@isset($params['prim']))
</li><li>        {// reinitialisation des tris primaires et secondaire pour pouvoir changer le tri
</li><li>            for($i=0; @isset($this->colonnes[$i]); $i++)
</li><li>                $this->colonnes[$i]['prim'] = NON;
</li><li>            if(isset($params['sec']))
</li><li>                for($i=0; @isset($this->colonnes[$i]); $i++)
</li><li>                    $this->colonnes[$i]['prim'] = NON;
</li><li>        }
</li><li>        else
</li><li>        {// si les tris ne sont pas defini, on prend ceux par defaut
</li><li>            for($i=0; @isset($this->colonnes[$i]); $i++)
</li><li>            {
</li><li>                if($this->colonnes[$i]['prim'] == OUI)
</li><li>                {
</li><li>                    $params['prim'] = $i;
</li><li>                    $params['ordreprim'] = $this->colonnes[$i]['ordre'];
</li><li>                }
</li><li>                if($this->colonnes[$i]['sec'] == OUI)
</li><li>                {
</li><li>                    $params['prim'] = $i;
</li><li>                    $params['ordreprim'] = $this->colonnes[$i]['ordre'];
</li><li>                }
</li><li>            }
</li><li>        }
</li><li>        // colonne de tri primaire
</li><li>        if(@isset($params['prim']))
</li><li>        {
</li><li>            if(@isset($this->colonnes[$params['prim']]) && $this->colonnes[$params['prim']]['tri']==OUI)
</li><li>            {
</li><li>                $this->colonnes[$params['prim']]['prim'] = OUI;
</li><li>                if(!@isset($params['ordreprim']) || ($params['ordreprim']!=ASC && $params['ordreprim']!=DESC))
</li><li>                    $params['ordreprim'] = ASC;
</li><li>                $this->colonnes[$params['prim']]['ordre'] = $params['ordreprim'];
</li><li>               
</li><li>                $triprim = $this->colonnes[$params['prim']]['field']." ".$this->colonnes[$params['prim']]['ordre'];
</li><li>            }
</li><li>        }
</li><li>        // colonne de tri secondaire
</li><li>        if(@isset($params['sec']))
</li><li>        {
</li><li>            if(@isset($this->colonnes[$params['sec']]) && $this->colonnes[$params['sec']]['tri']==OUI)
</li><li>            {
</li><li>                $this->colonnes[$params['sec']]['sec'] = OUI;
</li><li>                if(!@isset($params['ordresec']) || ($params['ordresec']!=ASC && $params['ordresec']!=DESC))
</li><li>                    $params['ordresec'] = ASC;
</li><li>                $this->colonnes[$params['sec']]['ordre'] = $params['ordresec'];
</li><li>               
</li><li>                $trisec = $this->colonnes[$params['sec']]['field']." ".$this->colonnes[$params['sec']]['ordre'];
</li><li>            }
</li><li>        }
</li><li>       
</li><li>        ?>
</li><li>            <script type="text/javascript">
</li><li>            <!--
</li><li>           
</li><li>            function afficherPostesCommande(numcommande)
</li><li>            {
</li><li>            <?php echo
</li><li>                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", "");";
</li><li>            ?>
</li><li>            }
</li><li>           
</li><li>            function afficherReceptionsPourCommande(numcommande)
</li><li>            {
</li><li>            <?php echo
</li><li>                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", "");";
</li><li>            ?>
</li><li>            }
</li><li>           
</li><li>            //-->
</li><li>            </script>
</li><li>        <?php
</li><li>        echo "
</li><li>            <fieldset>
</li><li>            <legend>D&eacute;tail des commandes</legend>
</li><li>                <center>
</li><li>                <table border="1" cellpadding="0" cellspacing="0" class="donnees">";
</li><li>       
</li><li>        $trisec = (@isset($this->colonnes[$params['sec']]) && $this->colonnes[$params['sec']]['tri']==OUI)?$this->colonnes[$params['sec']]['field']." ".$this->colonnes[$params['sec']]['ordre']:"";
</li><li>        $commandes = $_SESSION['BddAppliAchats']->executer(reqDetailCommandes($this->contremarque, $this->societe, $this->site, $this->bocdrive, $triprim, $trisec),__FILE__,__FUNCTION__,__LINE__);
</li><li>        $affTab = new Tableau($this->colonnes,$this->div);
</li><li>        $affTab->afficheEntete(__CLASS__,"contremarque".FIELD_SEPARATOR."bocdrive".FIELD_SEPARATOR."div".ROW_SEPARATOR.$this->contremarque.FIELD_SEPARATOR.$this->bocdrive.FIELD_SEPARATOR.$this->div,
</li><li>                            __FUNCTION__,"prim".FIELD_SEPARATOR."ordreprim".FIELD_SEPARATOR."sec".FIELD_SEPARATOR."ordresec".ROW_SEPARATOR);
</li><li>                           
</li><li>        foreach($commandes as $ligne)
</li><li>            $affTab->afficheLigne($ligne);
</li><li>    }
</li><li>}
</li><li>?>
</li></ol>
Si tu as des questions, des remarques, n'ésites pas.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>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... )

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
206
Date d'inscription
samedi 29 octobre 2005
Statut
Membre
Dernière intervention
7 mars 2012

Ok merci.

Je continue sur l'autre post (ici).