1

Me sucede algún conflicto u error con AJAX. Si pongo en el header un buscador mediante AJAX, y activo los script de Javascript, AJAX deja de funcionar y no me muestra ningún resultado. En cambio si desactivo los script javascript, AJAX vuelve a funcionar. ¿Qué sucede?

Buscador AJAX en el menú:

<form class="form-inline my-2 my-lg-0" accept-charset="utf-8" method="POST">
  <!--FORMULARIO INPUT PARA BUSCAR MEDIANTE AJAX-->
  <input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search" name="busqueda" id="busqueda" value="" maxlength="30" autocomplete="off" onKeyUp="buscar();"/>

  <!--AQUÍ SE MUESTRAN LOS RESULTADOS DE AJAX-->
  <div id="resultadoBusqueda">   
</form>

buscar.php para procesar la búsqueda AJAX:

<?php
    //Archivo de conexión a la base de datos
    require('conexion.php');

    //Variable de búsqueda
    $consultaBusqueda = $_POST['valorBusqueda'];

    //Filtro anti-XSS
    $caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
    $caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
    $consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

    //Variable vacía (para evitar los E_NOTICE)
    $mensaje = "";

    //Comprueba si $consultaBusqueda está seteado
    if (isset($consultaBusqueda)) {

        $consulta = mysqli_query($con, "SELECT * FROM usuarios
        WHERE nombreUsuario COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'OR apellido1Usuario COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'OR CONCAT(nombreUsuario,' ',apellido1Usuario) COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'");


        //Obtiene la cantidad de filas que hay en la consulta
        $filas = mysqli_num_rows($consulta);

        //Si no existe ninguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
        if ($filas === 0) {
            $mensaje = "<p>No hay ningún usuario con ese nombre y/o apellido</p>";
        } else {
            //Si existe alguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
            //echo 'Resultados para <strong>'.$consultaBusqueda.'</strong>';

            //La variable $resultado contiene el array que se genera en la consulta, así que obtenemos los datos y los mostramos en un bucle
            while($resultados = mysqli_fetch_array($consulta)) {
                $nombre = $resultados['nombreUsuario'];
                $apellido = $resultados['apellido1Usuario'];
                //Output
                $mensaje .= '
                <a href="#" value="#">
                ' . $nombre . '
                ' . $apellido . '
                </a><br>
                </div>';

            };//Fin while $resultados

        }; //Fin else $filas

    };//Fin isset $consultaBusqueda

    //Devolvemos el mensaje que tomará jQuery
    echo $mensaje;
    ?>

Index.php, si activo los siguiente scripts, AJAX no funciona. Si los desactivo, AJAX funciona perfecto:

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="js/vendor/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


BUSCAR.PHP

    <?php
require('conexion.php');
$consultaBusqueda = $_POST['valorBusqueda'];
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);
$mensaje = "";
if (isset($consultaBusqueda)) {

    $consulta = mysqli_query($con, "SELECT * FROM usuarios
    WHERE nombreUsuario COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'OR apellido1Usuario COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'OR CONCAT(nombreUsuario,' ',apellido1Usuario) COLLATE utf8mb4_general_ci LIKE '%$consultaBusqueda%'");

    $filas = mysqli_num_rows($consulta);

    if ($filas === 0) {
        $mensaje = "<p>No hay ningún usuario con ese nombre y/o apellido</p>";
    } else {

        while($resultados = mysqli_fetch_array($consulta)) {
            $nombre = $resultados['nombreUsuario'];
            $apellido = $resultados['apellido1Usuario'];
            //Output
            $mensaje .= '
            <a href="#" value="#">
            ' . $nombre . '
            ' . $apellido . '
            </a><br>
            </div>';

        };//Fin while $resultados

    }; //Fin else $filas

};//Fin isset $consultaBusqueda

//Devolvemos el mensaje que tomará jQuery
echo $mensaje;
?>
5
  • 2
    ¿puedes poner todo el codigo de la pagina con problemas? Pareciera que estás teniendo problema a la hora de importar los js. Y cuando te refieres a desactivar AJAX ¿que quieres decir?. Pon tambien el codigo de la funciona buscar()
    – rfrp
    Commented el 15 jun. 2018 a las 14:57
  • 1
    Coloca todo el código que tienes en el final de tu body todos los <script> si tienes alguno en el head tambien colocales para poder ayudarte.
    – vicasas
    Commented el 15 jun. 2018 a las 15:00
  • 1
    la versión slim de jquery no incluye ajax ni efectos, habría que ver si no estás cargando dos jQuerys Commented el 15 jun. 2018 a las 18:55
  • Posible duplicado de $.ajax is not a function
    – user22721
    Commented el 16 jun. 2018 a las 15:54
  • Hola! Revisa esta respuesta te puede ser de utilidad es.stackoverflow.com/a/172792/22721
    – user22721
    Commented el 16 jun. 2018 a las 15:54

1 respuesta 1

2

tuve problemas similares a tu caso, pero necesito ver la funcion buscar que llamas, el problema es que utilizas javascript para llamar a tu ajax, y abajo estas activando otros scripts, por ejemplo, el que mas da problema es:

<script src="/js/vendor/jquery-slim.min.js">

el jquery muchas veces trae funciones activas en unas versiones y en otras no, por lo que si estas utilizando una version no compatible y llamas a una funcion por ejemplo $('input').iCheck que yo utilizaba, esta no era compatible con jquery version 3, puse otra version y si era compatible, pero me desactivaba otras funciones, asi que la opcion fue buscar otras versiones, hasta que probando utilice la version 2 y esta fue la que traia mas funciones... para hacer pruebas deberias depurar mediante la consola del navegador... pon inspeccionar elemento, consola y ahí te saldra donde encuentras el conflicto... te recomiendo Firefox para inspeccionar elementos.

3
  • hola jeanpitx, muchas gracias de antemano. He añadido el código de buscar.php a ver qué te parece que puede ser. ; )
    – ret
    Commented el 16 jun. 2018 a las 14:38
  • saludos @r84, en realidad me referia a onKeyUp="buscar();", veo que llamas a una funcion de javascript, pero gracias por poner el php, tambien será de ayuda. por cierto queria saber si hiciste la inspeccion de elementos ??
    – jeanpitx
    Commented el 16 jun. 2018 a las 16:17
  • Solucionado! En vez de poner el script: <script src="code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> he puesto el archivo: <script src="js/jquery-3.3.1.js"></script> Y FUNCIONA PERFECTO! ¡Gracias!
    – ret
    Commented el 17 jun. 2018 a las 19:33

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.