comment inserer du code html avec javascript ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : comment inserer du code html avec javascript ?

pactole@

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:

Publicité

Bidem

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

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

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 :

...
function addInput(){
var fileNode = document.createElement('input');
fileNode.setAttribute('type', 'file');
fileNode.setAttribute('name', 'fichier[]');
document.getElementById('files').appendChild(fileNode);
}
...
<body>
...
<div id="files"/>
...
</body>

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

gooopil

pfiew

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

anapajari

s/travail/glanding on hfr/gs;

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:

Message cité 1 fois

pactole@

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

gooopil

pfiew

anapajari a écrit :

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

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

pactole@

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

anapajari

s/travail/glanding on hfr/gs;

removeNode au lieu de appendChild

pactole@

y a pas besoin de gérer des indexs ?

Publicité

anapajari

s/travail/glanding on hfr/gs;

quels indexs???

pactole@

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

anapajari

s/travail/glanding on hfr/gs;

bon déjà m'étais planter c'est removeChild et non removeNode...

Bref tu fais un truc dans le genre:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
function removeFileNode( node){
document.getElementById('files').removeChild(node.parentNode);
}
function addFile(){
var divNode = document.createElement('div');
var fileNode = document.createElement('input');
fileNode.setAttribute('type', 'file');
fileNode.setAttribute('name', 'fichier[]');
divNode.appendChild(fileNode);
var lkRmvNode = document.createElement('input');
lkRmvNode.setAttribute('type', 'button');
lkRmvNode.setAttribute('value', 'supprimer');
lkRmvNode.onclick = function(event){ removeFileNode(this);}
divNode.appendChild(lkRmvNode);
document.getElementById('files').appendChild(divNode);
}
</script>
</head>
<body >
<input type="button" onclick="addFile()" value="Ajouter"/>
<div id="files"></div>
</body>
</html>

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

pactole@

@anapajari
merci beaucoup :jap:

pactole@

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

pactole@

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

malzed

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

FORUM HardWare.fr

Programmation

HTML/CSS

comment inserer du code html avec javascript ?

Sujets relatifs
HTML <div> flottant	Tomcat et internationalisation de fichiers html
possibilitée du javascript???	besoin d'aide pour naviguation dans page HTML
Balise div dans le code .NET	Passage du HTML au XHTML / CSS, quelque petits soucis...
[RESOLUE] Quelqu'un s'y connait il un peu en tableau HTML ? Merci	Supprimer barre de défilement en HTML
bandeau defilant en javascript	[newbie] inserer un code javascript dans du html
Plus de sujets relatifs à : comment inserer du code html avec javascript ?

Page générée en 0.067 secondes