Changing content of multiple elements with same name

Question

I have some <td name="puja"> elements I want to update every 5 seconds deppending on their id so they contain the greatest bid(puja) for it's auction(subasta). For that, I'm trying to use AJAX and PHP.

Html looks like this (relevant code):

<?php    
    foreach ($subastas as $subasta) { ?>
        <td name="puja" id="<?php echo $subasta["oid_s"] ?>"> </td>

As I have multiple elements to update, I tried getting all the elements and then running my AJAX function for every one of them.

AJAX:

$(document).ready(function()
{
        var ids = document.getElementsByName("puja");

        for (var i=0; i<ids.length;i++){
        var id = ids[i].id;
        $.ajax({
        url : 'includes/getPuja.php',
        data:{"oid_s":id},
        success: function(data){
            $(`#${id}`).html(data);
            }
        });
    };
});

Finally, in my php file I just make a database connection, get the desired value , and echo it.

getPuja.php (relevant code):

$puja = 0;

if(isset($_POST["oid_s"])) {
   $oid_s = $_POST["oid_s"];

   $consultaPuja='SELECT pujado from (SELECT * from pujas WHERE OID_S = :oid_s ORDER BY pujado DESC) where rownum = 1';  
    try {
        $stmtPuja = $conexion->prepare($consultaPuja);
        $stmtPuja -> bindParam(':oid_s', $oid_s);
        $stmtPuja -> execute();
        foreach ($stmtPuja as $fila) {
            $puja = $fila["PUJADO"] ;
        }
        echo $puja;
    } catch(PDOException $e) { 
        $_SESSION["excepcion"] = $e -> GetMessage();
        header("Location: excepcion.php");
    }
}

When I run it, the HTML is not modified.

`ids[i]` should be `ids[i].id`. You're trying to send the entire element to PHP, you need to send just the ID. — Barmar, Sep 06 '19 at 01:34
And in `$(\`#${id}\`)` you never declared the variable `id`. — Barmar, Sep 06 '19 at 01:35
See https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue — Barmar, Sep 06 '19 at 01:46
All your `success:` closures share the same `id` variable, because it's a single variable binding for the entire function. The answers there show a number of ways to get a different variable for each iteration. For instance, you can use `$('[name=puja]').each()` instead of a `for` loop. — Barmar, Sep 06 '19 at 15:41

score 0 · Answer 1 · answered Sep 06 '19 at 16:41

I fixed my problem with the following code, now the values get updated every second:

$(document).ready(function(){

setInterval(getPuja, 1000);

function getPuja() {
    $( '[name=puja]' ).each(function() {
            var id = $( this ).attr('id');
            $.ajax({
                url : 'includes/getPuja.php',
                method:"POST",
                data:{oid_s:id},
                success: function(data){
                $(`#${id}`).html(data);
                }
            });
        });
    }   
});

Changing content of multiple elements with same name

1 Answers1