jQuery Script called from within php While loop not working properly

Question

I have a php partial page that grabs images from a MySQL database and prints them in the browser using a while loop. A jQuery function is called when I click on one of the images - this function is supposed to grab the src of the img and then alert the user what that src is in a pop-up window. This src should change depending on which img is clicked.

The resulting page is a series of images and their respective data fields, as seen in this snapshot:

Unfortunately, the same src is alerted, regardless of which img is clicked, and it appears to be the last img that was printed from the while loop.

This is the alert that pops up on img click - it should be unique for every photo, but it's the same source currently:

How can I get this img src that is alerted to be unique for every img that is clicked?

EDIT: I should also say that, when tested outside of the while loop, this jQuery script seems to work as expected - different images that are clicked alert different src attributes.

 <div id="screenings">
    <?php

        //MySQL database connection established

        ...

        while ($row = mysqli_fetch_array($result)){
            echo "<div class='img_div'>";
                echo "<img class='modal_img img_screenings' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";

                ...

            echo "</div>";
        }
    ?>
 </div>

 <modal id="custom-modal-1">
     <div class="modal">
        <div class="modal-body">
                <img id="popup_img" src="#">
        </div>
     </div>
     <div class="modal-background"></div>
</modal>

<script>
    $('.img_div').on("click", function() {
        var source = ( $('.modal_img').attr("src") );
        alert(source);
        $('#popup_img').prop('src', this.src);
    });
</script>

The PHP and while are irrelevant here, can you add the generated source to the question. I think you should use $(this) in place of $('.modal_img') but I'd need to test that, I rarely work with JS — chris85
– chris85, Commented May 14, 2017 at 4:21
Do you mean what this partial will look like in the full html context? — rpivovar
– rpivovar, Commented May 14, 2017 at 4:25
What does the echo "<div class='img_div'>"; and other PHP generate? — chris85
– chris85, Commented May 14, 2017 at 4:26
Ah, I see - updated with a snapshot for context. I'm trying to build a modal pop-up window that works with these images. — rpivovar
– rpivovar, Commented May 14, 2017 at 4:30

manassehkatz-Moving 2 Codidact · Accepted Answer · 2017-05-14 05:04:51Z

1

The problem is var source = ( $('.modal_img').attr("src") ); That will get the first src attribute of an item matching the class. But all the images have the same class. You should use $(this) inside $('.img_div').on("click", function() { to reference the clicked <div>. Try var source = $(this).find('img').attr('src')); which should get the <img> tag src attribute of the first img inside the clicked $(this) item.

answered May 14, 2017 at 5:04

manassehkatz-Moving 2 Codidact

3,0542 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rpivovar Over a year ago

Yup, that did it. Thank you!

Collectives™ on Stack Overflow

jQuery Script called from within php While loop not working properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related