Actualizar el registro de la base de datos MySql en el ciclo while con ajax: solo actualiza la primera fila

Question

Cuando hago clic en el botón "Upisi" funciona bien para el primer registro, pero en todos los demás registros no funcionará.

Ocitanja.php:

<?php
include_once("header.php");
require("spajanje.php");
if(!isset($_POST["ulica"]))
{
	header('Location: index.php');
}
else $_SESSION["ulica"] = $_POST["ulica"];
echo "Očitač: " . $_SESSION["ocitac"] . "</br></br>";
echo "<form action='ulica.php'><input type='submit' value='Odabir ulice'></br></br>Odabrana ulica:</br>" . $_POST['ulica'] . "</form>";
echo "</br></br>";
?>
<table>
<?php
$korisnici = mysqli_query($conn, "SELECT * FROM ocitanja WHERE ocitac ='".$_SESSION["ocitac"]."' AND ulica ='".$_POST["ulica"]."'");

while ($row = $korisnici->fetch_assoc()){
    echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>";
    echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>";
    echo "<form><tr><td>
		<label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
    echo "<tr><td>Zadnje očitanje: " . $row['staro_stanje'] . " m<sup>3</sup></td></tr>";
    echo "<tr><td>
		<label>Očitanje: </label>
		<input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
		<input onclick='myFunction()' type='button' value='Upisi'>
		</td></tr></form>";
}
?>

</table>
<?php
include_once("footer.php");
?>

Ajax.js.php:

<?php
$bb2 = $_POST['bb1'];
$ocitanje2 = $_POST['ocitanje1'];
require("spajanje.php");
if (isset($_POST['ocitanje1'])) {
    mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'"); //Insert Query
    echo "Uspješno upisano očitanje!";
}
?>

Script.js:

function myFunction() {
    var bb = document.getElementById("bb").value;
    var ocitanje = document.getElementById("ocitanje").value;
// Returns successful data submission message when the entered information is stored in database.
    var dataString = 'bb1=' + bb + '&ocitanje1=' + ocitanje;
    if (ocitanje == '') {
        alert("Unesi očitanje!");
    } else {
// AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "ajaxjs.php",
            data: dataString,
            cache: false,
            success: function(html) {
                alert(html);
            }
        });
    }
    return false;
}

¿Qué estoy haciendo mal? ¿Alguna otra idea de cómo actualizar cada registro por separado en el bucle while? Pero sin actualizar la página. Gracias

javascript php jquery mysql ajax

1

mEDO 19 mar. 2017 a las 12:29

Answer 1

Es difícil saber dónde está exactamente el problema, pero puedo ver dónde pueden surgir algunos problemas.

Primero, las ID son únicas ya que en dos elementos no deben tener las mismas ID. Esa puede ser una razón por la que no funciona correctamente, ya que siempre está utilizando el mismo par de elementos en su llamada AJAX. Así que vamos a convertirlos en clases.

En segundo lugar, aproveche jQuery ya que lo está utilizando. Si está utilizando esta biblioteca, realmente no hay razón para usar el atributo onclick (o cualquier otro evento). Eliminemos ese atributo en su botón y, en su lugar, asigne una clase, p. upisi al que haremos referencia en breve.

En tercer lugar, no puede colocar la etiqueta <form/> entre <tr/>. Eso es HTML no válido. Como no necesitamos, quítelo. Si desea agrupar elementos <tr/>, use <tbody/> elemento.

while ($row = $korisnici->fetch_assoc()){
    echo "<tbody>";
    echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>";
    echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>";
    echo "<tr><td>
        <label>Broj plinomjera: </label><input type='text' class='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
    echo "<tr><td>Zadnje očitanje: " . $row['staro_stanje'] . " m<sup>3</sup></td></tr>";
    echo "<tr><td>
        <label>Očitanje: </label>
        <input class='ocitanje' type='text' size='6' value='". $row['ocitanje'] ."'> m<sup>3</sup>
        <input type='button' value='Upisi' class='upisi'>
        </td></tr>";
    echo "</tbody>";
}

Ahora, en su JavaScript, adjuntemos un controlador de eventos onclick a los botones .upisi.

$('.upisi').click(function () {
    // find bb and ocitange relative to the tbody
    var tbody = $(this).closest('tbody');
    // var bb = tbody.find('.bb').val(), ocitanje = tbody.find('.ocitanje').val();
    var bb = $('.bb', tbody).val(), ocitanje = $('.ocitanje', tbody).val();

    alert('bb: ' + bb + ', ocitanje: ' + ocitanje);

    if (ocitanje == '') {
        alert('Unesi očitanje!');
    } else {
        $.ajax({
            type: 'POST',
            url: 'ajaxjs.php',
            data: { bb1: bb, ocitanje1: ocitanje }, // cleaner
            cache: false,
            success: function (html) {
                // Returns successful data submission message when the entered information is stored in database.
                alert(html);
            }
        });
    }
});

Por último, siempre debe verificar si tiene los campos PUBLICADOS antes de usarlos.

<?php
require("spajanje.php");
if (isset($_POST['bb1'], $_POST['ocitanje1'])) {
    $bb2 = $_POST['bb1'];
    $ocitanje2 = $_POST['ocitanje1'];
    if (mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'")) {
        echo "Uspješno upisano očitanje!";
    } else {
        echo "Something went wrong"; // I have no idea what language you are using, so I'm not even going to try
    }
}
?>

Comentario lateral: debe utilizar declaraciones preparadas en su PHP Como está fuera del alcance de su problema, no lo he incluido.

0

Community 13 abr. 2017 a las 12:45

Answer 2

Problema

El problema es simple. En ocitanjia.php, en esta línea:

        <label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";

Cada campo de entrada tiene el mismo id ('bb'), por lo que en script.js, cuando llamas a esta declaración:

    var ocitanje = document.getElementById("ocitanje").value;

JQuery devolverá el valor del primer cuadro de texto ya que así es como se comporta jQuery cuando encuentra múltiples elementos con la misma identificación.

Solución Aunque muchas cosas necesitan ser corregidas. El camino más corto es hacer esto: En ocitanjia.php, cambie esto

echo "<tr><td>
    <label>Očitanje: </label>
    <input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
    <input onclick='myFunction()' type='button' value='Upisi'>
    </td></tr></form>";

A esto:

echo "<tr><td>
    <label>Očitanje: </label>
    <input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
    <input onclick='myFunction(\'". $row['bb'] ."\')' type='button' value='Upisi'>
    </td></tr></form>";

Y en script.js cambie esto:

function myFunction() {
var bb = document.getElementById("bb").value;

A esto:

function myFunction(bb) {

Explicación: Pase el valor de bb como parámetro a la función que pasará un valor único de bb cada vez que se llama a la función

1

Ankit Dhanna 19 mar. 2017 a las 15:40

Actualizar el registro de la base de datos MySql en el ciclo while con ajax: solo actualiza la primera fila

2 respuestas

Nuevas preguntas

javascript