Affichage suite à un clic

**phter** · 28/11/2012, 16h06

Bonjour,
CONTEXTE: Deux boites (div) sur l'ecran. Dans la deuxieme boite, un bouton. Un clic sur le bouton declenche l'appel a une fonction javascript MM_callJS(jsStr). Cette fonction est chargee de mettre a jour un caractere de la chaine de caracteres (clic_user). Elle doit aussi afficher la chaine de caracteres modifiee sur l'ecran (a cote du bouton).

PROBLEME: l'affichage se fait dans une nouvelle fenetre et non sur la fenetre origine. J'ai vu qu'il faudrait utiliser le DOM pour eviter d'ouvrir une nouvelle fenetre, mais je m'y perd dans les APIs du DOM a utiliser. Une petite aide sur ce point est la bienvenue. D'avance merci.

**Bovino** · 28/11/2012, 16h09

Je te demanderais bien de montrer ton code, mais MM_callJS(jsStr) me laisse penser que c'est une fonction générée par Dreamweaver et du coup, je doute qu'elle donne envie de s'y pencher...

**SpaceFrog** · 28/11/2012, 16h10

tu cherches un popin et pas un popup (window.open)
il existe des tas de possibilités.
lightbox, tooltips ...
il existe de nombreux plugins jquery également (ui dialog ...)

sinon a coder soi même avec un div que ty stylise en css (position display etc ...)

**phter** · 28/11/2012, 16h12

Voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
.boite1 {
        border: 1px solid #000;
        width: 100%;
}
.boite2 {
        border: 1px solid #000;
        width: 100%;
}
</style>
<script>
clic_user = new Array (4);
function MM_callJS(jsStr) { //v2.0
clic_user[0] = jsStr;
document.write(clic_user);
  return eval(jsStr)
}
 </script> 
</head>
 
<body>
<div class="boite1">blablabla</div>
<div class="boite2"><img src="boutonA.gif" alt="bouton A"  onclick="MM_callJS('x')"/> 
</div>
</body>
</html>

**SpaceFrog** · 28/11/2012, 16h14

oulà ça c'est du concentré ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.write(clic_user);
  return eval(jsStr)

**phter** · 28/11/2012, 16h19

J'avais pense etudier jQuery au debut, mais ma premiere approche de jQuery me semblait compliquee pour un probleme relativement simple.

**phter** · 28/11/2012, 17h33

Je reprecise le CONTEXTE. Il ne s'agit pas de faire une infobulle(francais) ou un Tooltip (anglais), mais de modifier un champ texte dans une boite (div) independante des 2 boites indiquees.

Actuellement, le probleme que je rencontre est qu'avec le document.write, le champ modifié apparait sur une nouvelle fenetre.
Apres avoir etudie le DOM, j'ai vu qu'il fallait que le document courant soit ouvert pour que l'affichage se fasse dans la meme fenetre. J'ai dons essaye d'inclure un document.open, mais sans succes.
J'ai ensuite utilise le document.getElementByName(). Au retour de cette API, on obtient l'adresse de l'objet en question. J'ai cherche a afficher le contenu de cet objet, mais n'ai rien trouve dans les APIs du DOM. Le document.write m'affiche dans la bonne fenetre l'adresse de l'objet mais pas son contenu.
D'avance merci pour votre aide pour reoudre ce probleme qui a priori me semblait assez simple au debut.

**SylvainPV** · 28/11/2012, 19h08

Il vaudrait mieux commencer par un tutoriel sur la manipulation du DOM en Javascript. document.write et document.open ne sont pas conçus pour ça.

A la lecture du code j'ai beaucoup de mal à comprendre ce que tu souhaites faire. Pour changer un caractère du texte de ta boite 1, ce code devrait faire l'affaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
.boite1 {
    border: 1px solid #000;
    width: 100%;
}
.boite2 {
    border: 1px solid #000;
    width: 100%;
}
</style>
<script>
function changerCaractere(selecteur,index,char){
   var element = document.querySelector(selecteur);
   var str= element.innerText;
   element.innerText = str.substr(0,index) + char + str.substr(index+1);
}
 </script> 
</head>
 
<body>
<div class="boite1">blablabla</div>
<div class="boite2"><img src="boutonA.gif" alt="bouton A"  onclick="changerCaractere('.boite1',0,'x')"/> 
</div>
</body>
</html>

**phter** · 29/11/2012, 11h21

Merci de m'avoir mis sur la piste. Il semble qu'il y ai encore quelques petits problemes avec le script. Je vais essayer de l'adapter a mon cas particulier et l'adapter a l'affichage d'un timer.
La lecture du livre "Debuter en Javascript" de Shelley Powers a sans doute ete trop rapide. Je suis en train de convertir un script Flash AS3 en Javascript, car le script actuel Flash ne fonctionne pas avec les tablettes Apple. J'aurais sans doute l'occasion de faire appel a votre connaissance de Javascript.

Affichage suite à un clic

JavaScript

Discussions similaires

Partager

Partager