1

Acá te actualizo cómo me quedó el AJAX

 <script type="text/javascript">
                $(document).ready(function() {    
                    $('#subform-form').submit(function(event){   
                      event.returnValue = false;
                      event.preventDefault();   
                      var valNumber = $(this).val(numerosDispo);          
                        $.ajax({
                            type:"POST",
                            url: "refreshButton.php",
                            data: valNumber,
                            success: function(data) {
                                const dataJSON = JSON.parse(data);
                                const number = dataJSON.respuesta
                                $('#number-selected-input-id').val(number);
                            }
                        });
                        return false;
                      });              
                  });    </script>

Necesito que al apretar un boton se ejecute una sql en un input, la que guardo en refreshButton.php. AJAX me recarga la página al oprimir el botón y ya probé con todo.

  <form id="subform-form" role="form" method="POST">
                  <input type="submit" id="number-selected-a" value="Go!">
                                   
              <input
                readonly
                id="number-selected-input-id"
                class="number-selected-input"
                type="text"
                value="<?php
                   include ("database.php");
                   include ("refreshButton.php")?>"
              >
            </form>
              <script type="text/javascript">
                $(document).ready(function() {    
                    $('#subform-form').submit(function(event){   
                      event.returnValue = false;
                      event.preventDefault();             
                        $.ajax({
                            type:"post",
                            url: "refreshButton.php",
                            data: numerosDispo,
                            success: function(data) {
                                $('#number-selected-input-id').html(data);
                            }
                        });
                        return false;
                    });              
                });    
                  </script>

Agradezco si alguien puede decirme cuál es el error

database.php es sólo la conexion, eso anda bien

y en mi refreshButton.php tengo este código

 include ("database.php");
                $records = mysqli_query($dbname,"SELECT *
                 FROM numeros WHERE NOT EXISTS( SELECT numero_id FROM datos WHERE numeros.numero_id=datos.numero_id) ORDER BY rand() LIMIT 1") ;
            
                while($data = mysqli_fetch_array($records))
                {
                $numerosDispoId=$data['numero_id'];                    
                $numerosDispo=$data['numeros_disponibles'];
               
                
                }


echo json_encode ( $numerosDispo); mysqli_close($dbname); 

Es que de todos modos me devuelve un número, por eso te pasé ese screen. Ahí va el otro. introducir la descripción de la imagen aquí

2
  • En el formulario, lugar de poner name="subform-form" coloque id="subform-form" Commented el 31 mar. 2021 a las 22:03
  • Edité la respuesta con un comentario sobre el objeto que declaras, dime como te va.
    – Devandmus
    Commented el 31 mar. 2021 a las 22:47

1 respuesta 1

2

Update:

Acerca de JSON y PHP.

En este punto, "refreshButton.php" debe devolver un JSON que será consumido por AJAX. Para devolver un JSON en PHP, utiliza este código:

// instancias el objeto vacío.
// Esto equivale obj = new Object() en javascript
$tuObjecto = new stdClass();

// te aseguras de tener un entero
$numerosDispo = intval($numerosDispo);

// creas el objeto y defines que la llave "respuesta" contiene el valor "$numerosDispo";
$tuObjecto->respuesta = $numerosDispo;

// conviertes el objeto en JSON
$tuObjecto = json_encode($tuObjecto);

// devuelves el objeto como JSON 
echo $tuObjecto;

Hasta este punto, si todo está correcto, el endpoint "refreshButton.php" devuelve un JSON, por lo tanto, debes configurar Javascript para consumirlo, por lo que propongo los siguientes cambios en el método "success" de tu objeto AJAX.

success: function(data) {
  // convierte texto en JSON
  const dataJSON = JSON.parse(data);

  // llamas la llave "respuesta". Recuerda que esto lo devuelves desde PHP
  // el nombre de la llave lo defines tú, así que siempre varía.
  // en este caso puntual, quien contiene el número es "respuesta".
  const number = dataJSON.respuesta

  // lo inyectas en el DOM
  $('#number-selected-input-id').val(number);
}

Existen muchas formas de hacer esto, algunas más sofisticadas y entretenidas, como el API fetch por ejemplo, pero no quiero bombardearte. El código como está, será funcional pero no el mejor, el tiempo y la práctica te mostrarán con más claridad qué decisiones tomar a futuro. Dime cómo te va.

Fin Update.


Hilo antiguo:

Finalmente creo que entendí lo que buscas: deseas mostrar en el input readonly el resultado de una consulta AJAX a refreshButton.php. Si es así, pon atención a los siguientes puntos:

  1. PHP se calcula en el servidor y Javascript en el navegador. Por consiguiente, es imposible actualizar una variable PHP una vez pintado el HTML ya que este se encuentra renderizado. No puedes actualizar tu readonly con PHP una vez pintado por el contexto de ejecución, solo Javascript puede.
  2. Para poder actualizar tu readonly, primero debes hacer una petición AJAX al endpoint, esa lógica está correcta. Sin embargo, refreshButton.php no devuelve nada si se consulta, no hay ningún echo. Intentas actualizar la variable $numerosDispo en un contexto donde PHP no puede intervenir más: la página renderizada.

Teniendo eso en cuenta:

  1. Empieza limpiando tu formulario
<form id="subform-form" role="form" method="POST">
  <input type="submit" id="number-selected-a" value="Go!">
  <input
    readonly
    id="number-selected-input-id"
    class="number-selected-input"
    type="text"
    value=""
  >
</form>
  1. Tu refreshButton.php debe devolver algo, de preferencia un JSON. Intenta agregando esto al final del archivo. Por supuesto, asigna a $respuesta lo que sea que desees devolver con refreshButton.php.
header('Content-type: text/javascript');
echo json_encode($respuesta);

Utiliza la documentación para lograr que tu endpoint se comporte como buscas. https://www.php.net/manual/es/function.json-encode.php

  1. Cuando confirmes que al visitar refreshButton.php te devuelve un JSON tipo {"respuesta": UN_NUMERO_ALEATORIO_O_LO_QUE_QUIERAS} desde el navegador o de preferencia con Postman (https://www.postman.com), solo en ese punto tendrás la lógica del backend completa.

  2. Para actualizar el frontend te puedes ocupar del AJAX, recuperando el valor con la llave de la respuesta en formato JSON que devuelve refreshButton.php.


El siguiente error se encuentra en la declaración del objeto, lo que "rompe" javascript y por lo tanto no escucha el evento.

{
  type="post", // aquí está el primer error, es un objeto, debe ser ":" en lugar de "="
  url: "refreshButton.php",
  data: numerosDispo // un segundo error, debes incluir la coma para la siguiente propiedad
  success: function(data) ...
}

Por lo tanto tu código debería quedar así

{
  type:"post",
  url: "refreshButton.php",
  data: numerosDispo,
  success: function(data) ...
}

El error es el selector. Tu formulario tiene propiedad name="subform-form" pero en jQuery intentas controlar un id="subform-form". El problema se resuelve declarando el id en el formulario, nada más:

<form name="subform-form" id="subform-form" role="form" method="POST">
...
</form>

Igualmente, si no utilizas el atributo name del formulario, puedes eliminarlo y dejar solo el id:

<form id="subform-form" role="form" method="POST">
...
</form>
1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Alvaro Montoro
    Commented el 4 abr. 2021 a las 22:49

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.