How to pass php id from array to a javascript function

Question

Can anyone provide some assistance.

I am getting information in an array from mysql and then displaying an image based on the information. When a users mouse passes over the image or a click I am trying to pass the id from that to a javascript post function which then writes a views or clicks record.

Unfortunately the javascript is only half working as it takes the last id in the array and uses that instead of the specific id. I am not sure how pass the specific id.

I am not a programmer and have been trying to sort this out without assistance, I have also been searching this and other sites for a solution. Thank you to any assistance provided.

<?php

$result = $sql->query("SELECT * FROM carousel WHERE paper = 'Torch2'");

$rows = array();

while ($row = $result->fetch_assoc()) {

$rows[] = $row;

}

$i = 1;
foreach ($rows as $row):

$item_class = ($i == 1) ? 'active item' : 'item';
    echo "<div class='$item_class'>";

        echo "<div class='clicks mouseovers'>";
        echo "<a href='".$row['link']."' target='_blank'><img src='ads/artwork/".$row['filename1']."' /></a>";

        ?>
        <script>
        var id = <?php echo $row['id']; ?>;

        $("div.clicks").click(function() {
            $.post("includes/clicks_carousel",{id:id});
        });

        $( "div.mouseovers" ).on( "mouseenter", function() {
            $.post("includes/mouseovers_carousel",{id:id});
        });
        </script>
        <?

        echo "</div>";

    echo '</div>';

$i++;
endforeach;

Answer 1

BabyAzenty already posted a solution, but I thought I'd write up a little bit trying to explain what is happening here.

The main reason why you are always sending the last ID in the array is because, in short, different sets of tags for JavaScript don't create separate environments; the "id" var that you create in each iteration of the loop is always going to reference the same 'id' variable (even though you "redeclare" it with "var", that is ignored and the original variable is reused). So when this JS code runs: var id = <?php echo $row['id']; ?>; var id = <?php echo $row['id']; ?>; , that overwrites the previous value, so it will always equal the last value declared on the page.

As an example, you can look at this jsFiddle I put together, with a common example of this behavior. Essentially, I have a loop where I create 10 buttons - on each button, I add an event to show an alert box which contains what number button I am in. As you can see, every button says "10" because the variable "i" is always getting updated in the next iteration of the loop and those alert functions always point to the same value.

There are multiple ways to get around this behavior - BabyAzenty already posted a solution, where you store the value of the ID on the page and reuse it when the event gets called.

Answer 2

The problem in your code is that the variable id is overrided for each loop...

1. Save the id in a hidden div/span/a whatever you like (using text or data-attribute)

2. Write only one javascript code for the click event and get the hidden div/span/a.

    foreach ($rows as $row) { $item_class = ($i == 1) ? 'active item' : 'item'; echo "<div class='$item_class'>"; echo "<div class='clicks mouseovers'>"; echo "<a href='".$row['link']."' target='_blank'><img src='ads/artwork/".$row['filename1']."' /></a>"; echo "<span class='hide item_id' data-item_id='".$row['id']."'></span>"; echo "</div>"; echo '</div>'; $i++; } <script> $("div.clicks").click(function() { var item_id = $(this).children("span").data("item_id"); $.post("includes/clicks_carousel",{id:item_id}); }); $( "div.mouseovers" ).on( "mouseenter", function() { var item_id = $(this).children("span").data("item_id"); $.post("includes/mouseovers_carousel",{id:item_id}); }); </script>