comment inserer du code html avec javascript ?

comment inserer du code html avec javascript ? - HTML/CSS - Programmation

Marsh Posté le 27-04-2006 à 11:22:44    

Salut,
 
je voudrais faire la même chose que le systeme de pieces jointes de gmail.
On peut ajouter des champs des saisies de fichier en cliquant sur joindre, sans que ça recharge la page.
Le chargement de tous les fichiers se fait au submit.
 
Je suis assez débutant en javascript, donc peut être pourriez vous m'orienter.
merci  :hello:

Reply

Marsh Posté le 27-04-2006 à 11:22:44   

Reply

Marsh Posté le 27-04-2006 à 11:52:11    

Gmail utilise une "techno" appelée Ajax. Cf. Ajax sur google

Message cité 1 fois
Reply

Marsh Posté le 27-04-2006 à 12:14:38    

Bidem a écrit :

Gmail utilise une "techno" appelée Ajax. Cf. Ajax sur google


 :fou: mais c'est pas ça de l'ajax didjouuuu  :fou:  
l'ajout des inputs files se fait purement en javascript et je pencherais fortement pour du DOM...
 
edit: un truc dans le genre

Code :
  1. ...
  2. function addInput(){
  3. var fileNode = document.createElement('input');
  4. fileNode.setAttribute('type', 'file');
  5. fileNode.setAttribute('name', 'fichier[]');
  6. document.getElementById('files').appendChild(fileNode);
  7. }
  8. ...
  9. <body>
  10. ...
  11. <div id="files"/>
  12. ...
  13. </body>


Message édité par anapajari le 27-04-2006 à 12:17:14
Reply

Marsh Posté le 27-04-2006 à 13:59:58    

L'ajout des inputs oui c'est probablement du DOM, mais les fonctionalités de gmail, ben c'est à base d'ajax... http://www.adaptivepath.com/public [...] 000385.php

Message cité 1 fois
Reply

Marsh Posté le 27-04-2006 à 14:31:10    

gooopil a écrit :

L'ajout des inputs oui c'est probablement du DOM, mais les fonctionalités de gmail, ben c'est à base d'ajax... http://www.adaptivepath.com/public [...] 000385.php


Je n'ai pas dit que gmail n'utilisait pas d'ajax mais que pour faire ce qui était demandé il n'y avait rien d'ajaxien la dedans.
D'ailleurs, à partir du moment où tu as des inputs file tu ne peux plus te servir d'ajax: il est impossible d'envoyer un fichier via xmlHttpRequest ( ou son equivalent IE).
 
Ce qui m'énerve ce que maintenant dès qu'une question, relative à du js est posée, il y a forcément une réponse: "c'est en ajax..." alors que non!!! Comme l'explique si bien ton article:

Citation :

Ajax incorporates:
   

  • standards-based presentation using XHTML and CSS;

   

  • dynamic display and interaction using the Document Object Model;

   

  • data interchange and manipulation using XML and XSLT;

   

  • asynchronous data retrieval using XMLHttpRequest;

   

  • and JavaScript binding everything together.



99% des fois il y a à peine le dernier point ...
 
Du coup:
http://img230.imageshack.us/img230/1507/buzzworld5ie.jpg

Message cité 1 fois
Reply

Marsh Posté le 27-04-2006 à 14:31:36    

ok merci :)
 
euh 'files' et 'fichier[]' c'est des arguments qui viennent d'ou ?
du form ?
 
 
oh non pas le magic  :fou:  
 
 :lol:  
 
 
Sinon en dehors d'un document.createElement on peut pas inserer nimporte quel bout de code html ?


Message édité par pactole@ le 27-04-2006 à 14:33:50
Reply

Marsh Posté le 27-04-2006 à 14:37:35    

anapajari a écrit :

Je n'ai pas dit que gmail n'utilisait pas d'ajax mais que pour faire ce qui était demandé il n'y avait rien d'ajaxien la dedans.
D'ailleurs, à partir du moment où tu as des inputs file tu ne peux plus te servir d'ajax: il est impossible d'envoyer un fichier via xmlHttpRequest ( ou son equivalent IE).
 
Ce qui m'énerve ce que maintenant dès qu'une question, relative à du js est posée, il y a forcément une réponse: "c'est en ajax..." alors que non!!!  ...


 
Je suis entièrement d'accord, je ne voulais pas dire que tu disais qu'il y a avait pas d'ajax chez gmail :) Ca se voulait juste être une précision  :jap:
 
Edit: Lol la carte magic :D


Message édité par gooopil le 27-04-2006 à 14:38:06
Reply

Marsh Posté le 27-04-2006 à 14:39:52    

et sinon pour supprimer des champs c'est plus chaud non ? :whistle:

Reply

Marsh Posté le 27-04-2006 à 14:41:35    

removeNode au lieu de appendChild

Reply

Marsh Posté le 27-04-2006 à 14:45:21    

y a pas besoin de gérer des indexs ?

Reply

Marsh Posté le 27-04-2006 à 14:45:21   

Reply

Marsh Posté le 27-04-2006 à 14:59:11    

quels indexs???

Reply

Marsh Posté le 27-04-2006 à 15:10:30    

pour la suppression du bon champ d'upload.
Comme sur gmail.
 
Juste que je vois pas comment le lien supprimer peut savoir lequel il doit supprimer.
 
A la création du lien de suppresion peut être peut on passer un identifiant du node ?


Message édité par pactole@ le 27-04-2006 à 15:13:21
Reply

Marsh Posté le 27-04-2006 à 15:30:15    

bon déjà m'étais planter c'est removeChild et non removeNode...
 
Bref tu fais un truc dans le genre:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   function removeFileNode( node){
  9. document.getElementById('files').removeChild(node.parentNode);
  10.   }
  11.   function addFile(){
  12. var divNode = document.createElement('div');
  13. var fileNode = document.createElement('input');
  14. fileNode.setAttribute('type', 'file');
  15. fileNode.setAttribute('name', 'fichier[]');
  16. divNode.appendChild(fileNode);
  17. var lkRmvNode = document.createElement('input');
  18. lkRmvNode.setAttribute('type', 'button');
  19. lkRmvNode.setAttribute('value', 'supprimer');
  20. lkRmvNode.onclick = function(event){ removeFileNode(this);}
  21. divNode.appendChild(lkRmvNode);
  22. document.getElementById('files').appendChild(divNode);
  23.   }
  24.   </script>
  25. </head>
  26. <body >
  27. <input type="button" onclick="addFile()" value="Ajouter"/>
  28. <div id="files"></div>
  29. </body>
  30. </html>


Message édité par anapajari le 27-04-2006 à 15:30:54
Reply

Marsh Posté le 27-04-2006 à 15:39:52    

@anapajari
merci beaucoup :jap:

Reply

Marsh Posté le 27-04-2006 à 16:26:34    

et merde y a un blem au niveau de la convertion de type du form avec struts :/

Reply

Marsh Posté le 27-04-2006 à 17:55:20    

bon avec la classe FileUpload c'est réglé :D

Reply

Marsh Posté le 23-05-2006 à 22:22:13    

bah si, il y a de l'ajax ... dans gmail à ce niveau là !
dès qu'on a saisie un input, il l'upload via xmlhttprequest ...
c'est assez flagrant, surtout quand on redige un long email en texte, à la fin on se rends compte que toutes les pj ont été submité ... sans avoir encore posté la form ;-)
 
(pour fred : malzed = manatlan ... c kif kif)


Message édité par malzed le 23-05-2006 à 22:22:44
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed