[SOLUCIONADO] Problema con llenar input mediante jQuery y AJAX

[berkeleyPunk]

Buenas, nuevamente!

Lo que quiero hacer es introducir en un input text un contenido cualquiera, pero sin recargar la página, o sea, haciendo uso de AJAX.

En este sitio encontré un ejemplo básico para comenzar a usar AJAX mediante jQuery. Y es el que uso de ejemplo.

Todo va bien, si es un div o un textarea donde se ha de meter el contenido AJAX. Pero si es un input text, la cosa no funciona. He googleado y veo que muchos tropiezan con este problema, e igualmente veo que no hay respuestas directas al problema.

¿Por qué el imput no muestra el contenido?

Son dos documentos:
Documento 1:

Código PHP:

      $(document).ready(function(){
       $("#enlaceajax").click(function(evento)
       {
          evento.preventDefault();
          $("#destino").load("contenido.php");
       });
    })


    <a href="#" id="enlaceajax">Hacer funcionar a AJAX!</a>
    <div id="destino"></div>  
   

Documento 2, llamado contenido.php:

Código PHP:

  <?php
    echo "Hola mundo!";
?>   

Saludos!

[Alexis88]

Eso sucede pues, como dice en el manual oficial:

Iniciado por Manual oficial de jQuery

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.

Y un elemento <input> no posee dicha propiedad. Una de las formas posibles para lograr lo que buscas, es la siguiente:

Código Javascript:

$.ajax({
    url: "destino.php"
}).done(function(response){
    $("#destino").val(response);
});
 

Hay otras formas de lograrlo, ya es cuestión de que busques más.

Saludos

[berkeleyPunk]

Otra vez, perdón por responder tan tarde. La misma cosa, me traigo el trabajo a casa...

Definitivamente dejé a un lado el ejemplo de AJAX con el que estaba trabajando. Googlé un poco y me encontré con otra forma, que es un poquillo más personalizable, que coincide con el código que muestras, maestro. Y funciona bien.

Código PHP:

  $(document).ready(function() 
{                     
    $("#boton").click(function(){ 
        var formulario = $("#formulario").serializeArray(); 
        $.ajax({ 
            type: "POST", 
            dataType: "json", 
            url: "contenidoAjax.php", 
            data: formulario, 
        }).done(function(respuesta){ 
            $("#mensaje").html(respuesta.mensaje); 
        }); 
    }); 
});  
   

De tal forma que en el archivo contenidoAjax.php hago una actualización de la BD:

Código PHP:

      if( isset($_POST["inputDia"]) ) 
    { 
        $dia = $_POST["inputDia"]; 
        $consulta = "UPDATE registros SET dia='$inputDia' WHERE email='$email'"; 
        $connection  = new mysqli("localhost", "root", "", "mi_bd"); 
        $respuesta   = new stdClass(); 
         
        if( $connection->query($consulta) ) {$respuesta->mensaje = "Se guardó correctamente";} 
        else {$respuesta->mensaje = "ERROR!";} 
 
        echo json_encode($respuesta); 
    }  
   

Maestro, Alexis88, con esto basta y se actualizan los nuevos datos en la BD .


Pero hay otro problemilla con esto. Una vez que ya se ejecutó AJAX y se guardaron los datos correctamente, el input que muestra el día en pantalla, sigue mostrando el día guardado anteriormente y no el que se acaba de actualizar.

¿Existe alguna forma, con AJAX, de que se actualice el contenido del input en cuestión?


Saludos!

[Alexis88]

¿Y en qué parte asignas el nuevo valor al <input> en cuestión?

[berkeleyPunk]

Iniciado por Alexis88

¿Y en qué parte asignas el nuevo valor al <input> en cuestión?

...
...
...


Buena pregunta. Pues mira, en el 1er documento está así:

Código PHP:

  <input id="inputDia" name="inputDia" value="' . $dia  . '">;  
   

Y en atención a tu pregunta, acabo de modificar el archivo contenidoAjax.php sólo en la siguiente línea:

Código PHP:

              $respuesta->mensaje = 'Tus datos se guardaron correctamente. <script type="text/javascript"> var dia = document.getElementById("inputA1"); dia.value = "' . $dia . '"; </script>';  
   

Pero con este cambio no se actualiza nada .

[Alexis88]

¿El <input> en cuestión está en el archivo desde el que realizas la petición asíncrona, verdad? Si es así, bastaría con que en la sección del método Ajax en donde procesas la respuesta, asignes el nuevo valor al <input>. Sería bueno que el dato a insertar lo adhieras al objeto que devuelves para que así lo tomes y asignes al <input>.

Saludos

[berkeleyPunk]

Iniciado por Alexis88

...bastaría con que en la sección del método Ajax en donde procesas la respuesta, asignes el nuevo valor al <input>....

Pues eso es lo que estaba intentando hacer, como te comenté anteriormente, pero no jalaba la cosa.

Unas 15 aspirinas después hallé el problema. Es decir, mediante JS ponía la instrucción para que se pusiera un valor determinado al input, pero no lo hacía, ¿por qué? Resultó que la variable que le mandaba no existía. Intenté todo lo que estaba a mi alcance. Abrir sesión, intentar pasar el valor de una variable PHP a JS, de JS a PHP , todo, y nada. Como el ejemplo AJAX sobre el que trabajaba hacía uso de la clase mysqli, y como era la 1ra vez que la usaba, la mandé al diablo y modifiqué el código para trabajar con los viejitos mysql_query(), mysql_fetch_array()... etc.

¿Y esto qué tiene que ver con que el código reconociera la variable que guardaba el día? Pues si no reconocía dicha variable, pues hice una consulta para sacar de la BD nuevamente dicho dato y asignarlo a la variable y así pasarla al input.


Saludos y hasta luego!





Nota. A veces pienso que la gente piensa que yo regalo los puntos aquí en Foros del Web. Porque en cada post reparto por todos lados. Quiero justificarme hoy, porque al parecer la respuesta a la pregunta de este post, la encontré yo solo. Pero no es así. Porque es el diálogo con los otros, con los otros foreros, aquello mediante lo cual me permite, nos permite a todos encontrar las respuestas. Si no te dan una solución clara y puntual, no importa, pero te hacen pensar. Y eso es más bien lo que uno quiere, no tanto la solución al problema. Claro, uno espera una solución rápida y puntual sobre la duda o el error que nos carcome, pero aunque nadie te dé una respuesta clara, lo verdaderamente valioso es que comience el movimiento en tu estado de cosas. Es decir, que alguien te dé posibilidades, que aunque no funcionen, te ayuden al menos a moverte, a salir de estancamiento horrible de un error de programación. Y eso vale, y mucho.