Condicional IF en jQuery

Question

Buenas,

La finalidad de este código es comprobar si un registro (número), enviado mediante el form, existe en la BBDD. El botón submit (que se encuentra invisible) ha de visualizarse en pantalla si se confirma que el registro introducido existe en la BBDD.

Ocurre que el input submit desaparece de pantalla unicamente cuando se introduce un registro en el input text y luego se borra.

No entiendo porque el condicional de este código jQuery no aplica como pienso que debiera.

El código se encuentra dividido en 2 archivos.

Archivo 1 -- JAVASCRIPT + HTML :

$(document).ready(function() {

document.seleccionar.modificar.style.visibility = "hidden";
                         
      var consulta;
             
      $("#id").focus();
                                                 
      $("#id").keyup(function(e){
             
             consulta = $("#id").val();
                                      
             $("#resultado").delay(100).queue(function(n) {      
                                           
                  $("#resultado").html('<img src="imagenes/loading/ajax-loader.gif" />');
                                           
                        $.ajax({
                              type: "POST",
                              url: "comprobar.php",
                              data: "b="+consulta,
                              dataType: "html",
                              error: function(){
                                    alert("Error petición ajax");
                              },
                              
success: function(data){  
        
$("#resultado").html(data);        
n();
        
if (data == 1){
document.seleccionar.modificar.style.visibility = "visible"; 
}
}
                  });
                                           
             });
                                
      });
                          
});

-------------------------------------------------------------

<form name="seleccionar" id="seleccionar" action="modificar.php" method="post">
    <input type="int" required id="id" name="id" placeholder="Introduce ID..." value="" />
 <span id="resultado"></span>
    <input type="submit" id="modificar" name="modificar" value="Modificar" /><br><br/>  
</form>

Archivo 2 -- PHP :

<?php
      $user = $_POST['b'];
       
      if(!empty($user)) {
            comprobar($user);
      }
       
      function comprobar($b) {
   
   include("conexion_db.php");
   
   $query = mysqli_query($conexion, "SELECT * FROM formulario WHERE id = '".$b."'");        
   
            $contar = mysqli_num_rows($query);
                
            if($contar == 0){
                  echo "<span><img src=\"imagenes\web\action_delete.png\"></span>";    
            }else{
                  echo "<span><img src=\"imagenes\web\action_check.png\"></span>";
            }
   
   echo json_encode($contar);
      }     
?>

Agradeceria si alguien puediera indicarme el motivo por el que el input submit no se visualiza cuando se ejecuta la condición. Gracias de antemano.

Answer 1

EDIT

He reproducido el escenario y el código funciona, excepto en los casos en que introducía el valor 0 en el input o cuando el mismo se quedaba en blanco. El motivo es que, en el antiguo código PHP, en esos casos se creaba un objeto JSON inválido y la petición Ajax retornaba un parse error. Para evitarlo, he mejorado el código PHP, obligándolo a crear siempre un json válido. Verás que, si no se producen valores, el código PHP retornará un json con los valores establecidos a null. Tú puedes cambiar esos valores por otros, que te pueden servir para manejar los nulos. Es algo en lo que no se piensa, sin embargo, el usuario puede introducir cualquier cosa en el input y hay que manejarla adecuadamente.

También he mejorado la forma de obtener los valores del objeto json, usando: data.img y data.contar.

En la parte HTML he dedicado un diva la imagen, porque en las pruebas, la imagen se me colocaba encima del input, al estarla poniendo en el mismo elemento. Ese cambio lo puedes obviar si lo deseas así.

Mi console.log arroja datos como estos:

{contar: "1", img: "action_check.png"}

O bien:

{contar: "0", img: "action_delete.png"}

O bien, cuando se introduce 0 en el input o se deja en blanco:

{contar: null, img: null}

Y muestra imágenes de prueba que he puesto para cada caso.

Si no te funciona, entonces sería un problema de ruta del archivo que pones en la url de la petición Ajax o por otro motivo ajeno al código.

Debajo, dejo el código modificado.

---

Redactado una respuesta me permitiré hacer algunas indicaciones sobre el código.

1. $(document).ready(function() {... es obsoleto desde jQuery 3 (ver esta pregunta). Lo cambiaremos por $(function() {....
2. Manejar las peticiones Ajax solamente con success: function(data){ ... no es recomendable y success a su vez también es obsoleto. Lo cambiaremos por done e incluiremos controlar el código en caso de que la petición falle, usando fail.
3. Aplicaremos cambios usando el id del elemento.
4. Como decía en los comentarios, haremos echo una sola vez con todos nuestros datos y luego leeremos el JSON desde jQuery y actuaremos en consecuencia. Haciendo esto aplicamos una regla básica del uso de jQuery/Ajax: hacer peticiones al servidor en background y manejar la respuesta desde la misma página en que fueron hechas sin tener que refrescar. El problema de hacer echo varias veces en el PHP es que no tendrás un control estricto de la respuesta que vas a recibir.

---

HTML / JS

$(function() { 

  $("#modificar").hide();
  var consulta;
  $("#id").focus();                                                     
  $("#id").keyup(function(e){
         consulta = $("#id").val();
         $("#resultado").delay(100).queue(function(n) {       
              $("#resultado").html('<img src="imagenes/loading/ajax-loader.gif" />');

                    var request = $.ajax({
                      url: "comprobar.php",
                      method: "POST",
                      data: "b="+consulta,
                      dataType: "json"
                    });

                    request.done(function( data ) {
                        console.log(data);
                        img=data.img;
                        contar=data.contar;
                        imagen='<img src="imagenes/web/'+img+'/">';
                        $("#imagen").html(imagen);                               

                        n();

                        if (contar == 1){

                              $("#modificar").show();

                        }else{

                              $("#modificar").hide();

                        }

                    });

                    request.fail(function( jqXHR, textStatus ) {
                      alert( "Error petición Ajax: " + textStatus );
                    });         
        }); 
    });    
});

<form name="seleccionar" id="seleccionar" action="modificar.php" method="post">
<input type="int" required id="id" name="id" placeholder="Introduce ID..." value="" />
<span id="resultado"></span>
<input type="submit" id="modificar" name="modificar" value="Modificar" /><br><br/>  
<div id="imagen"></div> 
</form>

---

PHP

<?php
      $user = $_POST['b'];

      if(!empty($user)) {

            $datos=comprobar($user);

      }else{
            /*
                *Hay que prever que no se envíen datos
                *construir un json que sea válido
                *los valores pueden ser otros
            */
            $datos=array("contar"=>null, "img"=>null); //Aquí puedes poner en vez de null un nombre de imagen válido: "img"=>"una_imagen.png"

      }

      /*Imprimimos el json*/
      header('Content-Type: application/json');
      echo json_encode($datos);


      function comprobar($b) {
            include("conexion_db.php");

           $query = mysqli_query($conexion, "SELECT * FROM formulario WHERE id = '".$b."'");        

           $contar = mysqli_num_rows($query);

           if($contar == 0){ 

                $datos=array("contar"=>$contar, "img"=>"action_delete.png"); 

           }else{ 

                $datos=array("contar"=>$contar, "img"=>"action_check.png"); 
           } 

           return $datos;

      }     
?>

Nota: Esta consulta "SELECT * FROM formulario WHERE id = '".$b."'" es vulnerable a Inyección SQL, para dar seguridad al código, considera el uso de consultas preparadas: "SELECT * FROM formulario WHERE id = ?" pasando aparte el valor de $b usando métodos existentes para ello.

Answer 2

Buenas, habría que ver cual es la funcionalidad de la funcion "n" , por si estas haciendo algo ahí que evite que continue la ejecución del codigo.

Como consejo, deberías asegurarte que el PHP devuelve lo que esperas, para eso, prueba con el console.log();

Mi propuesta de codigo es:

success: function(data){  
  console.log('Data que devuelves => '+data);             
  $("#resultado").html(data);                               
  n();  //Explicar que hace esta funcion??

  if (data == 1){
   $('#modificar').css('display','block');
  }
}

Suerte,