0

mi problema es el siguiente, tengo una vista en la que tengo un select que arrastra una consulta a una Base de Datos, el chiste de esta es que el usuario podrá seleccionar uno de los registros que aparecen en el select, posteriormente deberá dar clic en consultar ya que contiene aun mas información, ese a su vez deberá devolverle toda la información pero en la misma vista donde se encuentra el select, ya intente con ajax pero no me da, intente enviarlo a otra vista y en la vista principal le hice un include pero lógicamente no funciona porque no existe la variable, no se como debería hacerle, podrían orientarme o darme alguna ejemplo por favor.

El siguiente es mi formulario, necesito capturar lo que el usuario eligio en el select en ese momento. introducir la descripción de la imagen aquí

Mi script es el siguiente en el que por medio de Jquery lanzo mi peticion a mi controlador.

<script type="text/javascript">

jQuery (document).ready(inicia);
 function inicia(){
  jQuery('#search').on('click', function() {
       var select=$("#select").val();

   $value=select;

  $.ajax({

   type : 'get',

    url : "{{route('order')}}",

    data:{'mono':$value},

      success:function(data){
        $('tbody').html(data);
      }

    });

   });
}
</script>

y el siguiente es mi controlador en el cual recibo la peticion, ahora mi problema es que si se muestra por un momento pero no entiendo porque se recarga mi pagina despues de esto.

if($request->ajax()){

    $output="";

    $caja_consulta = $request->mono;
    $var = explode('*',$caja_consulta);
    $consulta = detailBults::where("mono",$var[0])->take(1)->get(); 

    if($consulta){
        foreach($consulta as $cons){
            $output='<tr>'.
            '<td for="id">'.$cons->mono.'</td>'.
            '</tr>'

            ;
        }
        return ($output);
    }
    }

Aqui esta mi codigo HTML

    <form action="#" method="GET">
  <div class="row">
    <div class="col-md-10">
    <div class="form-group">
    <label for="exampleFormControlSelect1">Seleccione la orden</label>
    <select class="form-control target" id="select" name="mono">
    <option value="" class="option">MONO  |  LineItem  |  Item</option>
             @foreach($order as $or)
                <option value="{{$or->mono}}*{{$or->Line}}*{{$or->PN}}" id="ido">{{$or->mono}} | {{$or->Line}} | {{$or->PN}} </option>
                @endforeach
    </select>
  </div>
    </div>

  </div>
<input type="submit" id="search" class="btn btn-info waves-effect w-md waves-light m-b-5" value="Consultar">

</form>
<table class="table table-bordered table-hover">

<thead>

<tr>

<th>ID</th>

<th>Product Name</th>

<th>Description</th>

<th>Price</th>

</tr>

</thead>

<tbody>

</tbody>

</table>
4
  • ¿Qué progreso llevas?, deberías de adjuntar el avance que dices que llevas. Commented el 6 feb. 2019 a las 14:46
  • @AarónGutiérrez ya edite mi pregunta para que se vea mi progreso. Commented el 6 feb. 2019 a las 16:24
  • ¿Podrías agregar el HTML también por favor? ya que veo que dices que tu página se está recargando. Commented el 6 feb. 2019 a las 16:29
  • Listo @AarónGutiérrez Commented el 6 feb. 2019 a las 16:33

1 respuesta 1

0

El problema de que se esté recargando es que tienes un <input type="submit">, una opción puede ser que hagas lo siguiente:

Primero, darle un id a tu formulario:

<form action="#" id="form-consulta" method="GET">

Después, con jQuery, en vez de hacer esto:

jQuery('#search').on('click', function() {

Hacer esto:

jQuery('#form-consulta').on('submit', function(e) {
   e.preventDefault();

   //Aquí el código adicional
});

Lo que pasa que al ser tu input de tipo submit, el formulario se dispara al hacer clic en el botón, entonces lo que debes de hacer es cambiar el evento de clic por uno de submit y agregarle que prevenga el comportamiento de esa acción que tiene por defecto con e.preventDefault();.

La otra opción sería que quitaras tu etiqueta <form> (ya que en realidad no te está sirviendo de mucho porque no estás enviando muchos datos), y reemplazar tu input por un <button type="button" id="search">Consultar</button>, de esta forma el evento si se quedaría como click.

1

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.