0

Tengo una vista que me va a mostrar opciones para buscar, esas opciones se representan a traves de un select a medida que selecciono me salen las opciones mi vista en HTML es esta:

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel panel-heading"><h4>Busqueda de pedidos</h4></div>
                <div class="panel-body">
                    @include('mensajes.validation')
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                            @include('administracionpedidos.todopedidos.partials.partialbusqueda')
                        </div>
                        <div id="fechad" class="">
                            </br>
                            <!--busqueda por fecha-->
                            <div id="fecha" class="" >
                            @include('administracionpedidos.todopedidos.partials.partialfecha')
                            </div>
                            <!--busqueda por fecha y currier-->
                             <div id="curriertienda" class="" >
                                 <div id="currier">
                                 @include('administracionpedidos.todopedidos.partials.partialcurrier')
                                 </div>
                                 <div id="tienda">
                                  @include('administracionpedidos.todopedidos.partials.partialtienda')
                                 </div>
                             </div>
                        </div>
                        <div id="ordenreferencia">
                            <!--busqueda por # de orden y # de referencia-->
                            <div id="orden" class="" >
                                @include('administracionpedidos.todopedidos.partials.partialorden')
                            </div>
                            <div id="referencia" class="" >
                                @include('administracionpedidos.todopedidos.partials.partialreferencia')
                            </div>
                        </div>
                        <div class="row">
                        <div id="btnbuscar" class="">
                            </br>
                            {!! Form::button('Buscar',['id'=>'buscar','class'=>'btn btn-primary col-lg-12 col-md-12 col-sm-12 col-xs-12']) !!}
                        </div>
                        </div>
                    </div>
                    </br>
                    </br>
                    <hr  style="color:#000000;" />
                    <div class="table table-responsive">

                        <table id="todospedidos" class="table">
                            <thead>
                                <tr>
                                    <th># Pedido</th>
                                    <th>Referencia</th>
                                    <th>Tienda</th>
                                    <th>Nombre cliente</th>
                                    <th>Apellido cliente</th>
                                    <th>Transporte</th>
                                    <th># de envio</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Esa vista es manipulada completamente a traves de Jquery que me coloca los objetos responsive de acuerdo a la opcion que yo elija mi JS es este:

var $buscarpor=$("#buscarpor");
var $curriertienda=$("#curriertienda");
var $ordenreferencia=$("#ordenreferencia");
var $fechad=$("#fechad");
var $fecha=$("#fecha");
var $tienda=$("#tienda");
var $currier=$("#currier");
var $orden=$("#orden");
var $btnbuscar=$("#btnbuscar");
var $buscar=$("#buscar");
var $referencia=$("#referencia");
var $todospedidos=$("#todospedidos");
var $fechadesde=$("#fechadesde");
var $fechahasta=$("#fechahasta");
var $transporte=$("#transporte");
var $ntienda=$("#ntienda");
var $norden=$("#norden");
var $nreferencia=$("#nreferencia");
var $alert=$("#alert");

$fechad.hide();
$curriertienda.hide();
$ordenreferencia.hide();
$btnbuscar.hide();

$buscarpor.change(function(){
 var $opcion=$buscarpor.val();

   /*Este Switch hace que la vista todopedidos sea completamnete adaptatiba ademas de hacer validacion de los campos
   * y buscara en la base de datos para lista*/

   switch ($opcion)
   {
       /*Validar y buscar fecha*/
       case '1':
           $curriertienda.hide();
           $ordenreferencia.hide();
           $fechad.show();
           $btnbuscar.show();
           $fecha.attr('class','col-lg-8 col-md-8 col-sm-8 col-xs-8');
           $btnbuscar.attr('class','col-lg-4 col-md-4 col-sm-4 col-xs-4');

           $buscar.click(function(){
              alert("Busco por fecha");
           });
           break;

           /*Validar y buscar fecha y transporte*/
       case '2':
           $tienda.hide();
           $ordenreferencia.hide();
           $fechad.show();
           $fecha.show();
           $curriertienda.show();
           $currier.show();
           $btnbuscar.show();
           $fecha.attr('class','col-lg-4 col-md-4 col-sm-4 col-xs-4');
           $curriertienda.attr('class','col-lg-4 col-md-4 col-sm-4 col-xs-4');
           $btnbuscar.attr('class','col-lg-4 col-md-4 col-sm-4 col-xs-4');

           $buscar.click(function(){
               alert("Busco por transporte");
           });
           break;

Bien como les he comentado es una vista que se ve de esta forma:

Vista 1

Vista 2

A medida que voy haciendo clic al select que dice "Buscar por" me muestra opciones para ir mostrando campos para buscar.

Alli todo bien de manera visiual ahora el dolor de cabeza es que si le doy por ejemplo a la primera opcion que dice buscar por: fecha, el me muestra un alert que dice: alert("Busco por fecha"); si ahora le doy clic al select que dice buscar por: Fecha y Transporte, entonces me muestra dos alerts, el anterior que dice "Busco por fecha" y despues me muestra el alert del caso 2 que es:alert("Busco por transporte");

No se que es lo que estoy haciendo mal por que los dos alerts se muestran es como que si no se ejecutaran los Case del Switch.

2 respuestas 2

1

desde mi punto de vista como que no me termina de convencer el

$buscar.click(function(){
          alert("Busco por fecha");
       });
$buscar.click(function(){
           alert("Busco por transporte");
       });

dentro de los case, podrias intentar dejar fuera del change la funcion "click" y hacer algo asi

$buscar.click(function(){
   var $opcion=$buscarpor.val();
    if($opcion == 1){
    alert("Busco por fecha");
    }
    if($opcion == 2){
     alert("Busco por transporte");
    }
  });
0

Eso ocurre porque estas asignando la primera vez tu alert currier 1 y posteriormente agregas currier 2 al mismo evento, por lo cual se agregan a la cola de funciones que ejecuta el evento click. Lo que tienes que hacer es sacar del evento onclick() el evento anteriormente agregado y meter la nueva función. Puedes usar la función unbind para versiones inferiores a 1.7 o en su caso off para versiones superiores.

1
  • Te recomiendo pasarte por la ayuda de Cómo responder para una mejor respuesta.
    – Kiko_L
    Commented el 21 mar. 2018 a las 15:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.