SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    PHP Code:
    <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><class="modalInput" rel="#details_view">View</a></td>
      <
    td class="cent">' . $thisBooking . '</td>
    </
    tr
    And this little jquery:

    Code:
    <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):

    HTML Code:
      <!-- 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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg76 View Post
    The popup opens fine but there's no way I can display anything dynamic since I cannot grab that ID from the php loop.
    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

    PHP Code:
      <td><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

    Code javascript:
    $(".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
    PHP Code:
      <td><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:
    Code javascript:
    $(".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).
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    The trick here would be to grab the ID with JavaScript...
    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 ).

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

    Now I have this little piece:

    Code javascript:
    $(".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. #4
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay,

    so this is what I did:
    Code javascript:
    $(".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

    Thank you again for your time, AussieJohn!

    Cheers,
    GB


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •