11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je me décide enfin a poster ma première question je tourne en rond
depuis trop longtemps.

Un script jquery s'exécute lorsque je sors d'un champ input. il s'agit d'une fonction AJAX qui va chercher le nom du dossier saisi et l'affiche sous le champ input ou affiche "erreur" si la saisie ne correspond à aucun projet (cela pas de soucis).
Je souhaiterais Donc (et je n'y arrive pas) que le script ne s’exécute qu'a la condition que l'on ne clique pas sur le lien html (loupe) car ce lien permet d'afficher une liste de projet correspondant à une saisie partielle du nom du projet.

42803-exemple-bl.JPG

formulaire:

$tab=
   "<INPUT type=\"text\" name=\"".$p."\" id=\"".$p."\" size=\"10\" value=\"".$$p."\" >".
   "<a name=\"rech".$l."\" id=\"rech".$l."\" href=\"javascript:proj".$l.".popup(document.form_feuilledetemps.projet".$l.");\">".
   "<img src=\"../../images/rechercher.png\" alt=\"".$alang['Projet']."\" title=\"".$alang['Projet']."\" border=0 align=top width=24 height=24 /></a>".
  "<br>".
  "<div id=\"resprojet".$l."\">".$desc_projet."</div>"; 


code jquery

$(document).ready( function() {
	  // détection de la saisie dans le champ de recherche
	  $("#projet1").blur(function(){ //
	    $field = $(this);
	    $retour= 'res'+this.name;
	    $long=this.name.length;

	    $requete='&c='+this.name.substring(0,1)+'&p='+$('#projet'+$l).val(); 

	    $('#results').html(''); // on vide les resultats
	    $('#ajax-loader').remove(); // on retire le loader
	 
	    // on commence à traiter à partir du 2ème caractère saisie
	    if( $field.val().length > 1 )
	    {
	      // on envoie la valeur recherché en GET au fichier de traitement
	      $.ajax({
	  	type : 'GET', // envoi des données en GET ou POST
		url : 'ajax-search.php' , // url du fichier de traitement
		data : 'q='+$(this).val()+$requete , // données à envoyer en  GET ou POST
		beforeSend : function() { // traitements JS à faire AVANT l'envoi
			$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
		},
		success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
			$('#ajax-loader').remove(); // on enleve le loader
			$('#'+$retour).html(data); // affichage des résultats dans le bloc
		}
	      });
	    }
	  });
	});

Modifié par machina78 (14 Jan 2012 - 15:32)
Une piste

A priori, dans blur() tu vérifies où tu te trouves.

En gros, si tu te trouves sur ton élément à cliquer, tu stoppes tout, sinon tu laisses passé.

Voir du côté de event.target > http://api.jquery.com/event.target/

dans ton blur(), tu peux essayer un truc du style if (e.target.id == 'id_bouton') return;
sachant que tu rajoutes "e" (ou "event") ici > $("#projet1").blur(function(e){ //
je creuse je creuse mais j'avance pas....

"e.target.id" me renvoie l'id du champ input et non pas l'élément qui a récupéré le focus.

Avec un truc du genre $("a").click(function(){....}) je pourrais savoir si le bouton lien a été "activé" mais je ne parviens pas a imbriquer les différentes actions...

comment pourrais je récupérer la variable $clickid dans la partie principale du script ?


            [...]
            $('a').click(function(){
	    	
	    	$clickid=this.id;

	    });
            [...]

Modifié par machina78 (15 Jan 2012 - 10:00)
Hum, autre piste éventuellement ...

dans ton blur()

tu fais un $(document).click(function(e) { });

Et là, à priori, tu devrais avoir le bon target et tu peux tester si tu te trouves sur ton bouton ou non.

Tu as prévu quoi au passage si ils utilisent la touche "tab" puis font entré au bout de 2 sec par exemple ?