[AJAX] AJAX dans une popup

Version imprimable

04/03/2010, 15h10
Pillgrim

[AJAX] AJAX dans une popup

Bonjour,

je vais essayer d'être clair, voici mon problème :

j'ai une page php générée via de l'AJAX et qui contient des cellules cliquables.

quand je clique sur une cellule, je déclenche une fonction javascript qui se trouve dans un fichier f_js.js
Cette fonction appelle une page php qui va être en fait une popup via la ligne de code :

Code:

echo 'var f = window.open("", "FenetreRlt", "width=700, height=330, toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=700, top=300");';

j'écris ce que j'ai à écrire dans cette fenêtre via

Code:

f.document.createElement(.......)

Toujours dans cette fenêtre popup, j'ai une liste déroulante avec un onChange().
Quand l'action onChange() est effectuée, j'envoi en paramètre "f" (celui du bout de code plus haut) afin de pouvoir travailler les infos de la popup dans une fonction js présente dans f_js.js.

Si on s'arrête là tout va bien.

Mon problème est le suivant :
quand je fait le onChange(), je souhaite modifier dynamiquement certaines infos de la popup. MAIS j'ai besoin de le faire via des requêtes php.
or quand j'appelle un fichier php dans le onChange(), je n'arrive pas du tout à modifier les infos de la popup car je n'arrive pas à "identifier" la popup.
J'ai essayé d'envoyer "f", il ne le reconnait pas, j'ai essayé un simple document.getElmentById(...) pareil.

Je ne sais pas comment dire à mon fichier php d'aller travailler sur les données de la popup.

J'espère avoir été clair et vous remercie d'avance

Pill
04/03/2010, 16h15
E.Bzz

Bonjour,
l'explication est relativement claire, mais pas le problème.

Citation:

Envoyé par Pillgrim

quand je fait le onChange(), je souhaite modifier dynamiquement certaines infos de la popup.

Bon. Mais tu es déjà dans la pop, on est d'accord ?

Citation:

Envoyé par Pillgrim

MAIS j'ai besoin de le faire via des requêtes php.
or quand j'appelle un fichier php dans le onChange(), je n'arrive pas du tout à modifier les infos de la popup car je n'arrive pas à "identifier" la popup.
J'ai essayé d'envoyer "f", il ne le reconnait pas, j'ai essayé un simple document.getElmentById(...) pareil.

Etant déjà dans la pop ,ça devrait être un simple traitement Ajax, non ?

Citation:

Envoyé par Pillgrim

Je ne sais pas comment dire à mon fichier php d'aller travailler sur les données de la popup.

C'est là que je ne comprends pas ton problème ?? :?

A+
04/03/2010, 16h36
Pillgrim

Citation:

Bon. Mais tu es déjà dans la pop, on est d'accord ?

Oui

Citation:

Etant déjà dans la pop ,ça devrait être un simple traitement Ajax, non ?

Je pensais, mais non :
La popup contient le onChange() et tout est écrit grâce à

Code:

f.document.....

Le fichier js contenant la fonction d'appel onChange() peut faire certains traitements mais pas ceux en php. Comme j'ai mis en paramètre le "f", j'arrive à faire du

Code:

f.document.....

dans cette fonction.

Dans cette même fonction js, j'appelle une page php. Pour modifier les données de la popup, je dois avoir un truc comme

Code:

document.getElementById("param").value = valeur_res_requete

Mon problème, c'est de cibler la popup. si je mets juste document...., il ne la trouve pas, et si je mets f.document, il ne comprend pas "f". (même après passage en paramètre de la fonction js, et récupération par un GET dans la page php) .

Si tu ne vois pas mon problème, comment ferais tu pour manipuler les données de la popup dans la page php ?

Merci !
04/03/2010, 16h56
E.Bzz

Citation:

Envoyé par Pillgrim

Si tu ne vois pas mon problème, comment ferais tu pour manipuler les données de la popup dans la page php ?

Déjà je partirais du principe qu'un code PHP ne peut pas (directement) "manipuler" une pop ;)

Je pense qu'à la création de la pop, je génèrerais la fonction d'appel Ajax (qui servira à manipuler la pop en JS, grâce au résultat d'un traitement PHP) ou une balise <script> pointant vers un .js (avec f.document.createElement) dans le <head>.
Je n'aurais plus qu'à générer un onchange qui fasse appel à ma fonction Ajax prédéfinie ...

A+
04/03/2010, 17h13
Pillgrim

Je vois ce que tu veux dire mais,
on est bien d'accord que je suis obliger de faire un fichier php à part qui va faire mes requêtes ?
Ensuite c'est bien toujours dans ce fichier que je vais mettre à jour mes valeurs ?
Je ne peux pas faire ces changements autrement.
Si ?

Merci
04/03/2010, 17h19
E.Bzz

Ben ... fichier, requête, valeur ...

Ça peut vouloir dire tout et son contraire suivant le contexte !
Va falloir être plus précis et/ou plus concret ;)

A+

Ok :)
voilà du concret :

dans le fichier principal Page_Principale.php j'ai un tableau avec des cellulles TD sur lesquelles j'ai un onClick ()

Code:

echo 'inp.onclick = function(){select_plan_image("", "'.$duree_00.'", "'.$nbpxlmin.'", "'.$large_maxi.'", "", "J", "'.$matricule.'", "'.$date_debut.'", "");};';

Dans un fichier f_js.js j'ai la fonction select_plan_image(....) qui va faire appel à un fichier php qui sera la popup. Voici une partie du code de select_plan_image(....)
Code:

1 2 3 data='matricule='+matricule+'&imageid='+imageid+'&type_code='+type_code+'&code='+code+'&duree_00='+duree_00+'&nbpxlmin='+nbpxlmin+'&large_maxi='+large_maxi+'&coddpt='+coddpt+'&nocache='+Math.random(); nom_page = "Page_Popup.php"; lance_page(data, nom_page) // permet l'exécution de la page
dans Page_Popup.php j'ai

Code:

echo 'var f = window.open("", "FenetreRlt", "width=700, height=330, toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=700, top=300");'; // permet d'ouvrir la popup

et une liste déroulante qui va contenir un onChange(). Quand le onChange s'exécute, je souhaite mettre à jour des champs input texte et une autre liste déroulante à jour.
Code:

1 2 echo 'sel.onchange = function(){select_codePointage(f, \''.$matricule.'\', d_travaux, \''.$coddpt.'\');};'; le f passé en paramètre est celui du window.opener
à partir de ce moment, pour moi, pour pouvoir modifier mes input via des requetes, je doit appeler une page php dans select_codePointage().

j'ai donc fait dans f_js.js :
Code:

1 2 3 4 5 6 7 8 select_codePointage(....) { // si ici je tente des modif de champs de la popup ça fonctionne via f.document.getElementById("id_champ").value = New_value; // Mais j'ai besoin de requetes data = 'f='+f+'&tri='+tri+'&nocache='+Math.random(); fichtrt = 'Traitement_Popup_Php.php'; lance_page(data, fichtrt); }
Pour finir, quand je fais des requêtes dans Traitement_Popup_Php.php, ça fonctionne, mais quand je veux agir sur la popup, il ne comprend pas les commandes
Code:

1 2 3 4 5 $f = $_GET["f"]; // renvoit [object] echo 'var titi = f.document.getElementById("date_jour").value;'; // ne marche pas echo 'var titi = '.$f.'.document.getElementById("date_jour").value;'; // ne marche pas echo 'var titi = document.getElementById("date_jour").value;'; // ne marche pas
Merci !

05/03/2010, 09h54
E.Bzz

OK.
C'est effectivement plus concret :ccool:

Par contre, d'une part c'est du PHP, d'autre part, tu ne dis pas toujours s'il s'agit de la page principale ou de la pop (même si on peut parfois le déduire).

Il faudrait reposté la version générée (et non PHP) de toutes les parties Javascript et HTML.
C'est le seul moyen de détecter efficacement les erreurs (beaucoup étant liées à la génération).

A+
05/03/2010, 10h06
Pillgrim

C'est toujours la popup, sauf pour le premier bout de code.

Tous les appels se font via la popup, mis à part le premier onClick qui vient de la page principal

J'ai bien 4 fichiers :
Page_Principale.php pour le onClick()
f_js.js pour lancer les pages Page_popup.php et Traitement_Popup_Php.php
Page_popup.php qui fait le window opener
Traitement_Popup_Php.php qui fait les requêtes et est censé modifier les input créés dans Page_popup.php

Je la trouve où la version générée ????

Merci
05/03/2010, 10h08
E.Bzz

Citation:

Envoyé par Pillgrim

Je la trouve où la version générée ????

Dans ton navigateur ;)
Une fois Page_Principale.php affichée dans le nav => clic droit + "Afficher la source" (ou équivalent) ...

A+
05/03/2010, 10h33
Pillgrim

C'est bien ce que je pensais mais on va pas voir grand chose.
Le code généré de ma popup est <HTML></HTML>
Mais c'est normal tout passe par javascript/PHP

PS : merci beaucoup pour le temps passé !
05/03/2010, 10h34
E.Bzz

Citation:

Envoyé par Pillgrim

C'est bien ce que je pensais mais on va pas voir grand chose.
Le code généré de ma popup est <HTML></HTML>

Page_Principale.php c'est ta pop ? :koi:

A+

Non.
Voici le code génré de Page_Principale, mais encore une fois on ne va pas voir grand chose.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<html>
<head>
<link href="styles_VP.css" rel="stylesheet" type="text/css">
<SCRIPT TYPE="text/javascript" src="./includes/function_js.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" src="./includes/function_ajax.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" src="./includes/function_js_roul.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" src="./includes/function_js_t.js"></SCRIPT>
 
<div id="contenu_plan" style="display:block"><div id="chargementVP" style="display:block;text-align:center;"><p>Chargement en cours . . . <img src="./Images/chargeplan.gif""></p></div><div id="id_plan_main" style="display:none;"></div><div style="display:none"><input id="hdispo" namoe="hdispo" value="" type="hidden"></div></div>
<script type="text/javascript">
o_blk_plan("id_plan_main", "Y", "10", "077", '');
</script>
 
</body>
</html>

Merci !

05/03/2010, 11h09
E.Bzz

Citation:

Envoyé par Pillgrim

on ne va pas voir grand chose.

Arf !
J'avais zappé ça :

Citation:

Envoyé par Pillgrim

j'ai une page php générée via de l'AJAX et qui contient des cellules cliquables.

:aie:

Et ben c'est pas gagné :mrgreen:

C'est le gros inconvénient des sites "full Ajax" (car visiblement tu n'as pas besoin d'Ajax dans ta page principale).

Pour reprendre plus haut : à partir d'où est appelée Traitement_Popup_Php.php ?
De la principale ou de la pop ?

A+
05/03/2010, 11h31
Pillgrim

Citation:

Envoyé par E.Bzz

Et ben c'est pas gagné :mrgreen:

Comme tu dis 8-)

Citation:

Envoyé par E.Bzz

C'est le gros inconvénient des sites "full Ajax" (car visiblement tu n'as pas besoin d'Ajax dans ta page principale).

Si j'en ai besoin car j'ai simplifié en l'appellant page principale. Mais c'est plus compliqué que ça, mais non nécessaire à la résolution du problème je pense ^^

Citation:

Envoyé par E.Bzz

Pour reprendre plus haut : à partir d'où est appelée Traitement_Popup_Php.php ?
De la principale ou de la pop ?

C'est appelé depuis la popup, lors du onChange() qui est fait sur une liste déroulante de la popup
Traitement_Popup_Php.php

Merci !
05/03/2010, 11h42
E.Bzz
Alors si Traitement_Popup_Php.php est bien appelé par Ajax (et si date_jour est bien l'id d'un élément de la pop), la syntaxe devrait être
Code:

1 2 var titi = document.getElementById("date_jour").value; alert(titi); // pour vérifier
Si ça ne fonctionne pas, c'est qu'il nous manque une information (ou qu'un autre bug gêne) ;)

A+
05/03/2010, 12h52
Pillgrim
Cette syntaxe ne fonctionne pas, ni dans la fonction javascript d'appel qui est codePointage(), ni dans Traitement_Popup_php.php

Pour que ça fonctionne dans codePointage(), il faut écrire
Code:

1 2 3 var titi = f.document.getElementById("date_jour").value; alert(titi); // pour vérifier
Dans Traitement_Popup_php.php, il ne reconnais pas "f"

Si je ne le mets pas, j'ai droit à l'erreur "Object requis"

Merci
05/03/2010, 13h37
laurentg2003

juste une idée en survolant ton probleme
dans ton popup tu fais une requete ajax en js donc et pour modifier les données issus d'un script php tu fais en sorte
que quand tu clic tu exécute une fonction JS qui elle va transmettre des paramatres à la metode ajax send("param="maVar etc etc) et là sur ton script php tu recupere les param avec $maVar=$_GET["maVar"];
et la ces nouveaux parametres sont transmis à ta requete SQL
genre select from table where monChamps=$maVar
et là aussi via ajax tu recupere le resultat de la requete via jason xml ce que tu veux. et voilà c'est modifié.
Sinon un popup est ce judicieux vu que les navigateurs peuvent les bloquer
modifier un div avec le dom et son contenu n'est ce pas plus accessible et plus simple?
05/03/2010, 13h50
Pillgrim

Merci de ta contribution.

Citation:

et là aussi via ajax tu recupere le resultat de la requete via jason xml ce que tu veux. et voilà c'est modifié.

Je n'ai pas compris cette phrase. C'est quoi jason xml ???

Transmettre les paramètres et les récupérer, puis les utiliser pour une requête, ya pas de souci.
Modifier un champ de la popup, ya souci.

L'utilisation de la popup est ici indispensable :?
05/03/2010, 14h07
E.Bzz

@laurent : comme je te l'ai déjà dit, Jason est une référence cinématographique (entre autres).
Ici il faut parler de JSon ;)

A+
05/03/2010, 14h24
laurentg2003

mince :)
ah moi et les peplums :mrgreen:
Je n'écrirai plus jason mais JSon
Je n'écrirai plus jason mais JSon etc :)
Donc tu récupère les données sélectionnées par ta nouvelle requête avec objetAjax.open(url,) et avec responseText et du coup tu modifie le contenu de ton popup via un div qui contient ces nouvelles données
essaye ça dans ton popup
aprés c'est juste une idée ;)
j'ai fais un truc pareil pour un cms
11/03/2010, 08h38
Pillgrim

Bonjour,

j'ai finalement résolu mon problème !
J'ai fait 2 divisions dans la popup, que je mets à jour par des actions js, tout en ré-exécutant le code de la popup.

Merci pour votre aide !