Utilisation du DOM pour fausse action Ajax [Résolu]

[Njörd]

Bonjour à tous,

J'essai de mettre en place la technique de l'iframe afin de pouvoir upload des images en ajax. Pour ceux qui connaissent, il n'est pas possible en Ajax d'uploader avec multipart-data (raison de sécurité).

Je fais donc semblant. J'envoi mon formulaire via l'iframe, mon controller (je précise être en MVC) reçois bien le tout et le traitement est ok. Jusqu'ici tout va bien.

Là où je coince, c'est pour gérer l'envoi d'un retour. En php simple, il suffit de d'ajouter la ligne suivante à la page php qui traite le formulaire :

Code :

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

Mais en MVC, je ne peux pas utiliser le javascript comme cela.

Ma parade est la suivante : j'envoi des données XML avec donc la réponse success.

Code :

1
2
3
4
5
6
7
8
$success = 1;
$xml = '<div id="success">
<?xml version="1.0" encoding="utf-8"?><infos>';
     $xml .= '<info id="1">';
          $xml .= '<success>' . $success . '</success>';
     $xml .= '</info>';
$xml .= '</infos></div>';
echo $xml;

Ces données apparaissent bien dans la réponse POST lorsque je regarde avec firebug.

Question :
Est-il bien possible de récupérer ces informations via le DOM ? Ou est-ce que je fais fausse route ?

Dans le cas où je peux, la suite de ma parade est de lancer une fonction javascript au moment de l'envoi du formulaire avec un setTimeout().

Code :

onClick="javascript:setTimeout('stopUpload()', 2500);"

Et dans cette fonction, je souhaite récupérer les informations dans le DOM avec :

Code :

1
2
var xml = document.getElementsByTagName('infos');
var successXML = xml[0].getElementsByTagName("success")[0].firstChild.nodeValue;

Seulement je n'arrive pas à parcourir la variable XML qui est un objetHTMLCollection. Après de multiples recherches et essais, j'en viens à douter que ma méthode puisse fonctionner.

Merci d'avance pour tout coup de main

[andry.aime]

Bonjour,

1-

$xml = '<div id="success">
<?xml version="1.0" encoding="utf-8"?><infos>';

Code php :

1
2
3
4
header ("Content-Type:text/xml"); 
$xml = '<?xml version="1.0" encoding="utf-8"?>
<div id="success">
<infos>';

2-

onClick="javascript:setTimeout('stopUpload()', 2500);"

onclick attend déjà des évènements js donc inutile de mettre "javascript:".

A+.

[Njörd]

Bonjour Andry Aime,

Merci pour ces corrections. L'ajout du header entraine deux erreurs, une liée à jquery et l'autre lié à ckeditor. En revanche, cela ne change rien malheureusement. Le comportement de l'ajout d'image et de sa miniature se passe bien.

En fait, je récupère bien quelque chose, mais ce que je récupère est vide.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Création de la variable XML
var xml = document.getElementsByTagName('infos');
 
// Parcours du fichier XML 
var successXML = '';
$(xml).find('info').each(
     function(){
          // Récupération des variables du fichier XML
          var successXML =   $(this).find('success').text();
     }
)            
 
alert(successXML);

Je dois mal récupérer les données envoyés dans la réponse POST qui ressemble à cela :

Code :

1
2
3
4
5
6
7
8
9
10
 
<div id="corps">
     <br /><br /><center>View script for controller <b>Media</b> and script/action name <b>ajouter</b>
     </center><?xml version="1.0" encoding="utf-8"?>
                                    <infos>
                                        <info>
                                            <success>salut</success>
                                        </info>
                                    </infos>
 </div>

Le alert s'affiche bien mais est vide et la fonction se termine normalement.

[andry.aime]

Je ne comprend pas vraiment ton astuce mais

var successXML = $(this).find('success').text();

ça va créer une autre variable locale dans la fonction anonyme, ainsi tu ne l'affecte pas à la variable globale.

Code :

successXML =   $(this).find('success').text();

J'ai mis le header parceque je pense que tu allais retourner un xml. Pourquoi tu ne retournes pas un xml mais un html mélangé avec xml?
Ce bout de code ne te servira à rien si tu exploites un format text

<?xml version="1.0" encoding="utf-8"?>

A+.

[Bovino]

J'ai l'impression que tu te compliques inutilement la vie...
Pourquoi ne pas passer par l'événement onload ?

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>iframe</title>
    </head>
    <body>
		<p>Lorem ipsum</p>
		<iframe id="iframe" src="iframe.html"></iframe>
		<p>Lorem ipsum</p>
		<script>
			document.getElementById('iframe').onload = function(){
				alert('iframe (re)chargée !');
			}
		</script>
    </body>
</html>

et pour l'iframe

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>iframe</title>
    </head>
    <body>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<button onclick="self.location.reload()">Recharger l'iframe</button>
    </body>
</html>

[Njörd]

En fait, à force d'essayer plein de choses, j'en oublie les fondamentaux :
1 - Oui je recrée une variable inutilement, c'est ballot^^
2 - Mon each ne fonctionne pas. La fonction ne rentre jamais dedans.
3 - J'ai essayé avec cette autre boucle, même résultat

Code :

1
2
3
4
5
6
7
8
9
 
            var xml = document.getElementsByTagName('infos');
            var rech = xml;
            var str = 'salut';
            var rechCount = rech.length;
            for(i = 0; i < rechCount; i++){
                    alert('je suis dans le for');
            }
            alert(str);

Concernant le header et ce que je renvoi. Je vais réexpliquer j'ai dû mal m'exprimer.

Je suis dans une application MCV, sur une page html avec un formulaire d'ajout d'image (un simple input file et un bouton). Je fais semblant de gérer l'ajout en ajax grâce à un iframe.

Quand je clic sur ajouter l'image, j'appelle un controller (MediaController) et son action ajouter. Cette action traite ce que j'ai envoyé : sauvegarder l'originale et créé une miniature, enregistré dans la bd et renvoyer un string grâce à un echo.

Ce string correspond au xml. Pourquoi je fais ça ? parce que j'ai déjà utilisé cette méthode dans une fonction jquery/ajax et que ça fonctionne bien (en cas de succès, je récupère la variable xml et je fais mon each pour récupérer le tout).

Sauf que je ne suis pas en vrai Ajax (ne fonctionne pas avec le mutlipart-data), donc pas de XMLHttpRequest object en réponse. Pour simuler cet objet qui est normalement renvoyé par le server, je fais l'echo mentionné plus haut. Ainsi, dans la reponse POST, mon controller renvoi bien des données brutes, du texte en l'occurrence.

Et c'est ces données là que je veux récupérer. Une fois cela fait, je peux continuer ma fonction comme si de rien n'étais puisque j'aurai au moins le succès ou non de l'opération.

C'est pour ça que je ne suis pas sur de pouvoir exploiter ces données en javascript. Je pense (et je peux penser à tort justement) que ces données envoyées dans la réponse POST sont dans le DOM, et donc accessible via javascript.

C'est du bricolage puisqu'on ne fait pas d'ajax (donc pas d'objet réponse du serveur exploitable) et en plus, je suis en MVC. En php simple ça aurait déjà été réglé

Donc est-ce que je cherche à faire quelque chose d'impossible ?

Bon appétit

[Bovino]

En php simple, il suffit de d'ajouter la ligne suivante à la page php qui traite le formulaire :

Euh... franchement, je ne vois pas en quoi travailler en MVC empêche de rajouter ce script

[Njörd]

Bonjour Bovino,

Je n'avais pas vu ton premier message.

Je vais regarder du côté de onload().

Sinon, pour le fait qu'en MVC ça ne devrait pas changer. Je ne peux pas mettre dans mon controller du javascript en fermant la balise php comme c'est le cas si je ne fais pas cela en MVC.

Code :

1
2
3
4
5
6
 
<?php
 // le traitement php
?>
 
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $success ?>);</script>

C'est à cause de cela que je me prend la tête à faire tout ça

Je vais regarder si zend permet de lancer une fonction javascript depuis un controller.

[Bovino]

Je vais regarder si zend permet de lancer une fonction javascript depuis un controller.

Je serais très étonné qu'il ne le fasse pas !

Au passage :

Code :

window.top.window.stopUpload(...)

tu multiplies inutilement les objets de type window !
top, parent et self correspondent déjà à des objets window, donc ton code est identique à

Code :

top.stopUpload(...)

[Njörd]

Effectivement, j'avais pris le problème à l'envers et j'ai voulu recréer la roue

Deux possibilités donc avec zend :
- Soit on crée sa propre aide de vue (http://www.stoimen.com/blog/2010/06/...-a-actionview/)
- Soit on utilise un composant du framework (http://framework.zend.com/manual/fr/...roduction.html)

En tout cas, merci beaucoup pour votre aide et vos corrections.

Enjoy