Question

For some context: I’m building a blog system where user can see all the articles they add. To do so I recover the ID of the articles where username=$thatUser and use a foreach loop to display. Works find except that I want user to be able to delete those articles. A little “Are you sure?” message shows up before in a lightbox and that is where the problem is. When clicking in the button to show up the lightbox, it only show the LAST ID. See the code below:

First the lightbox code (jQuery):

    $(document).ready(function()
    {
            $('a#deleteArticleFormJS').click(function()
            {
                   $('#background,#deleteArticle').fadeIn('fast');
            });

            $('a#hideDeleteArticle, a#cancelDeleteArticle').click(function()
            {
                   $('#background,#deleteArticle').fadeOut('fast');
            });
     });

Then PHP/html code:

   <?php
      //articles(); is a basic SQL query to recover the ID
      $Articles = articles();

      foreach($Articles as $Article)
      {
    ?>
      <!-- Recover the thumnail of the articles, the ID is correct. -->
      <img src="avatar/<?php echo $Article['ID']?> - Avatar.jpg">

      <!-- Link that shows the lightbox with the "Are you sure" message, the ID is correct. -->
      <a href="#<?php echo $Article['ID'];?>" id="deleteArticleFormJS">Delete</a>

      <!-- The "lightbox". -->                      
      <div id="deleteArticle">
           //*** PROBLEM: only show the LAST ID?! ***//
           Delete <?php echo $Article['ID'];?>                              
      </div>

    <!-- End of the foreach loop -->
    <?php
    }
    ?>

My question is:
1 – How to get the proper ID in the lightbox?

If more details, code or anything is needed, please ask.

P.S: I’m not sure this is the right “StackExchange” site to put this. If not, I apologize.

Answer 1

Try this:

$(document).ready(function()
{
        $('a.deleteArticleFormJS').click(function()
        {
               $('#background,#deleteArticle'+$(this).data('article-id')).fadeIn('fast');
        });

        $('a.hideDeleteArticle, a.cancelDeleteArticle').click(function()
        {
               $('#background,#deleteArticle'+$(this).data('article-id')).fadeOut('fast');
        });
 });


   <?php
      //articles(); is a basic SQL query to recover the ID
      $Articles = articles();

      foreach($Articles as $Article)
      {
    ?>
  <!-- Recover the thumnail of the articles, the ID is correct. -->
  <img src="avatar/<?php echo $Article['ID']?> - Avatar.jpg">

  <!-- Link that shows the lightbox with the "Are you sure" message, the ID is correct. -->
  <a href="#<?php echo $Article['ID'];?>" class="deleteArticleFormJS" data-article-id="<?php echo $Article['ID']; ?>" >Delete</a>

  <!-- The "lightbox". -->                      
  <div class="deleteArticle" id="deleteArticle<?php echo $Article['ID']; ?>" >
       //*** PROBLEM: only show the LAST ID?! ***//
       Delete <?php echo $Article['ID'];?>                              
  </div>

<!-- End of the foreach loop -->
<?php
}
?>