PHP While Loop and jQuery

Question

I have created a while loop that selects random images from from my server and posts it. Now I want to add some jquery code and allow me to click on one of the images and run the slideUp() function in jQuery. Here is my problem. I can click on the first image produced in the while loop but when I click on the second image nothing happens. The slideUp() function does not work. I don't know what to do. Here is the code below.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<?php    
   $num_dresses = dress_count ();   
   $i=0;    
   while ($i < 2){  
?>

<style>     
   div:hover { border:2px solid #021a40; cursor:pointer;}      
</style>

<script>  
    $("div").click(function () {
           $(this).slideUp();    
    });
</script>   

<?php       
    $rand_id = rand(1, $num_dresses);       
    $dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
    $new_file_name = $dress_feed_data['file_name']; 

    if (file_exists('fashion_images/' . $new_file_name)){

      echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>

    <br>                    
    <div>    
     <img  src=" fashion_images/<?php echo $new_file_name;?> " width="50" height="50" />  
    <div>
        <br><br>  
    <?php      
        echo str_replace("|", " ", $dress_feed_data['user_defined_place']);      
    ?>

    <br><br>

    <?php
    }    
    $i++;           
    }    
?>

Please format better your code

Aurelio De Rosa
– Aurelio De Rosa

2012-07-19 01:43:54 +00:00
Commented Jul 19, 2012 at 1:43 — Aurelio De Rosa
– Aurelio De Rosa, Commented Jul 19, 2012 at 1:43

sabithpocker · Accepted Answer · 2012-07-19 02:01:59Z

You are binding the click handler to the elements before the elemnts are inserted into DOM,

Probably when the first call is made no elements called div are there so the binding goes to void, then the first element gets inserted. Now the binding for second element is made, now it gets attached to first one as it matches $('div') . So you got only forst one working.

The clean way is to take the click binding out of while loop, so that it happens only once, and call it on DOM ready event

<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this).slideUp();
    });
  });
</script>

And if you want to make a live binding, which applies to all dynamically added images as well use delegation:

<script>
$(document).ready(function(){
  $('body').on('click',"div",function(){
    $(this).slideUp();
    });
  });
</script>

If you are posting the above images with html to a host/parent page, just add the above delegation logic to parent page, and post only the images.

Beetroot-Beetroot · Accepted Answer · 2012-07-19 02:40:47Z

Try this :

<style>
div:hover { margin:10px 0; border:2px solid #021a40; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $("div.randomImage").click(function() {
        $(this).slideUp();
    });
});
</script>
<?php
$num_dresses = dress_count();
$i=0;
while ($i < 2) {
?>
<?php
    $rand_id = rand(1, $num_dresses);
    $dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
    $new_file_name = $dress_feed_data['file_name'];
    if (file_exists('fashion_images/' . $new_file_name)) {
        echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<div class="randomImage">
    <img src="fashion_images/<?php echo $new_file_name;?>" width="50" height="50" />
</div>
<?php
        echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
    }
    $i++;
}
?>

Notes:

Stylesheet and script moved outside the php while loop. Repetition is unnecessary and undesired.
jQuery statement now inside a $(function(){...}) structure to ensure it runs when the ducument is ready, ie. after the served HTML has been interpreted by the browser to create DOM elements.
class="randomImage" added to the <div>
Second <div> changed to </div>
For readability of source and served page, the PHP and HTML are indented independently.

I've not tried to verify the PHP.

Collectives™ on Stack Overflow

PHP While Loop and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related