[SOLUCIONADO] No funciona el beforeSend en ajax

[plitre_sys19]

Hola estoy tratando de que aparezca un loader cuando los datos se están guardando, pero el problema es que no aparece, este es parte del código de js que utilizo:}

Código:

$("#agregarEmp").validate({
		rules:{
			cedula: {required: true, minlength:7, maxlength:10},
			....
		},
		messages:{
			cedula: "El campo es requerido",
			...
		},
		submitHandler: function(){
			var str = $("#agregarEmp").serialize();
				$.ajax({
				beforeSend: function(){
					$("#agregarEmp .ajaxLoader").show();
				},
				cache: false,
				type: "POST",
				dataType: "json",
				url:"include/funcionesAdmin.php",
				data:str,
				success: function (response){
					...

				}
			});
			return false;
		}
	});

Este es el código que tengo en html estoy utilizando bootstrap:

Código:

<div class="modal-body"><!--formulario para agregar personal-->
<form class="form-horizontal" role="form" id="agregarEmp">
<div class="form-group"><!--Label e input para el nro de cédula-->
<label for="cedula" class="col-sm-3 control-label">Cédula:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cedula" name="cedula"/>
</div>
</div>
<div class="form-group"><!--Label e input para la dirección-->
<fieldset id="ajaxLoader" class="ajaxLoader hide">
<img src="img/default-loader.gif">
<p>Espere un momento...</p>
</fieldset>
</div>

que debo de agregarle para que funcione el beforeSend?

[plitre_sys19]

Ya lo solucione, posteo la solución por si alguien le sucede lo mismo, lo que debe de hacer es quitarle la clase hide y luego agregarle show, así:

Código:

beforeSend: function(){
					$("#agregarEmp .ajaxLoader").removeClass('hide');
					$("#agregarEmp .ajaxLoader").addClass('show');
				},

[andresgarciadev]

enrealidad solo deberia ser necesario el

Código Javascript:

$("#agregarEmp .ajaxLoader").removeClass('hide');
 

ahora que si de casualidad tiene display none si dale el show()

Código Javascript:

$("#agregarEmp .ajaxLoader").removeClass('hide').show();