Afficher un DIV apres une action ajax

Version imprimable

Bonjour,

Je pense que c'est tout simple mais je n'arrive pas trouver la solution.

J'ai 2 divs l'un en dessous de l'autre.
1 est caché, et l'autre est visible.
J'aimerai qu'au onClick du premier, le div se cache et l'autre div invisible s'affiche.

Voici les divs :

Code:

1
2
<div id="like" onClick="like()" class="action-like"></div>
<div id="likeok" class="action-ok" style="display:none"></div>

Mon code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function like()
		{
		getXhr()
		xhr.onreadystatechange = function()
			{
                      if(xhr.readyState == 1){
                       document.getElementById().className = 'action-like-load';
                       document.getElementById().onclick = '';
                        }
			 if(xhr.readyState == 4 && xhr.status == 200)
			 {
			 document.getElementById().innerHTML=xhr.responseText;
                         document.getElementById().className = 'action-like-ok nocursor';
                         document.getElementById).onclick = '';
			 }
			}
		xhr.open("GET","action.php5",true);
                xhr.send(null);
}

Un avis ?

Merci

21/06/2011, 17h34
Bovino

Citation:

Envoyé par vince62fr

Un avis ?

Code:

document.getElementById().innerHTML=xhr.responseText;

A quel id tu fais référence ? :roll:

En fait j'avais simplifié mon code pour que ça soit plus lisible mais je me rend compte que j'en ai oublié une partie voila le bon :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function like(id, id2, id3, id4, id5, id6)
		{
		getXhr()
		xhr.onreadystatechange = function()
			{
                      if(xhr.readyState == 1){
                       document.getElementById(id, id2, id3, id4, id5, id6).className = 'action-like-load';
                       document.getElementById(id, id2, id3, id4, id5, id6).onclick = '';
                        }
			 if(xhr.readyState == 4 && xhr.status == 200)
			 {
			 document.getElementById(id, id2, id3, id4, id5, id6).innerHTML=xhr.responseText;
                         document.getElementById(id, id2, id3, id4, id5, id6).className = 'action-like-ok nocursor';
                         document.getElementById(id, id2, id3, id4, id5, id6).onclick = '';
			 }
			}
		xhr.open("GET","action.php5?EAN="+id2+"&ID2="+id3+"&IdTRack="+id4+"&type="+id5+"&action="+id6+"",true);
                xhr.send(null);
}
 
 
 
<div id="like1" onClick="like(<?php echo "'like1"', '".$EAN."', '".$id."', '".$addthisIdTrack."', '".$existTrack."', 'like'";?>)" class="action-like"></div>

Bonsoir,
:koi: la méthode getElementById n'admet qu'un seul paramètre et non une multitude, tu sera donc obligé de faire une boucle
exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
</head>
<body>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<script type="text/javascript">
function afficheText(){
  var i, oElem;
  for( i = 0; i < arguments.length; i++){
    oElem = document.getElementById( arguments[i]);
    oElem.innerHTML = arguments[i];
  }
}
afficheText ('id1', 'id2', 'id3');
</script>
</body>
</html>