Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

244
Vistas
Fill bootstrap 5 modal with mysql record data using javascript fetch/ async/await with ES6 notation so as to update the record

All of this code works. It activates the BS5 modal and fills it with a record using a stored procedure on MySQL db. The issue was calling the wrong variable. If you set up a 'sync' variable, then 'await' has to use the same variable (my bad), or you break the 'promise' function. Also, I had to jason_encode my PHP PDO output into a separate array for that purpose, and useht 'data.json' on to catch the response, and name the variables properly. Once organized properly, it works verywell. Success with fetch-api. I can now do complete CRUD with the fetch-api, php pdo, stored procedures, and MySQL.

    <?php
    include "init.php";
    $P1  = $_GET['userId'];
    $stmt = $pdo->prepare("CALL readSingleUserSp(?)");
    $stmt>bindParam(1,$P1,PDO::
    PARAM_STR|PDO::PARAM_INPUT_OUTPUT|PDO::ATTR_EMULATE_PREPARES, 
    4000);
    $stmt->execute(array($P1)); 
    do {
    $res = $stmt->fetchAll();
    }   while ($stmt->nextRowset() && $stmt->columnCount());

    foreach ($res as $row) {
        $userId = $row['userId'];
        $fName  = $row['fName'];
        $lName  = $row['lName'];
        $email  = $row['email'];
        $phone  = $row['phone'];
    }
 
    $userinfo = array(  'userId'=>$userId,
                    'fName' =>$fName,
                    'lName' =>$lName,
                    'email' =>$email,
                    'phone' =>$phone);
    echo json_encode($userinfo);
    ?>
    const tbody = document.querySelector("tbody");  
    const addModal = document.getElementById("addNewUserModal");
    const addForm = document.getElementById("add-user-form");
    const updateForm = document.getElementById("edit-user-form");
    // Edit User Ajax Request
    tbody.addEventListener("click", (e) => {
    if (e.target && e.target.matches("a.editLink")) {
    e.preventDefault();
    let userId = e.target.getAttribute("userId");
    editUser(userId);
    }
    });

   `const editUser = async (userId) => {
    const data = await fetch(`includes/readsingleuser.php? 
    &userId=${userId}`, {
    method: "GET",
    });
      const userinfo = await data.json();
      document.getElementById("userIdEdit").value = 
    userinfo.userId;
      document.getElementById("fNameEdit").value =  userinfo.fName;  
      document.getElementById("lNameEdit").value =  userinfo.lName;
      document.getElementById("emailEdit").value =  userinfo.email;
      document.getElementById("phoneEdit").value =  userinfo.phone;
    };


about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

"All of this code works. It activates the BS5 modal and fills it with a record using a stored procedure on MySQL db. The issue was calling the wrong variable. If you set up a 'sync' variable, then 'await' has to use the same variable (my bad), or you break the 'promise' function. Also, I had to Jason_encode my PHP PDO output into a separate array for that purpose, and use the 'data.json' to catch the response, and name the variables properly. Once organized properly, it works very well. Success with fetch-API. I can now do complete CRUD with the fetch-API, PHP pdo, stored procedures, and MySQL." I changed the original code to shorten the question as Stack bots were complaining.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda