Load Ajax when starting page and change results when performing search

Question

Load Ajax when starting page and change results when performing search

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

this input #search performs the search for the value in my database from my database I pull a line Like the Rows that I show in #resultado:

I want that when loading the page: I loaded the last 10 results created, I already ordered it in the Mysql with the ORDERBY conditions. Now, when I start the web it obviously does not show any results, since I do not execute the jquery that is activated when I click on the input submit. My problem is only in the JQUERY that I can not condition it: Run when loading the web and also perform the search when you get the value and click on submit.

I clarify that I am a Rookie in JQUERY, I have been in San Google for more than 6 hours, I would not have recourse to you if I had not looked for it or made an effort, thank you very much, I will be reading you.

* NOTESE THAT HAD ALREADY CONDITIONED IF IT WAS NULL # search preloaded the page, but did not perform the search.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        var consulta;
         //hacemos focus al campo de búsqueda
        $("#busqueda").focus();

        //comprobamos si se pulsa una tecla
        $("#buscar").click(function(e){

              //obtenemos el texto introducido en el campo de búsqueda
              $("#buscar").click(consulta = $("#busqueda").val());

              //hace la búsqueda
              $.ajax({
                    type: "POST",
                    url: "buscar.php",
                    data: "b="+consulta,
                    dataType: "html",
                    beforeSend: function(){
                          //imagen de carga
                          $("#resultado").html("<p align='center'><img src='ajax-loader.gif' /></p>");
                    },
                    error: function(){
                          alert("error petición ajax");
                    },
                    success: function(data){
                          $("#resultado").empty();
                          $("#resultado").append(data);

                    }
              });
        });
});
  </script>

<input type="text" name="" id="busqueda" value="">
  <input type="submit" name="" id="buscar">
  <div id="resultado">
<div class="row">
<div class="cols">SUPUESTO ID 001</div>
<div class="cols">DESCRIPCION PRECARGADO IMAGINARIAMENTE 001</div>
<div class="cols">PRECIO PRECARGADO IMAGINARIAMENTE 001</div>
</div>
<div class="row">
<div class="cols">SUPUESTO ID 002</div>
<div class="cols">SUPUESTA DESCRIPCION 002</div>
<div class="cols">SUPUESTO PRECIO 002</div>
</div>
</div>

jquery ajax

asked by Marco Torres 25.03.2018 в 05:54

source

2 answers

I do not upload the file from the css file [duplicated] motion control

score 0 · Answer 1

Hello @ Marco my recommendation is that you do a function with this to which you will pass as a parameter the query therefore something like

function getResultado(consulta){

 $.ajax({
  url: '',
  method: 'post',
  data:{b : consulta},
  beforeSend... (todo lo demás)
 })

}

This function is placed outside the document ready and you call it in your .click of the input search.

$('#buscar').click(function(e){
 //Esto sirve para que no realicé ninguna acción predeterminada
 e.preventDefault();

 //Tomas el valor de la búsqueda
 var b = $('#busqueda').val();

 //ahora llamas a la función y le pasas la consulta.
 getResultado(b);
})

Now, on the topic that you want to show the last 10 results loaded at the beginning, I do not see that you need to use the same function as the one to generate the search, you could do another one and execute it only once in the document ready or if you are using PHP, bring the data directly from the server.

score 0 · Answer 2

you can do it like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        //hacemos focus al campo de búsqueda
        $("#busqueda").focus();

          function buscar(consulta){          
              //hace la búsqueda
              $.ajax({
                    type: "POST",
                    url: "buscar.php",
                    data: "b="+consulta,
                    dataType: "html",
                    beforeSend: function(){
                          //imagen de carga
                  $("#resultado").html("<p align='center'><img src='ajax-loader.gif' /></p>");
                    },
                    error: function(){
                          alert("error petición ajax");
                    },
                    success: function(data){
                          $("#resultado").empty();
                          $("#resultado").append(data);

                    }
              });
           }

        //comprobamos si se pulsa una tecla
        $("#buscar").click(function(e){
           e.preventDefault();
          //obtenemos el texto introducido en el campo de búsqueda
          let consulta = $("#busqueda").val();
          //llamamos a buscar y le pasamos el texto
          buscar(consulta);
        });

  // buscamos el texto javascript apenas entra a la pagina
  buscar("javascript");
});
  </script>

<input type="text" name="" id="busqueda" value="">
  <input type="submit" name="" id="buscar">
  <div id="resultado">
<div class="row">
<div class="cols">SUPUESTO ID 001</div>
<div class="cols">DESCRIPCION PRECARGADO IMAGINARIAMENTE 001</div>
<div class="cols">PRECIO PRECARGADO IMAGINARIAMENTE 001</div>
</div>
<div class="row">
<div class="cols">SUPUESTO ID 002</div>
<div class="cols">SUPUESTA DESCRIPCION 002</div>
<div class="cols">SUPUESTO PRECIO 002</div>
</div>
</div>