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

JavaScript
1

Hello,

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

2

Hi Greg,

The trick here would be to grab the ID with JavaScript. First we need to make it accessible to JavaScript of course.

I’m assuming that when you render the HTML with PHP, at that point you have access to the ID that you need for the popup.php call.

What you can do is add another attribute, say on the link that gets clicked, we’ll call it data-detail-id


  <td><a class="modalInput" rel="#details_view" data-detail-id="'. $some_id .'">View</a></td>

I’m not sure what plugin you’re using, or if that code is meant to be in an event handler. I’ll show you this example in a click event handler for .modalInput - I’m sure you won’t have much trouble adapting it :slight_smile:


$(".modalInput").on("click", function(e) {
    var detailId;
    
    e.preventDefault();
    
    // we can use jQuery's built in .data() method to retrieve the detail-id
    detailId = $(this).data("detail-id");
    
    $('#details_view').load('popup.php?ID='+detailId, function(){
        // call some kind of overlay code that displays the popup?
        // this way the popup will show then the content from popup.php has
        // finished loading.
    });


});

As you can see I used jQuery’s .data() method to retrieve the data stored in the detail-id data attribute. This is a very versatile and powerful way to share extra data between the client and server without needing to create extra markup to hold it. It’s not a solution for all scenarios and types of data, but for this type of thing it’s absolutely perfect.

But wait a minute, haaangg on…

What about that search engine that visits your site? Or that visitor without JavaScript? They won’t be able to get to your popup content, because a URL to it is never exposed without the use of JavaScript.

If we make a few small changes and use Progressive Enhancement we can make this vastly more accessible.

So, how can we do this? Thankfully it’s ridiculously easy.

All we need to do is make sure the “view” links have the actual link to the popup, we can then use almost the same JavaScript code as above to get it to work.

Firstly, let’s tweak our HTML output


  <td><a class="modalInput" rel="#details_view" href="popup.php?'. $some_id .'">View</a></td>

Well, that was easy. Just a link to the popup. We also no longer need the data attribute.

Our JavaScript changes ever so slightly:


$(".modalInput").on("click", function(e) {
    var detailURL;
    
    e.preventDefault(); //this line is now very important to have
    // the preventDefault() will stop the browser from following the link.
    
    // we'll grab the URL to the popup
    detailURL = $(this).attr("href");
    
    $('#details_view').load(detailURL, function(){
        // call some kind of overlay code that displays the popup?
        // this way the popup will show then the content from popup.php has
        // finished loading.
    });


});

So instead of constructing the URL to the popup in JavaScript, we construct it on the server side. This method is a great way to ensure your content is accessible to search engines and visitors that do not have JavaScript turned on (for whatever reason that might be).

3

Howdy, John!

Thank you so much for taking your time and answer my issue.
I so totally understand this code provided (when I have it in front of my eyes :D).

I have updated my code with the one provided by you and the ID is returned, as expected.

Now I have this little piece:


$(".modalInput").on("click", function(e) {
    var detailId;

    e.preventDefault();

    // we can use jQuery's built in .data() method to retrieve the detail-id
    detailId = $(this).data("detail-id");
    $('#details_view').load('popup.php?ID='+detailId, function(){

    alert('Load was performed. ID = '+detailId);
 
        // call some kind of overlay code that displays the popup?
        // this way the popup will show then the content from popup.php has
        // finished loading.
    });
});

And the alert dialog produces the correct ID.
Now, KILL me, but I have no idea how to add this .overlay() piece. Tested bunch of ways but being a complete newbie in jQuery none of them ways worked.

Could you please give me some hint on how to call .overlay from within another function?

Thank you a lot!
Your help is really appreciated!

Best,
Greg

4

Okay,

so this is what I did:


$(".modalInput").overlay({

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

      closeOnClick: true
  });
$(".modalInput").on("click", function(e) {
    var detailId;

    e.preventDefault();

    // we can use jQuery's built in .data() method to retrieve the detail-id
    detailId = $(this).data("detail-id");

    $('#details_view').load('<?php echo TPL_DIR . 'popup.php?ID='; ?>'+detailId, function(){
    //alert('Load was performed. ID = '+detailId);
    });
});

And it works like a charm :slight_smile:

Thank you again for your time, AussieJohn!

Cheers,
GB