[Résolu] Evenement onchange ne fonctionne pas

Question

phico

26 Apr 2013 à 16:35

Bonjour,

Voici mon soucis.

Je recherche via un formulaire un client. J'encode quelques caractères de son nom et via jquery et autocomplete, j'affiche son numéro dans cette zone de recherche.

Je souhaite, via un evenement javascript (onchange), afficher le nom et prénom dans les zones suivantes du formulaire. Mais cet évènement ne s'enclanche pas Smiley decu

Merci pour votre aide.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 

<?PHP
if ( isset($_GET['no_cli']) )
	{
	$no_cli=$_GET['no_cli'];
	$query=mysql_query("SELECT * FROM tiers where tie_no = '$no_cli';"); 
	if ( ! $query )
		die ('mysql_query error SELECT tiers' . mysql_error());
	$row=mysql_fetch_array($query);
	if ( ! row )
		die ('mysql_query error SELECT tiers' . mysql_error());
	$nom=$row['tie_nom'];
	$prenom=$row['tie_prenom'];
	}
else
	{
	$no_cli='';
	$nom='';
	$prenom='';
	}
	

?>

	<form action='' method='get'>
		<p><label>Client :</label><input type='text' name='numero' id='cherche' 
		onChange="location.href('autocpl3.php?no_cli='+this.value)"	value='<?PHP echo $no_cli ?>'></input></p>
		<p><label>Nom :</label><input type='text' name='nom' value='<?PHP echo $nom ?>'></input></p>
		<p><label>Prénom :</label><input type='text' name='prenom' value='<?PHP echo $prenom ?>'></input></p>
		
		
	</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>	
<script type="text/javascript">
$(function() {
	
	//autocomplete
	$("#cherche").autocomplete({
		source: "getautocomplete.php",
		minLength: 3,
		
		select : function(event, ui){ 
        $('#description').append( ui.item.value ); 
    }
	});				

});
</script>
</body>
</html>

mini-truc

26 Apr 2013 à 16:59

Bonjour, je pense que tu n'es pas dans la bonne section, ensuite pas besoin d'un "onchange" sur un autocomplete ; tous se fait la dedans :


select : function(event, ui){ 
//id(ui.item.champs)
//id2(ui.item.champs2)
//....
}

http://jqueryui.com/autocomplete/#remote

phico

26 Apr 2013 à 17:30

Merci pour ta réponse mini-truc Smiley cligne

J'essaie donc d'utiliser le retour de jquery autocomplete. Le résultat n'est pas encore là. Le numéro du client apparait mais pas le nom. Un pbm de syntaxe ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 

<?PHP
include ("./include/mes_fonctions.php"); 
open_db();

if ( !isset($_PUT['no_cli']) )
	{
	$no_cli='';
	$nom='';
	$prenom='';
	}
	

?>

	<form action='' method='put'>
		<p><label>Client :</label><input type='text' name='numero' id='cherche' 
		value='<?PHP echo $no_cli ?>'></input></p>
		<p><label>Nom :</label><input type='text' id='nom' name='nom' value='<?PHP echo $nom ?>'></input></p>
		<p><label>Prénom :</label><input type='text' name='prenom' value='<?PHP echo $prenom ?>'></input></p>
		
		
	</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>	
<script type="text/javascript">
$(function() {
	
	//autocomplete
	$("#cherche").autocomplete({
		source: "getautocomplete.php",
		minLength: 3,
		
		select : function(event, ui)
		{ 
        $('#cherche').append( ui.item.value ),
		$('#nom').append( ui.item.nom )
		; 
		}
	});				

});
</script>
</body>
</html>

mini-truc

26 Apr 2013 à 17:34

- Peux tu nous afficher un extrait de ce que te retourne getautocomplete.php ?

- Dans ta fonction autocomplete tu ne sites pas non plus le type (json? post?) je ne suis pas sur mais c'est possible que cela gene.

- Pas de message d'erreur en console ?

phico

26 Apr 2013 à 17:37

pas de message d'erreur, voici la source getautocomplete.php


<?php 
include ("./include/mes_fonctions.php"); 
open_db();

$term=$_GET["term"];  
$query=mysql_query("SELECT * FROM tiers where tie_nom like '%".$term."%' order by tie_nom "); 
if ( ! $query )
	die ('mysql_query error SELECT tiers' . mysql_error());
	
$json=array(); 
$return_json=array();
    
while($row=mysql_fetch_array($query))
{         
/*
   $json[] =  $row['tie_nom'].' '.$row['tie_prenom'].' '.$row['tie_no'];
*/   
	$row = array_map('utf8_encode', $row);

	$critere = $row['tie_nom'].' '.$row['tie_prenom'].' '.$row['tie_localite'];
	$json['value'] = $row['tie_no'];
	$json['nom'] = $row['tie_nom'];
	

	$json['label'] = $critere;

 
        array_push($return_json,$json);
					
}  


echo json_encode($return_json); 
flush();
exit;
?>

mini-truc

26 Apr 2013 à 17:39

Je ne parlais pas de la source au format script Smiley smile

excuse moi j'ai pas précisé mais quand tu affiches cette page dans un navigateur elle t'affiche quoi ?

phico

26 Apr 2013 à 17:47

Oups

voici le résultat avec un term = abr

[{"value":"1","nom":"Abraham","label":"Abraham Vodel\u00e9e"},{"value":"1202","nom":"Fabri","label":"Fabri S\u00e9verine Thuin"}]

mini-truc

26 Apr 2013 à 17:55

Ton JSON me semble juste ...

Autre question pourquoi fait tu "append" ? Ce sont des input tu peux faire .val()

A la ligne $('cherche').app..... tu finis par une virgule ? Essaie en mettant ';'

Sinon ton champs #cherche se complète correctement ?

phico

26 Apr 2013 à 18:03

si je supprime append, autocomplete ne fonctionne plus.

J'ai ajouté le ; mais sans succès.

Le champs cherche reprend bien le numéro du client après validation de la liste.

C'st donc le select qui coince


script type="text/javascript">
$(function() {
	
	//autocomplete
	$("#cherche").autocomplete({
		source: "getautocomplete.php",
		minLength: 3,
		
		select : function(event, ui)
		{ 
        $('#cherche').append( ui.item.value );
		$('#nom').append( ui.item.nom );
	
		}
	});				

});
</script>

mini-truc

26 Apr 2013 à 18:24

Ce qui me semble bizarre c'est qu'il te retourne correctement le premier champs et pas le deuxième...

As tu bien préciser :

 dataType: 'json',

mini-truc

26 Apr 2013 à 18:29

Non je viens de voir que ce n'est pas une obligation, par contre essaie de remplacer nom par label dans ta fonction autocomplete et dans ton json ; tous les exemples que j'ai pu lire était composé tel que "id", "value", "label"

phico

26 Apr 2013 à 18:34

oui vraiment curieux. Merci d'avoir essayé. Je vais déplacer le sujet dans le forum de javascript.

phico

27 Apr 2013 à 10:18

mini-truc, j'ai pu résoudre le problème en remplaçant append par val comme tu l'avais suggéré. Smiley smile

Sujet clos

Développement web côté serveur, CMS

[Résolu] Evenement onchange ne fonctionne pas