Dynamic Popup using jquery,php,mysql

Question

<script type="text/javascript" src="jquerynew.js"></script>
<script>

    $(document).ready(function() 
    {       
       $('#wings').click(function(event) 
       {
           loadPopupBox();
           $('body').css('background','#333');        
       });

       $('#popupclose').click(function(event) 
       {            
           unloadPopupBox();
           $('body').css('background','white');
       });

       function loadPopupBox() 
       {  
          $('#popupbox').fadeIn("slow");
       }        

       function unloadPopupBox() 
       {
          $('#popupbox').fadeOut("normal");       
       }  
       $("#popupbox").hide();
    });

</script>

<style>
 table { border-collapse:collapse; margin-left:370px; margin-top:20px; padding:10px; font-family:Trebuchet MS; min-width:530px; }
 table th,td { border:1px solid #8AC007; }

 #popupbox {  position:fixed; _position:absolute; /* hack for internet explorer 6 */ background:#FFFFFF; left:472px; top:150px; 
           border:2px solid lightgray; padding:15px;  z-index:100px; font-size:15px;  -moz-box-shadow: 0 0 5px lightgray; 
           -webkit-box-shadow: 0 0 5px lightgray; box-shadow: 0 0 5px lightgray; display:none; }

 #popupclose { border:0px solid lightgray; color:#6FA5E2; font-family:verdana; font-weight:bold; line-height:15px; float:right;
               cursor:pointer;  text-decoration:none; }
</style>

<?php

  $con = mysql_connect("localhost","root","");  
  mysql_select_db("popupsql",$con);

  $users = mysql_query("SELECT u.id, u.username, u.firstname, u.lastname FROM user u");  
  $rows = array();
  while($row = mysql_fetch_assoc($users))
  $rows[] = $row;

  echo '<table>
             <tr style="background:#8AC007;color:#8A4C25;font-size:15px;">
                <th style="padding:10px;">Firstname</th>
                <th style="padding:10px;">Lastname</th>
                <th style="padding:10px;">Status</th>
             </tr>';
  foreach($rows as $row)
  { 
     echo '<tr>
               <td style="padding:5px;">'.$row['firstname'].'</td>
               <td style="padding:5px;">'.$row['lastname'].'</td>
               <td style="padding:5px;text-align:center;">
                 <a id="wings">view status</a>
                 <div class="popupbox">
                 <div style="height:30px;"><img class="popupclose" src="close.png" style="float:right;"></img></div>';
                 $grades = mysql_query('SELECT u.firstname, u.lastname,u.email,ggh.finalgrade FROM grade_grades_history ggh, user u WHERE 
                                        u.id = ggh.userid AND u.id = '.$userid.'');   

                 $rows = array();
                 while($row = mysql_fetch_array($grades));
                 $rows[] = $row;
                 foreach($rows as $row)
                 {
                   echo $row['email'];
                 }
             echo '</div>
               </td>
           </tr>';
  }
  echo '</table>';     
?>

Here is my code for displaying jQuery popup dynamically., The popup opens only for the first row, but i need a popup for all the users i.e.., when I click the first user view status, a popup should display his/her appropriate status. Can anyone suggest me.

iAmClownShoe · Accepted Answer · 2013-03-03 09:29:30Z

2

Instead of using an id on the rows make it a class. You are using the id as a selector to assign the click handlers which will only apply to the first matched element.But if you change them to classes and select the class it will aqpply to all of them.

answered Mar 3, 2013 at 9:29

iAmClownShoe

6161 gold badge4 silver badges10 bronze badges

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

4 Comments

ronbosc Over a year ago

Excellent, It was working and many thanks for your help, but could i know why id takes only for the first row where as the class does, could you explain

iAmClownShoe Over a year ago

api.jquery.com/id-selector Classes are typically used across multiple elements that share traits while id's are then used as a more specific identifier.

ronbosc Over a year ago

Yes.. you're absolutely correct, a popup is displaying for all the rows, that's good, but not displaying with a correct userid i.e., id isn't passing to a popup window.

ronbosc Over a year ago

Friends.. can anyone suggest

Collectives™ on Stack Overflow

Dynamic Popup using jquery,php,mysql

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related