Problem with Jquery and the structure switch case

0

I have a view that will show me options to search, those options are represented through a select as I select the options I leave my view in HTML is this:

 <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>

That view is completely manipulated through Jquery that places me responsive objects according to the option that I choose my JS is this:

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;

Well as I have said, it is a view that looks like this:

As I click on the select that says "Search by" shows me options to go showing fields to search.

Alli well in a visual way now the headache is that if I give for example the first option that says look for: date, he shows me an alert that says: alert ("I search by date"); if I now click on the select that says search by: Date and Transport, then it shows me two alerts, the previous one that says "I search by date" and then it shows me the alert of case 2 that is: alert ("I search for transport" );

I do not know what I'm doing wrong because the two alerts are shown as if they did not execute the Switch Case.

    
asked by jose angarita 21.03.2018 в 05:40
source

2 answers

0

That happens because you are assigning the first time your alert currier 1 and later you add currier 2 to the same event, which is why they are added to the function queue that executes the click event. What you have to do is remove the previously added event from the onclick () event and enter the new function. You can use the unbind function for versions under 1.7 or off for higher versions.

    
answered by 21.03.2018 / 16:23
source
1

from my point of view like I'm not convinced by the

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

Inside the cases, you could try to leave the "click" function out of the change and do something like that

$buscar.click(function(){
   var $opcion=$buscarpor.val();
    if($opcion == 1){
    alert("Busco por fecha");
    }
    if($opcion == 2){
     alert("Busco por transporte");
    }
  });
    
answered by 21.03.2018 в 06:11