Système hide show non fonctionnel

Version imprimable

Bonjour,

je reviens à nouveau vers vous car j'ai à nouveau un soucis avec mes codes.

Je suis en train de programmer un système de recherche façon FB mais plusieurs problèmes se posent à moi.

Je souhaite que lorsqu'on recherche un membre par nom et prénom, ma div s'affiche sous mon input. jusque là pas de soucis.

Par contre je souhaite, fermer la div quand on clique à l'extérieur de cette div. Je précise de la div car là ça ne concerne pas l'input. Je souhaite qu'elle reste active car y a des lien cliquable dessus donc pas de possibilités de faire un onblur sur la div. J'ai tenté de simuler un blur par un code JS sous ma div mais bizarrement celle-ci ne fait plus apparaître les données car elle s'ouvre plus normalement.

Je souhaiterai aussi que lorsque je retape une donnée, la div s'ouvre normalement avec ou sans les anciennes données affichée (peu importe puisque la nouvelle saisie, va effectuer une nouvelle requête)

Je ne sais absolument pas comment faire ça sinon...

J'ai bien effectué un script pour afficher la div mais elle ne s'ouvre plus non plus complètement. je suis obligé de recharger ma page pour que tout revienne à la normal.

Auriez-vous une solution simple à effectuer ?

Merci d'avance.

Mon code actuel sinon :
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 $(document).ready(function(){ $('.loader').hide(); $('#search').keyup(function(){ $field = $(this); $('#result').html(''); if($field.val().length>0) { $.ajax({ type: 'post', url: 'recherches/resultats.php', data: 'search='+$('#search').val(), beforeSend:function(){ $('.loader').stop().fadeIn(); }, success: function(data){ $('.loader').fadeOut(); $('#result').html(data); } }); } }); });
et mon code pour afficher la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function MontrerDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('result').style.display = 'block'; } else { if (document.layers) { // Netscape 4 document.result.display = 'block'; data = ''; $('#result').html(data); } else { // IE 4 document.all.result.style.display = 'block'; } } }

Alors j'ai tenté plusieurs choses différentes.

J'ai trouvé plein de codes pour fermer la div sur onClick outside pour simuler le blur d'une fonction normale sur un input mais lorsque je tape une recherche sur mon input, la div est automatiquement fermée.

Y a t'il un moyen de trouver un script qui vérifie avant si la div est toujours active ou non et de la maintenir ouverte le temps que je tape ma recherche ?

Sachant que je ne peux pas mettre mon input dans ma div de résultat sinon l'input disparaîtrait avec la div.

voici mon code html ua cas ou ^^
Code:

1 2 3 4 5 6 7 8 9 10 <div id="resultSearch"> <form action="recherches/recherche.php" method="post" > <label for="search" style="color:#604938">Rechercher une personne que vous connaissez</label> <input type="text" name="search" id="search" class="inputSearchBarre" value="Tapez votre recherche ici..." onblur="if(this.value=='')this.value='Tapez votre recherche ici...'" onclick="if(this.value=='Tapez votre recherche ici...')this.value=''; MontrerDiv()" > <div class="loader"></div> </form> <div class="result" id="result" ></div> </div>
Merci d'avance

15/01/2014, 17h18
SylvainPV

Une piste :
http://jsfiddle.net/wE529/
http://www.developpez.net/forums/d12...v/#post7016660
15/01/2014, 18h08
NoSmoking

Bonjour,
si je peux me permettre pourquoi lorsque l'on utilise jQuery on déterre un script des années 60?
16/01/2014, 04h25
stefde3

Eh bien je suis né pas loin derrière et que quand comme moi, on y comprends rien au JS... bah on teste tout sans forcément le comprendre ^^

Mes vieux neurones ne faisant plus aussi bien les connexions qu'avant, je me contente de ce que je trouve par-ci par-là.

Naturellement j'en comprends un peu les bases mais vu que je suis loin d'avoir votre niveau...

Enfin voilà quoi ^^

En tout cas "MERCI MILLE FOIS" SylvainPV pour ces pistes. Je vais les étudier avec attention.
16/01/2014, 12h35
stefde3

Bon je pense pas que j'y arriverai... à comprendre !

Je conçoit le concept d'ouvrir la div mais sans rappel au départ que la div est déjà ouverte, je pourrais jamais la fermer... sinon elle sera toujours fermée sans tenir compte de mon code d'ouverture quand je tape quelque chose dans mon input.

Les codes donnés me parlent pas du tout.

length = longueur (pour moi),
window.load = au chargement de la page,
size = taille,
evt = evènement,
taget = cible,
hide() = cacher(),
closest = le plus proche

à savoir pourquoi on détermine elm à this ou pourquoi .hide(this) ne sachant pas à quoi correspond "this" peut bien être utile...

Egalement cette partie du code qui me parle pas du tout :

Code:

if($(evt.target).closest(elm).size() === 0){

je comprends pas la corrélation entre chaque élément.

J'avais bien fait un topic suggérant de payer quelqu'un pour me le faire ainsi j'aurai évité la remarque sur les script des années 60 mais on m'a supprimé mon topic... ah bah c'est toi en plus NoSmoking ^^

Si quelqu'un ne me fait pas le code en entier... je pense pas pouvoir y arriver et pourtant j'en ai cruellement besoin...

apprendre le html, le css et le php a été assez simple comparé au multiple dérivés de JS, Ajax, Jquery pour moi tout se ressemble ^^
Je ne fait même pas la différence entre chaque type de code...

Bon puisqu'ici on ne peut proposer un règlement pour un travail effectué, je pense que je vais aller faire ma demande sur un autre forum concurrent qui accepte de prendre les paiements contre travaux...

Merci quand même ^^

je mets le sujet en résolu quoi que pas vraiment :?

Patience est mère des vertus, mais comme le temps c'est de l'argent, je conçois qu'on puisse faire son troc ailleurs.

Pour les autres développeurs qui feraient face au même problème :

Le code d'ajout de l'évènement clickout à jQuery :

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
 
(function($){
  var excluded = $([]);   
 
  $.event.special.clickout = {  
    setup: function(data){
      if(excluded.size()===0){
        $(document).on("click", $.event.special.clickout.handler);
      }
      $(this).data('outlimit', data && data.outlimit ? data.outlimit : document.body);        
      excluded = excluded.add(this);
    },
    teardown: function(data){
      $(this).removeData('outlimit');
      excluded = excluded.not(this);
      if(excluded.size()===0){
         $(document).off("click", $.event.special.clickout.handler);
      }
    },    
    add: function(handleObj){
      var old_handler = handleObj.handler;
      handleObj.handler = function(event,elm){
        event.target = elm; //redirect event
        old_handler.apply(this, arguments);
      };
    },
    handler: function(event){
      excluded.each(function(e,elm){
        var out = $(elm).data('outlimit') || document.body;
        if($(event.target).closest(elm).size() === 0 &&
           $(event.target).closest(out).size() !==0 ){
          //triggerHandler: stop event bubbling
          //extra parameters: click event target
          $(elm).triggerHandler( 'clickout', [ event.target ] );
        }
      });
    }      
  };
})(jQuery);

Inutile de tout comprendre ici, la partie intéressante est quant à son utilisation ici :

Code:

1
2
3
4
5
6
7
8
9
var popin = $("#popin");
var boutonOuverture = $("button.ouvrir-popin");
 
boutonOuverture.on("click", function(event){
     event.stopImmediatePropagation();
     popin.fadeIn(200).one("clickout",function(event){
        popin.fadeOut(200);
     });
});

Et la demo qui va bien avec : http://jsfiddle.net/wE529/1/

Je ne prends pas les chèques mais j'accepte les :plusser:

Citation:

au multiple dérivés de JS, Ajax, Jquery pour moi tout se ressemble ^^

tous ne sont que du javascript.

J'y vais de mon petit exemple mais en "vanilla" javascript comme ils disent
exemple complet donc

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
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#logo_dvp{
  margin: 2em auto;
  border:1px solid #CCF;
  background:#EEE;
  width:20em;
  text-align:center;
}
</style>
</head>
<body>
<button id="open_popup">Ouvrir une pop-in</button>
<div id="logo_dvp">
 <p><img src="http://www.developpez.net/template/images/logo.png" alt="logo DVP"></p>
 <p><a href="http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/" target="DVP">Accés Forum javascript</a></p>
</div>
<script>
// supprime la propagation des événements
function eventStopPropagation(e){
  e = e || window.event;
  if( e.stopPropagation){ // tous les navigateurs sauf IE avant ver. 9
    e.stopPropagation()
  }
  else{ // pour IE avant ver. 9
    e.cancelBubble = true;
  }
}
var oLogo = document.getElementById('logo_dvp');
// blocage du click sur la DIV conteneur
oLogo.onclick = function(e){
  eventStopPropagation(e);
  alert('Clic sur le logo');
}
// commande de'affichage de la DIV
var oBtn = document.getElementById('open_popup');
oBtn.onclick = function(e){
  eventStopPropagation(e);
  oLogo.style.display = 'block';
};
// Gestion du click sur le BODY
document.documentElement.onclick = function( e){
  // on masque le Logo
  oLogo.style.display = 'none';
};
</script>
</body>
</html>

et le script à part pour la coloration syntaxique

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
// supprime la propagation des événements
function eventStopPropagation(e){
  e = e || window.event;
  if( e.stopPropagation){ // tous les navigateurs sauf IE avant ver. 9
    e.stopPropagation()
  }
  else{ // pour IE avant ver. 9
    e.cancelBubble = true;
  }
}
var oLogo = document.getElementById('logo_dvp');
// blocage du click sur la DIV conteneur
oLogo.onclick = function(e){
  eventStopPropagation(e);
  alert('Clic sur le logo');
}
// commande de'affichage de la DIV
var oBtn = document.getElementById('open_popup');
oBtn.onclick = function(e){
  eventStopPropagation(e);
  oLogo.style.display = 'block';
};
// Gestion du click sur le BODY
document.documentElement.onclick = function( e){
  // on masque le Logo
  oLogo.style.display = 'none';
};

Citation:

Bon puisqu'ici on ne peut proposer un règlement pour un travail effectué, ...

tu peux toujours faire un don aux restos du coeur ;)