current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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;
share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

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>
share|improve this answer
    
Thank you both Alistair and BabyAzerty, I can now see the error and how the looping was affecting it. Working great now! –  user3268101 Feb 4 at 4:22
add comment
up vote 1 down vote

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']; ?>;, 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.