Tengo una página php con un php while loop en el que obtengo detalles del usuario junto con la identificación. El bucle crea botones que, cuando se hace clic, necesito conocer los detalles de cada uno de ellos en función de su ID, como se muestra en la imagen a continuación.

http://tinypic.com/r/znl8w9/9

<td><button class='btn btn-success' value="<?php echo $id ;?>" onclick="javascript:getDetails();">View Details</button></td>

Necesito mostrar los detalles en una ventana modal de JavaScript Sweetalert.

function getDetails() {
  swal({
    title: "User Details",
    text: User Details here!",
    confirmButtonColor: "#00B4B4",
    imageUrl: "<?php echo $image; ?>"
  });
};

¿Cómo puedo obtener los detalles de cada ID de usuario en el modo sweetalert haciendo clic en los botones generados por el bucle? ¿Podemos obtener la identificación de cada usuario a través del botón y pasarla a sweetalert y luego hacer una solicitud ajax a una página diferente y extraer detalles de la base de datos en función de la identificación y mostrarla?

¿O hay alguna otra forma de hacerlo?

Por favor es posible? Si es así, cómo ?? Soy un novato y lo siento si pasé por alto algo.

0
Pamela 30 oct. 2017 a las 14:27

4 respuestas

La mejor respuesta

Paso 1, agregue una clase a los botones, por ejemplo user-details y elimine el atributo onclick. Agregue también atributos data-* con sus detalles, por ejemplo:

<button class='btn btn-success user-details' data-name="John Doe 1" data-image="https://png.icons8.com/contacts/ios7/50/e67e22">View Details</button>

Paso 2, vincule un controlador de eventos a estos botones, observe los atributos que se utilizan (puede agregar cuántos desea):

$('.user-details').click(function(e) {
    e.preventDefault();

    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    swal({
        title: "User Details",
        text: "User Details: " + name,
        confirmButtonColor: "#00B4B4",
        imageUrl: image,
    });
});

Esto es todo lo que necesita, puede probar una demo aquí.

2
debute 30 oct. 2017 a las 11:44

Puede pasar user details como function parameter

`onclick="javascript:getDetails('<?php echo $title; ?>');"`

Y consíguelo en el script

`function getDetails(title){
   swal({
   title: title,   // Getting title through Function parameter
   text: User Details here!",
   confirmButtonColor: "#00B4B4",
   imageUrl: <?php echo $image; ?>"
  });
};`

De esta manera Obtén todas title, text, imageurl como

`function(title,text,imageUrl){}`
0
Khan Shahrukh 30 oct. 2017 a las 11:43

Puede pasar el valor a la función getDetails. algo como:

function getDetails(imageUrl, details1, details2) {
  swal({
    title: detail1,
    text: details2,
    confirmButtonColor: "#00B4B4",
    imageUrl: imageUrl
  });
};
<td>
  <button class='btn btn-success' value="<?php echo $id ;?>" onclick="getDetails('<?php $image ?>', '<?php details1 ?>', '<?php details2 ?>');">View Details</button>
</td>
0
Mosh Feu 30 oct. 2017 a las 11:49

Necesitas usar ajax.

En primer lugar, cambie la forma en que renderiza los botones ligeramente de esta manera:

<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

Luego maneje el evento click en el botón con la clase .detailsLink para invocar la solicitud ajax a su backend, una vez que tenga la respuesta, presente un html sweetalert como este:

// When document is ready
$(document).ready(function()
{
    // Handle button click event
    $('button.detailsLink').click(function()
    {
        // Get user id from button
        var userId = $(this).data('userId');

        // Ajax request user details
        $.get('/user-details.php?userId=' + userId)
            .done(function(userData)
            {
                // Build html alert content
                var userInfo = '<p>User Name: '+ userData.userName +'</p>';
                userInfo += '<p>Age: '+ userData.age +'</p>';

                // Display html sweet alert
                swal({
                    title: 'Success',
                    html: userInfo,
                    type: 'info'
                });
            })
            .fail(function()
            {
                // Simple error handler
                swal('Oops...', 'Failed to load user info.', 'error');
            });
    });
});

Y su script de back-end que proporciona los datos del usuario puede ser algo como esto:

<?php

// Parse user id
$userId = isset($_GET['userId']) ? $_GET['userId'] : 0;

// Run your sql query here to load user info
// I'm preparing dummy data here
$userData = array(
    'userName' => 'Bob',
    'age' => 39
);

// Send json response back
header("Content-Type: application/json");
echo json_encode($userData);
exit;

Alternativamente; su script de back-end puede generar el HTML y enviarlo y su javascript simplemente puede configurarlo en alerta dulce.

Entonces, su script de backend se verá así:

<?php

// Parse user id
$userId = isset($_GET['userId']) ? $_GET['userId'] : 0;

// Run your sql query here to load user info
// I'm preparing dummy data here
$userData = array(
    'userName' => 'Bob',
    'age' => 39
);

// Render html response

?>

<p>User Name: <?php echo $userData['userName'] ?></p>
<p>Age: <?php echo $userData['age'] ?></p>

Y su llamada ajax se verá así:

// Ajax request user details
$.get('/user-details.php?userId=' + userId)
    .done(function(userDataHtml)
    {
        // Display html sweet alert
        swal({
            title: 'Success',
            html: userDataHtml,
            type: 'info'
        });
    })
    .fail(function()
    {
        // Simple error handler
        swal('Oops...', 'Failed to load user info.', 'error');
    });
0
Latheesan 30 oct. 2017 a las 11:45