I have some conflict or error with AJAX. If I put a search engine in the header using AJAX, and activate the Javascript script, AJAX stops working and does not show any results. On the other hand, if I deactivate the javascript script, AJAX works again. What happens?
AJAX search engine in the menu:
<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>
search.php to process the AJAX search:
<?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, if I activate the following scripts, AJAX does not work. If I deactivate them, AJAX works perfect:
<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;
?>