Fonctionnement de l'évènement Change

**Claude30120** · 12/12/2016, 23h21

Bonsoir
Je bute encore sur une spécificité de codage.

J'ai une liste déroulante de clients, traitée en autocomplétion, avec interrogation ponctuelle de la base de données en fonction des lettres saisies.
Au moment où un client est choisi, je veux afficher les numéros de téléphone et mail de ce client, après une interrogation dans la base, qui prend un certain temps.
Si un autre client est sélectionné, d'autres tel/mail sont affichés, avecnouvelle interrogation.
Si aucun client ne convient, une zone input simple permet de saisir un nouveau client. Et dans ce cas, il faut effacer les tel/mail précédemment affichés.

Je vous joins le code, mais il est long, voilà pourquoi j'ai essayé d'expliquer le problème.
Pour rechercher les Tel/mail, j'utilise la fonction $("#arg_idtiersLig").change(), qui est lancée au moment du choix du client (grâce à la ligne de source : $("#arg_idtiersLig").val(item.key).trigger("change"); ou la ligne de select : $("#arg_idtiersLig").val(ui.item.id).trigger("change"); c'est pas clair pour moi!! )
Pour effacer les Tel/Mail, j'ai mis une fonction EffaceTiers dans l'input arg_nvtiersLig du nouveau client.

Dans le cas où je cherche d'abord un client, puis, la recherche s’avérant infructueuse, je décide d'en créer un:
Avec surprise , je m'aperçois que $("#arg_idtiersLig").change() est lancée dès que je clique dans l'écran, avec le code du premier client recherché.
L'effacement de la zone de recherche avec EffaceTiers s'exécute aussi, mais, plus rapide, elle se termine avant et l'exécution de $("#arg_idtiersLig").change() avec l'ancienne valeur provoque le réaffichage des Tel/mail du dernier client recherché.

Pour moi, objet.change() doit être lancée en sortant de la zone si et seulement si il y avait changement. or ici, le changement a déjà provoqué le lancement de change() précédemment, avant la sortie de la zone.
Est-il normal que 'exécution soit relancée à la sortie, même s'il n'y a pas eu de nouvelle modification? Y a-t-il quelque chose qui m'a échappée? Je dois vous dire que le code provient d'un logiciel open et que je n'y comprend pas tout.
Y a-t-il une solution pour effacer Tel/Mail?

Merci si quelqu'un veut bien se pencher sur mon cas.
Claude

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<br>Recherche tiers 
<!-- Input text for third party with Ajax.Autocompleter (selectCompaniesForNewContact) -->
<input type="text" size="30" id="search_arg_idtiersLig" name="search_arg_idtiersLig" value="" />
<input type="hidden" name="arg_idtiersLig" id="arg_idtiersLig" value="-1" /><!-- Javascript code for autocomplete of field arg_idtiersLig -->
 
<script type="text/javascript">
	$(document).ready(function() {
			var autoselect = 0;
			var options = [];
			$("#arg_idtiersLig").change(function() {
						var obj = [{"method":"getContacts","url":"ajaxclient.php","htmlname":"contactid","params":{"add-customer-contact":"disabled"}}];
 
						$.each(obj, function(key,values) {
							if (values.method.length) {
								runJsCodeForEventarg_idtiersLig(values);
							}
						});							 
				});				
 
			// Function used to execute events when search_htmlname change  --  Interrogatiion pour telephone
			function runJsCodeForEventarg_idtiersLig(obj) {
					var id = $("#arg_idtiersLig").val();
					var method = obj.method;
					var url = obj.url;
					var htmlname = obj.htmlname;
					var response = "";
					$.getJSON(url,
						{
							action: method,
							id: id,
							htmlname: htmlname
						},
						function(response) {
							if (response != null) {
									var num = response.num;	
									$("#telmail").html(response.telmail);
									$("#telmail").css("visibility", "visible");
								};
							$("select#" + htmlname).html(response.value);  
						});
 
			};
 
			/* Interrogation pour liste des clients */
			$("input#search_arg_idtiersLig").autocomplete({
				source: function( request, response ) {
					$.get("/dolibarrv4/custom/CahierSuivi/suivi_client/ajaxcompanies.php", { arg_idtiersLig: request.term }, function(data){
					if (data != null)
						{
							response($.map( data, function(item) {
								if (autoselect == 1 && data.length == 1) {
									$("#search_arg_idtiersLig").val(item.value);
									$("#arg_idtiersLig").val(item.key).trigger("change");
								}
								var label = item.label.toString();
								var update = {};
								if (options.update) {
									$.each(options.update, function(key, value) {
										update[key] = item[value];
									});
								}
								var textarea = {};
								if (options.update_textarea) {
									$.each(options.update_textarea, function(key, value) {
										textarea[key] = item[value];
									});
								}
 
								return { label: label, value: item.value, id: item.key, update: update, textarea: textarea, disabled: item.disabled }
							}));
						}
						else console.error("Error: Ajax url /dolibarrv4/custom/CahierSuivi/suivi_client/ajaxcompanies.php has returned an empty page. Should be an empty json array.");
					}, "json");
				},
				dataType: "json",
				minLength: 1,
				select: function( event, ui ) {	
					$("#arg_idtiersLig").val(ui.item.id).trigger("change");							
					$("#search_arg_idtiersLig").trigger("change");	
				}
				,delay: 200
			}).data("ui-autocomplete")._renderItem = function( ul, item ) {
				return $("<li>")
				.data( "ui-autocomplete-item", item ) // jQuery UI > 1.10.0
				.append( '<a><span class="tag">' + item.label + "</span></a>" )
				.appendTo(ul);
			};
 
 
		});</script><br>
<br>Nouveau tiers 
 <input id="arg_nvtiersLig" type="text" name="arg_nvtiersLig" value="nouveau tiers"  style="color:#C0C0C0;" onclick="EffaceTiersarg_idtiersLig(this)" ><script> 
 function EffaceTiersarg_idtiersLig(o) {	
		if ( o.value == "nouveau tiers") {
						document.getElementById("arg_nvtiersLig").style.color="#000000"; 
						document.getElementById("telmail").innerHTML=""; 
						document.getElementById("telmail").style.visibility = "hidden";
			}
 
 };</script><br><br><br>
<span id=telmail></span><br><span id="spantierstel" style="size:100%;visibility:hidden" >Tel:</span><input id="tierstel" class="flat"  value="" type="text" name="arg_telLig"  style="size:100%;visibility:hidden" ><span id="spantiersmail" style="size:100%;visibility:hidden" >Mail:</span><input id="tiersmail"  class="flat"  value="" type="text" name="arg_mailLig"  style="width:100%;visibility:hidden"></td><td  rowspan=2 bgcolor="#FAF0E6"  align=left size="2,2%" >

Vous faut-il le code php des deux process d'interrogation de la base de données pour la liste des cleint et pour le tel/mail?

**SpaceFrog** · 13/12/2016, 08h42

Ceci peut déclencher un change:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("select#" + htmlname).html(response.value);

Du coup je pense qu'il va falloir mettre un flag pour savoir si le change est du fait de l'utilisateur ou du code, et mettre un test if ...

**Claude30120** · 13/12/2016, 20h50

Merci SpaceFrog.

J'ai trouvé

Envoyé par SpaceFrog

Du coup je pense qu'il va falloir mettre un flag pour savoir si le change est du fait de l'utilisateur ou du code, et mettre un test if ...

J'ai modifié mon code en rajoutant une variable paramètre de fonction origine à change(origine ), runJsCodeForEventarg_idtiersLig (parma1, origine ). Dans cette dernière fonction, je teste pour eviter l'appel à ajaxclient.php si ce paramètre est renseigné.
Et ce paramètre est valorisé dans l'appel de trigger $("#arg_idtiersLig").val(item.key).trigger("change","interne");

Et ça marche.

Merci
Claude

nouveau code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<br>Recherche tiers 
<!-- Input text for third party with Ajax.Autocompleter (selectCompaniesForNewContact) -->
<input type="text" size="30" id="search_arg_idtiersLig" name="search_arg_idtiersLig" value="" />
<input type="hidden" name="arg_idtiersLig" id="arg_idtiersLig" value="-1" /><!-- Javascript code for autocomplete of field arg_idtiersLig -->
<script type="text/javascript">
        $(document).ready(function() {
                var autoselect = 0;
                var options = [];
                $("#arg_idtiersLig").change(function(origine) {
                        var obj = [{"method":"getContacts","url":"ajaxclient.php","htmlname":"contactid","params":{"add-customer-contact":"disabled"}}];                                                                                                                
                        $.each(obj, function(key,values) {
                                        if (values.method.length) {
                                                runJsCodeForEventarg_idtiersLig(values, origine);
                                        }
                                });                                                      
                });                             
                                                                    
                // Function used to execute events when search_htmlname change
                // Interrogatiion pour telephone
                function runJsCodeForEventarg_idtiersLig(obj, origine) {
                        if (origine != "") {
                                var id = $("#arg_idtiersLig").val();
                                var method = obj.method;
                                var url = obj.url;
                                var htmlname = obj.htmlname;
                                var response = "";
                                $.getJSON(url,
                                        {
                                                action: method,
                                                id: id,
                                                htmlname: htmlname
                                        },
                                        function(response) {
                                                if (response != null) {
                                                        var num = response.num; 
                                                        $("#telmail").html(response.telmail);
                                                        $("#telmail").css("visibility", "visible");
                                                        $("#arg_nvtiersLig").html("Nouveau tiers");
                                                };
                                                $("select#" + htmlname).html(response.value);  
                                        });
                                }
                                                                                
                        };
                });
</script>
 
 
<script type="text/javascript">
$(document).ready(function() {
        var autoselect = 0;
        var options = [];
                                
        /* Interrogation pour liste des tiers */
        $("input#search_arg_idtiersLig").autocomplete({
        source: function( request, response ) {
                $.get("/dolibarrv4/custom/CahierSuivi/suivi_client/ajaxcompanies.php", { arg_idtiersLig: request.term }, function(data){
                        if (data != null)
                        {
                                response($.map( data, function(item) {
                                        if (autoselect == 1 && data.length == 1) {
                                                $("#search_arg_idtiersLig").val(item.value);
                                                $("#arg_idtiersLig").val(item.key).trigger("change","interne");
                                        }
                                        var label = item.label.toString();
                                        var update = {};
                                        if (options.update) {
                                                $.each(options.update, function(key, value) {
                                                                update[key] = item[value];
                                                });
                                        }
                                        var textarea = {};
                                        if (options.update_textarea) {
                                                $.each(options.update_textarea, function(key, value) {
                                                        textarea[key] = item[value];
                                                });
                                        }       
                                        return { label: label, value: item.value, id: item.key, update: update, textarea: textarea, disabled: item.disabled }
                                }));
                        }
                        else console.error("Error: Ajax url /dolibarrv4/custom/CahierSuivi/suivi_client/ajaxcompanies.php has returned an empty page. Should be an empty json array.");
                }, "json");
                },
                dataType: "json",
                minLength: 1,
                select: function( event, ui ) { 
                        $("#arg_idtiersLig").val(ui.item.id).trigger("change", "interne");                                                      
                                $("#search_arg_idtiersLig").trigger("change", "interne");       
                        }
                        ,delay: 200
                }).data("ui-autocomplete")._renderItem = function( ul, item ) {
                return $("<li>")
                .data( "ui-autocomplete-item", item ) // jQuery UI > 1.10.0
                .append( '<a><span class="tag">' + item.label + "</span></a>" )
                .appendTo(ul);
        };
 
  });</script>
<br>
<br>Nouveau tiers 
 <input id="arg_nvtiersLig" type="text" name="arg_nvtiersLig" value="nouveau tiers"  style="color:#C0C0C0;" onclick="EffaceTiersarg_idtiersLig(this)" >
<script>  function EffaceTiersarg_idtiersLig(o) {       
                if ( o.value == "nouveau tiers") {
                                                document.getElementById("arg_nvtiersLig").style.color="#000000"; 
                                                document.getElementById("arg_nvtiersLig").value=""; 
                                                document.getElementById("telmail").innerHTML=""; 
                                                document.getElementById("telmail").style.visibility = "hidden";
                                                document.getElementById("search_arg_idtiersLig").value=""; 
                                                document.getElementById("arg_idtiersLig").value=""; 
                        }
                                                                
 };</script><br><br><br>
<span id=telmail></span><br><span id="spantierstel" style="size:100%;visibility:hidden" >Tel:</span><input id="tierstel" class="flat"  value="" type="text" name="arg_telLig"  style="size:100%;visibility:hidden" ><span id="spantiersmail" style="size:100%;visibility:hidden" >Mail:</span><input id="tiersmail"  class="flat"  value="" type="text" name="arg_mailLig"  style="width:100%;visibility:hidden"></td><td  rowspan=2 bgcolor="#FAF0E6"  align=left size="2,2%" >

Fonctionnement de l'évènement Change

jQuery

Vue hybride

Discussions similaires

Partager

Partager