Passing a variable from PHP loop to JQuery's modal via href link

Question

been trying for hours now to update the code I was given, and with no luck. I have tried bunch of example from this very page yet to no avail...

I have a php loop that prints out some data, then upon clicking a 'view' link, a modal-box pops up displaying more information of given person. To display content of that modal box I use external php file so I thought it would be easy to pass a value and simply select and displayed all info from DB based on passed ID. So wrong I was...

Here's what I have now:

PHP:

<tr>
  <td>' . sel_db('*', 'guests', $row['guestID'], '3') . '</td>
  <td>' . find_lounge($row['departureID']) . '</td>
  <td>' . $row['flight_no'] . '</td>
  <td>' . $row['arrival_time'] . '</td>
  <td><a class="modalInput" rel="#details_view">View</a></td>
  <td class="cent">' . $thisBooking . '</td>
</tr>

And this little jquery:

<script type="text/javascript" />
  var triggers = $(".modalInput").overlay({

  // some mask tweaks suitable for modal dialogs
  mask: {
    color: '#ebecff',
    loadSpeed: 200,
    opacity: 0.9
  },

  closeOnClick: true
 });
 $('#details_view').load('popup.php?ID=???');

 </script>

plus the div inside the pure HTML page (the very same as the php code is):

  <!-- Details popup -->
    <div class="modal" id="details_view">
      { here is loaded external php file }
  </div>

The popup opens fine but there's no way I can display anything dynamic since I cannot grab that ID from the php loop.

Can anyone help here, please? Any input will be much, much appreciated.

Cheers, Greg Bialowas

Answer 1

Assuming you want to conform to modern web standards, you could store the information in the DOM as an HTML5 data attribute. Basically you can add any attribute which starts with data- when you want to store arbitrary information about a DOM element. Your link would look like

<a class="modalInput" rel="#details_view" data-id="???">View</a>

and you could then read this information from Javascript when you need to load the popup

$('[rel="#details_view"]').attr('data-id'); // Returns the ID

Note also that I think you've made an error, rel="#details_view" doesn't make much sense to me, and if that is what you wanted, $('#details_view') won't select it. The selector above will.