Fermer un div quand je clique dans le vide JS

Version imprimable

05/11/2011, 10h46
kabybot

Fermer un div quand je clique dans le vide JS
Bonjour,
dans le cadre d'un moteur de recherche style facebook en ajax je rencontre un problème , une fois le mot clé est tapé les résultats sont bien la , mon div s'affiche , mais quand je clique dans le vide il reste toujours visible.
j'ai pu régler la moitié du problème en rajoutant cette condition pour le fermer si le champ est vide .
Code:

1 2 3 4 5 6 7 8 ... if(searchbox=='') { document.getElementById('display').style.display='none'; } else { ...
et cela fonction. maintenant je veux fermer le div "display" quand je clique dans le vide (ailleurs sur l'écran) tout le problème est la je ne sais pas quoi mettre comme condition .
merci d'avance
05/11/2011, 17h14
SpaceFrog

cliquer ailleurs => cliquer sur le body ...
05/11/2011, 18h01
kabybot

bonjour spacefrog oui c'est ce que je voulais dire : n'importe ou ailleurs dans le body l'essentiel c'est qu'il se ferme dé qu'on fait un clique même dans le vide , voila :( j'espère que je me suis bien expliquer :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.body.onclick = function(e){
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "id_de_mon_input" || target.id == "id_de_mes_resultats" )
      prevent = true;
    target = target.parentNode;
  }
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
    document.getElementById('display').style.display='none';
  }
  // ne stop pas la propagation
  return true;
}

bonsoir willpower merci d'avoir répondu, je vien de rajouter le code mais ça ne fonction toujours pas enfin il se ferme toujour pas voici mon code complet

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<script type="text/javascript">
$(document).ready(function(){
$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{
document.getElementById('display').style.display='none';
}
else
{
$.ajax({
type: "POST",
url: "search_f_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();	
	}
});
}return false;    
});
});
 
window.body.onclick = function(e){
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "searchbox" || target.id == "display_box" )
      prevent = true;
    target = target.parentNode;
  }
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
    document.getElementById('display').style.display='none';
  }
  // ne stop pas la propagation
  return true;
}
</script>	
<!--//search-->

//formulaire Html

Code:

1
2
3
4
5
6
7
8
9
10
11
<form action="../search_results.php" method="_POST">
<input type="text" name="name_key" class="search no_abk" id="searchbox" />
<input class="button_search" name="btnG" type="submit"  alt="{l_search}"  value="" />
</form>
 
//block des resultat en display:none
<div id="display">
<div class="display_box" align="left"> item resultat1</div>
<div class="display_box" align="left"> item resultat2</div>
...
</div>

je veux juste fermer le div#display quand je clique dans le vide

merci d'avance

autant pour moi, "window.body" n'existe pas, tu dois remplacer par "document.body.onclick".

sinon vu que tu utilises déjà jQuery, voici la version jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).click(function(evt){
 
	var target = evt.target, prevent = false;
 
	while( target && !prevent ){
		// id des éléments qui ne déclenche pas la fermeture
		if( target.id == "searchbox" || target.id == "display" )
			prevent = true;
		target = target.parentNode;
	}
 
	// si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
	if( !prevent ){
		document.getElementById('display').style.display='none';
	}
 
	// ne stop pas la propagation
	return true;
});

06/11/2011, 10h50
kabybot

Merci Willpower tout est rentrer dans l'ordre ,cela fonction très bien merci encore
06/11/2011, 19h41
kabybot

je reviens ver vous car mon problème est résolut mais une autre question se pose :
cette fois quand je clique dans le vide l'input reste plein , je m'explique
dans l'input je tapé par exemple : Bernard
puis je change d'avi je clique donc ailleur dans le body , actuellement le '' Bernard est toujours conservé dans l'input ,
en gros j'aimerai vidé le champ (input) ou même temps cacher le display cité en haut
:) merci d'avance
06/11/2011, 20h11
Willpower

dans le block possèdant la condition "if( !prevent )"

tu rajoutes :

$('#searchbox').val('');
06/11/2011, 20h50
kabybot

Mille fois merci Willpower
problème résolu