Función de jQuery no funciona

Question

Tengo una función de jQuery que al presionar un botón debería ejecutarse y cambiar un valor en la base de datos. Por desgracia no se ejecuta y no encuentro el problema. Dejo los códigos por si alguien puede darme una mano.

Primero el código html:

<html>
<head>

</head>
<body>
                <h4>Listado de Clientes</h4>
                  <table>
                    <tr>
                          <th>ID</th>
                          <th>Razon Social</th> 
                          <th>Estado de alerta de pago</th>                        
                        </tr>

                        <?php
                            $id_cliente_pago= 0;
                            datos_cliente();
                        ?>
                  </table> 
<script>
$("#boton-ponerAlarma").click(function(event){
    $.ajax({url: "cambia-estado-cliente.php", data: ({id: <?php echo $id_cliente_pago; ?>}), success: function(result){
            alert("La alarma se ha activado exitosamente");
            location.reload();
            }
        });
});
</script>           



</body>
</html>

Y éste es el código de pagos.php

<?
include_once('database.class.php');
    function datos_cliente(){
        global $db;
        $querySQL= $db->query($sql = "SELECT `id`, `razon_social`, `estado_observacion` FROM `cliente`");
        while ($row=mysql_fetch_array($querySQL)){
        echo "<tr>";
        echo "<td>".$row['id']."</td>";
        global $id_cliente_pago;
        $id_cliente_pago = $row['id'];
        echo "<td>".$row['razon_social']."</td>";
        echo "<td>".$row['estado_observacion']."</td>";
        echo  "<td>".
                '<button type="button" id="boton-ponerAlarma">Poner Alarma de Pago</button>'; 
        echo "</tr>";
        echo  "<td>".
                '<button type="button"  onclick="quitarAlarma()">Quitar Alarma de Pago</button>';
        echo "</tr>";
        }
    }
?>

Y de cambia-estado-cliente.php

<?php
include_once('database.class.php');
if ($_REQUEST['id']) {
    global $db;
    $id_cliente_=mysql_real_escape_string($_REQUEST['id']);
        $querySQL= $db->query($sql = "UPDATE `cliente` SET `estado_observacion` = 'Alarma-Activada' WHERE `cliente`.`id` = $id_cliente_;");
        if (!$querySQL) {
                echo "La alarma no  ha podido ser activada sido activada";
            }   
}
?>

**Estás intentando asociar el controlador del evento click a un elemento que aún no existe**. Mueve el script del `head` al final del `body` y prueba de nuevo. — Alvaro Montoro, Oct 14 '16 at 13:57
Aparte de eso, tu código presenta problemas de seguridad y es susceptible de sufrir ataques de inyección SQL. Lee sobre [qué es la inyección SQL](http://es.stackoverflow.com/q/10518/250) y [cómo evitarla en PHP](http://es.stackoverflow.com/q/18232/250) — Alvaro Montoro, Oct 14 '16 at 14:00
Hay otro error importante en el código: **estás repitiendo IDs** (p.e. `boton-ponerAlarma`), eso puede afectar al selector que asociaría la acción sólo al primero que encuentre. ¿Funciona si pulsas el botón de la primera fila?¿Qué pasa si pulsas en la tercera/cuarta fila? — Alvaro Montoro, Oct 14 '16 at 14:07
Es un poco tonto mi comentario, pero si todo eso es tu código, donde cargas el jquery? — Jose Javier Segura, Oct 14 '16 at 14:15
@sinaxtis ¿hay errores en la consola de JS?¿o de PHP en la página? — Alvaro Montoro, Oct 14 '16 at 14:21

score 1 · Answer 1 · answered Jan 18 '17 at 19:35

Hay un par de problemas con tu código:

Tienes un loop que le asigna el id boton-ponerAlarma a TODOS los elementos del mismo loop; el iddebe ser único por elemento y estás duplicando esta propiedad N veces. Para resolver este detalle asigna clases en lugar de ID's:

Dentro de Pagos.php genera tus botones así:

  echo '<td><button type="button" class="boton-ponerAlarma">';

Tu JS entonces quedaría así:

<script>
$(".boton-ponerAlarma").click(function(event){

Entonces encontramos el segundo error en el JS, el id que tratas de generar es el mismo para TODOS: {id: <?php echo $id_cliente_pago; ?>} y me imagino que es uno por registro, soluciona esto agregando el id al botón dentro del loop usando una propiedad extra:

RESPUESTA FINAL:

En pagos.php:

echo '<td><button type="button" class="boton-ponerAlarma" cliente="' . $row['id'] . '">';

Y el JS completo quedaría así:

<script>
$(".boton-ponerAlarma").click(function(event){
    $.ajax({url: "cambia-estado-cliente.php", 
      data: ({id: $(this).attr('cliente')}), 
      success: function(result){
        alert("La alarma se ha activado exitosamente");
        location.reload();
      }
    });
 });
</script>

De esta manera guardas por cada registro de tu loop el id_cliente_pago en el botón, al hacer click en él lo lees y lo envías al script cambia-estado-cliente.php que alertará en tu browser y posteriormente recargará la página.

Tu problema esencialmente es de diseño.

score -1 · Answer 2 · answered Oct 14 '16 at 14:13

-1

se soluciona cambiando el evento de click por un onclick en el boton o colocandolo de la siguiente manera

$(document).on('click','#boton-ponerAlarma',function(event){
$.ajax({url: "cambia-estado-cliente.php", data: ({id: <?php echo $id_cliente_pago; ?>}), success: function(result){
        alert("La alarma se ha activado exitosamente");
        location.reload();
        }
    });});

answered Oct 14 '16 at 14:13

Andres Castellanos

59
1

Seria bueno si explicaras cual es la razón de usar `$(document).on('click'...);` en vez de `$('element').click(...);` – Black Sheep Oct 21 '16 at 18:47

score -1 · Answer 3 · answered Jun 22 '17 at 16:18

-1

Javascript no permite insertar etiquetas PHP dentro de él, te sugiero que imprimas el valor de tu variable PHP dentro de un tag html como podría ser data-xxx="" y tomar el valor con Javascript.

Saludos y suerte

answered Jun 22 '17 at 16:18

Jonathan Schell

478
2
11

1

Esto es sólo parcialmente correcto o al menos necesitaría muchos matices. Como el usuario tiene el código JavaScript incrustado en el HTML (dentro de ``), sí que puede haber etiquetas PHP dentro del JavaScript y funcionaría igual que poniendo los valores en `data-xxx=""`. Sería otra historia si el código JavaScript estuviera en su propio fichero `.js`, en ese caso no se podría usar PHP (aunque técnicamente sí habría maneras de tenerlo) – Alvaro Montoro Jun 22 '17 at 16:29
Sí, me refería a dentro de js file. Gracias por el comentario! – Jonathan Schell Dec 01 '17 at 18:08

score -1 · Answer 4 · answered Jun 22 '17 at 16:54

Para empezar, cuando vas a necesitar ejecutar alguna accion al clickear un botón que actualmente es inexistente, se recomienda utilizar el evento onclick directamente en el elemento HTML que será creado. Dejando tantas palabras de lado, vamos de frente al código:

La función de JavaScript

<script>
$("#boton-ponerAlarma").click(function(event){
    $.ajax({url: "cambia-estado-cliente.php", data: ({id: <?php echo $id_cliente_pago; ?>}), success: function(result){
            alert("La alarma se ha activado exitosamente");
            location.reload();
            }
        });
});
</script>

Reemplazada por:

<script>
function PonerAlarma(){
    $.ajax({url: "cambia-estado-cliente.php", data: ({id: <?php echo $id_cliente_pago; ?>}), success: function(result){
            alert("La alarma se ha activado exitosamente");
            location.reload();
            }
        });
});
</script>

En pagos.php está lo siguiente:

<?
include_once('database.class.php');
    function datos_cliente(){
        global $db;
        $querySQL= $db->query($sql = "SELECT `id`, `razon_social`, `estado_observacion` FROM `cliente`");
        while ($row=mysql_fetch_array($querySQL)){
        echo "<tr>";
        echo "<td>".$row['id']."</td>";
        global $id_cliente_pago;
        $id_cliente_pago = $row['id'];
        echo "<td>".$row['razon_social']."</td>";
        echo "<td>".$row['estado_observacion']."</td>";
        echo  "<td>".
                '<button type="button" id="boton-ponerAlarma">Poner Alarma de Pago</button>'; 
        echo "</tr>";
        echo  "<td>".
                '<button type="button"  onclick="quitarAlarma()">Quitar Alarma de Pago</button>';
        echo "</tr>";
        }
    }
?>

Como se puede ver, la lógica será igual que el botón Quitar Alarma de Pago quedando de la siguiente manera:

<?
include_once('database.class.php');
    function datos_cliente(){
        global $db;
        $querySQL= $db->query($sql = "SELECT `id`, `razon_social`, `estado_observacion` FROM `cliente`");
        while ($row=mysql_fetch_array($querySQL)){
        echo "<tr>";
        echo "<td>".$row['id']."</td>";
        global $id_cliente_pago;
        $id_cliente_pago = $row['id'];
        echo "<td>".$row['razon_social']."</td>";
        echo "<td>".$row['estado_observacion']."</td>";
        echo  "<td>".
                '<button type="button" onclick="PonerAlarma()" id="boton-ponerAlarma">Poner Alarma de Pago</button>'; 
        echo "</tr>";
        echo  "<td>".
                '<button type="button"  onclick="quitarAlarma()">Quitar Alarma de Pago</button>';
        echo "</tr>";
        }
    }
?>

Función de jQuery no funciona

4 Answers4