La función se ejecutará del DOM de id 'usuario' en cada click.
Como indicas es un <select/>
que llamará a la función onClick
en cada evento de 'click'
.
Escogiste esta opción por motivo 'X', independientemente de la elección bajo este contexto deseas controlar de que el evento no se dispare en cada click
al <select/>
.
Puedes atacar el problema usando semáforos, poner bloqueos, con observadores, etc.
Yo voy a ofrecerte una mezcla de intento de semáforo con un intento de observador cómo primera opción, tal vez un poco más compleja comparada a la opción número dos.
Y de segunda opción una un poco más económica en código, pero con un inconveniente que puedes notar si realizas algunas pruebas de esfuerzo o estrés al <select/>
(no estoy seguro si ocurra algún error -tienes que hacer la prueba de estrés tu mismo).
Mayor detalle en los comentarios del código.
Opción Uno
function llenaUsuario(sucursal, dFec, hFec) {
var request = $.ajax({
url: 'getUsuario.php',
method: 'POST',
data: {sucursal: sucursal, dFec: dFec, hFec: hFec},
dataType: 'html',
error: function(){
alert('error petición ajax');
},
});
request.done(function( msg ) {
// lo primero es capturar el html() dentro del <select/> usuario
// vamos a limpiar el select de espacios, saltos de linea y tabulaciones (OJO yo hago esto por que no tengo idea de que formato de texto del html entrega tu servicio)
// si tu conoces el formato de respuesta de tu servicio y es siempre el adecuado no es necesario que limpies.
// Básicamente lo que haré es comparar el html anterior con el actual, si son iguales entonces no voy actualizar el contenido del <select/> usuario
var htmlAnteriorSelectUsuario = $('#usuario').html(); // recuperamos el contenido ANTERIOR
var htmlActualizarSelectUsuario = msg; // recuperamos el contenido ACTUALIZAR
// como digo lo de abajo es por que no tengo idea del formato de tu servicio entre las etiquetas opcion, usalo si tienes problemas con el formato de las opciones
// htmlAnteriorSelectUsuario = htmlAnteriorSelectUsuario.replaceAll('\n','').replaceAll(' ','').replaceAll(' ','');
// htmlActualizarSelectUsuario = htmlActualizarSelectUsuario.replaceAll('\n','').replaceAll(' ','').replaceAll(' ','');
// Ahora comparo, si son diferentes pues actualizo el contenido de usuario
// la función localeCompare() devuelve 0 si los string son iguales
if(htmlAnteriorSelectUsuario.localeCompare(htmlActualizarSelectUsuario) != 0) {
// actualizamos el contenido del <select/> por que fueron diferentes.
$('#usuario').html(msg);
}
});
}
Opción Dos
function llenaUsuario(sucursal, dFec, hFec) {
var request = $.ajax({
url: 'getUsuario.php',
method: 'POST',
data: {sucursal: sucursal, dFec: dFec, hFec: hFec},
dataType: 'html',
error: function(){
alert('error petición ajax');
},
});
request.done(function( msg ) {
// Recuperar el valor seleccionado del <select/> 'usuario' antes de actualizar el contenido con la respuesta del servidor
// luego mandar a llamar a .val(valorseleccionado);
var valorSeleccionadoPrevio = $('#usuario').val(); // capturamos el valor seleccionado previo a la actualización
$('#usuario').html(msg); // actualizamos el contrenido html del <select/>
$('#usuario').val(valorSeleccionadoPrevio); // cargamos el valor seleccionado previamente como valor del <selec/>
});
}
Espero esto pueda ayudarte a solucionar tu problema, suerte.
[Edición]
Dado lo conversado en los comentarios, tomaremos la opción 2 para crear una validación completa evaluando los valores de los 3 pre requisitos para llenaUsuario()
(mandar la petición AJAX una vez tenemos los tres valores)
$('#dFec').change(function() {
// acciones previas...
validarDatos();
// otras acciones...
});
$('#hFec').change(function() {
// acciones previas...
validarDatos();
// otras acciones...
});
$('#sucursal').change(function() {
// acciones previas...
validarDatos();
// otras acciones...
});
function validarDatos() {
var dFec = $('#dFec').val();
var hFec = $('#hFec').val();
var sucursal = $('#sucursal').val();
if( isValidValue(dFec) &&
isValidValue(hFec) &&
isValidValue(sucursal) ) {
llenaUsuario(sucursal, dFec, hFec); // mandamos a llamar a la función de la opción 2
}
}
// si el valor es valido o no.
function isValidValue(valueToEvaluate) {
if(valueToEvaluate != null &&
valueToEvaluate != undefined &&
valueToEvaluate.length > 0) {
return true;
}
return false;
}