How to open just a single jquery dialog within a PHP while loop

Question

I have a HTML table, where rows are shown within a while loop. In each row I have a <td>, and within each of those I place a <img>.

<table>
 <tr>
  <th class="text-left highlight">presso</th>
 </tr>
<?php
while...
?>
<div class="myClass" title="info" style="display: none;">
bla bla bla
</div>
 <tr>
  <td class="text-left">
   <img src="img/i.png" class="myImg" /><?php echo $while_loop_result;?>
  </td>
 </tr>
<?php
}
?>
</table>

Please notice the class myClass for the div and myImg for the img.

Now, I want to click on the <img> in each table row, and open a jquery dialog which corresponds to that specific row.

<script type="text/javascript">
$(function() {
$('.myClass').dialog(
{
      autoOpen: false,
      maxWidth:300,
      maxHeight: 300,
      width: 300,
      height: 300,
      modal: true,
      show: {
      effect: "blind",
      duration: 1200
      },
      hide: {
      effect: "drop",
      duration: 1200
      }
    }
);
$('.myClass').dialog('close');
$(".myImg").click(
 function (e) {
   $('.myClass').dialog('open');
 });
})
</script>

The script above opens all the dialog windows. If the table has five rows, by clicking on any of the five images, all the five dialog popups open.

How can I open just the one I clicked on?

$('.myClass').click(function(){ $('.'+this)..dialog( { }. You forgot to add click function. — urfusion
– urfusion, Commented Dec 8, 2017 at 13:21

ITwithSM · Accepted Answer · 2017-12-08 13:53:30Z

1

Well its obvious if you refer to a class you all the classes will be opened. You need to assign separate ids to every element. The workaround for this should be similar to this.

     $sql = "Your query string";
    $results = mysqli_query($conn, $sql);

    if (mysqli_num_rows($results) > 0) {
        // output data of each row
$i=1;
        while($row = mysqli_fetch_assoc($results)) {
echo '<div class="myClass" id="expand-'.$i.'" title="info" style="display: none;">
bla bla bla
</div>
 <tr>
  <td class="text-left">
   <img src="img/i.png" class="myImg" id="'.$i.'"/>'.$row["somedatabasefield"].'
  </td>
 </tr>';
$i=$i+1;
}

}

Now when you have generated all the tds and divs we will see the jquery code accordingly. It should something like this. I haven't checked this on my own but this will give an idea what to do exactly.

<script type="text/javascript">
$(function() {
$('.myClass').dialog(
{
      autoOpen: false,
      maxWidth:300,
      maxHeight: 300,
      width: 300,
      height: 300,
      modal: true,
      show: {
      effect: "blind",
      duration: 1200
      },
      hide: {
      effect: "drop",
      duration: 1200
      }
    }
);
$('.myClass').dialog('close');
$(".myImg").click(
 function (e) {
   $('#expand-'+this.id).dialog('open');
 });
})
</script>

As you can see only one change in jquery is needed in this workaround.

answered Dec 8, 2017 at 13:53

ITwithSM

762 bronze badges

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

2 Comments

Alessandro Over a year ago

Nice workaround. I was thinking about doing something using each, but your solution is much more straightforward.

ITwithSM Over a year ago

Well thanx. I am glad it was helpful to you.

Collectives™ on Stack Overflow

How to open just a single jquery dialog within a PHP while loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related