SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 77
  1. #1
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do I pass JavaScript variables via FancyBox?

    I'm attempting to pass JavaScript variables via FancyBox, so that I can access them in the window that appears. So far, I have the following code:

    Code:
    var s;
    var e;
    var fancyboxdata = new Array();
    $(function(){
        $( '#post_code' ).blur(function(){
            s = $( '#post_code' ).val();
        });
    });
    function map_routes(e){
        if ((s.length !== 0) && (e.length !== 0)) {
            document.getElementById('map_routes_button').style.visibility="visible";
            fancyboxdata[s] = s;
            fancyboxdata[e] = e;
        } else {
            document.getElementById('map_routes_button').style.visibility="hidden";
        }
    }
    ...
    
    
    $(document).ready(function() {
        $("a.iframe_maps").fancybox({
            ajax: {
                type: "POST",
                data: fancyboxdata
            },
            'hideOnContentClick': true,
            'height': 600,
            'padding': 0,
            'width': 700, 
            'type': 'iframe'
        });
    });
    At this stage, I know the fancyboxdata array contains data, but I'm unsure about the Ajax parameter in the FancyBox function, which is supposed to pass the array variable.

    In the window that appears, I have:

    Code:
    <?php
    
    print_r($_POST);
    
    echo $_POST['s'];
    
    ?>
    <script>
        (function() {
            alert(fancyboxdata[s]);
        })();
    </script>
    I've tried: print_r($_POST), $phpVar, $_POST["phpVar"], and $_POST["phpVar"], bur nothing appears, other than empty arrays and errors in the debugger.

    The error is just an explanation that the fancyboxdata array variable can't be found. And in PHP:

    HTML Code:
    <p>Severity: Notice</p> <p>Message: Undefined index: s</p> <p>Filename: bookings/maps.php</p> <p>Line Number: 5</p>
    And just so you know, I'm building this within CodeIgniter.

    Any ideas?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    It seems that you have attached FB to an anchor tag with a class of "iframe_maps"
    Code JavaScript:
    $("a.iframe_maps").fancybox({

    Could you post this little snippet of HTML.

    It probably looks something like:

    HTML Code:
    <a class="fancybox fancybox.iframe" href="...">Open iFrame</a>

  3. #3
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code for the button, including FancyBox class

    Pullo (or Dave), here's the code for the button:

    Code:
    <div id="map_routes_button">
        <div id="button-link"><a class="iframe_maps button-link" href="#" title="Plan your journey">Journey Planner</a></div>
    </div>
    <script type="text/javascript">
        document.getElementById('map_routes_button').style.visibility="hidden";
    </script>
    Launching the FancyBox window is not the problem; that part works fine.

    Anticipating your next suggestion, sending the post codes as URL parameters isn't a viable solution.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Howdy Forbes,

    The problem is that you are never going to be able to send a POST request using just an <a> element.
    In its current state your code is always going to be firing a GET request.

    Why is it not an option to pass the data as a URL parameter?
    This would work as expected.

  5. #5
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried POST and GET and neither contain any data.

    Because I'm using JavaScript, which is unreliable, and it would involve sending a GET request to a page, which wouldn't work in the context of the framework.

    I'm open to any recommendations of code alterations, to make this work.

    I am by no means an expert in JavaScript, Ajax, or jQuery!

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    GET would work like this:

    Code JavaScript:
    var myVar ="something";
     
    $("#send").click(function(e){
      e.preventDefault();
      var Href = 'iframe.php?name=' + myVar;
      $.fancybox.open({
        href: Href,
        type: 'iframe'
      });
    });

    HTML Code:
    <a class="iframe_maps button-link" href="" title="Plan your journey" id="send">Journey Planner</a>
    However, I have no experience of the framework you are using, so maybe this approach wouldn't work for you.

    Another idea would be to construct your content in your main document (you could fetch whatever you need via AJAX), then pass everything to FancyBox using its content parameter.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    I was just playing around with the second possibility I suggested and got quite nice results doing the following:

    index.html
    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
        <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
      </head>
      
      <body>
        <a href="" id="send" class="fancybox" >Off we go</a>
        
        <script type="text/javascript">
          $(document).ready(function() {
            var name = "Pullo"
    				
            $("#send").click(function() {
              $.fancybox.showLoading();
              $.ajax({
                type : "POST",
                cache : false,
                url : "test.php",
                data  : 'myData=' + name,
                success : function(data) {
                  $.fancybox(data);
                }
              });
              return false;
            });
          });
        </script>
      </body>
    </html>
    test.php
    PHP Code:
    <?php 
      $m 
    = ($_POST['myData']); 
      echo 
    "Hello there, $m!";
    ?>
    This way, you submit everything to test.php via AJAX.
    In test.php you have access to the $_POST super-global in all its glory.
    You can then manipulate your data as you wish, then pipe it back to display in FancyBox.

    Simples!

  8. #8
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I'm nearly there. But there are a few problems:
    1. I can't remove the loading icon, even when I delete the $.fancybox.showLoading(); attribute;
    2. I can only send one parameter, and data: 's=' + s + '&' + 'e=' + e doesn't appear to work, in that only 's' is carried forward, while 'e' appears to be undefined, even though data is present prior to submission;
    3. also, Fancy Box only works once, and no subsequent attempts result in a window.

    Pullo, thanks for the help so far.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Good evening,

    To your points:

    Quote Originally Posted by Forbes View Post
    I can't remove the loading icon, even when I delete the $.fancybox.showLoading(); attribute;
    Are you sure?
    This does it for me.
    Maybe you have extra code somewhere that is causing this?

    Quote Originally Posted by Forbes View Post
    I can only send one parameter, and data: 's=' + s + '&' + 'e=' + e doesn't appear to work, in that only 's' is carried forward, while 'e' appears to be undefined, even though data is present prior to submission;
    I find this surprising.
    This works for me:
    Code JavaScript:
    data  : 'firstName=' + firstName + '&lastName=' + lastName
    I've updated my script at the bottom of this post for you totry it out.

    Quote Originally Posted by Forbes View Post
    also, Fancy Box only works once, and no subsequent attempts result in a window.
    Again, I find this surprising.
    I can call FB as many times as I like (see the example).

    index.html

    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?969091-How-do-I-pass-JavaScript-variables-via-FancyBox-->
        <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
        <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
      </head>
      
      <body>
        <p>Click here to <a href="" class="send fancybox" data-first="King" data-last="Pullo">Greet King Pullo</a></p>
        <p>Click here to <a href="" class="send fancybox" data-first="Pullo" data-last="the Mightier">Greet Pullo the Mightier</a></p>
        
        <script type="text/javascript">
          $(document).ready(function() {
            
            $(".send").click(function() {
              firstName = $(this).attr("data-first");
              lastName = $(this).attr("data-last");
              
              $.fancybox.showLoading();
              $.ajax({
                type : "POST",
                cache : false,
                url : "test.php",
                data  : 'firstName=' + firstName + '&lastName=' + lastName,
                success : function(data) {
                  $.fancybox(data);
                }
              });
              return false;
            });
          });
        </script>
      </body>
    </html>
    test.php

    PHP Code:
    <?php 
    $f 
    = ($_POST['firstName']); 
    $l = ($_POST['lastName']); 
    echo 
    "Hello there, $f $l!";
    ?>
    If I was you, I'd take a second to run the example I provide and see if your issues persist.
    If so, then there is a glitch in the Matrix, if not, then we have narrowed the problem down to your script.
    Either way, i would be interested to know how you get on.

  10. #10
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, there's an error somewhere in my code, which is responsible for 'e' not being passed along to FancyBox.

    As for the loading graphic, I don't have anything else on the page that would do that; your code introduced that feature, and it's something I don't use anywhere in the application.

    Also, your code relies on the newer version of FancyBox, which essentially disables every instance that uses code specific to the earlier version — of which there are many throughout the application.

    Fun and games!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Forbes View Post
    Also, your code relies on the newer version of FancyBox, which essentially disables every instance that uses code specific to the earlier version — of which there are many throughout the application.
    Oh dear!

    I rewrote my example to use FancyBox 1.3.4.
    Does this work for you?

    index.php:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>FancyBox 1.3.4 | Demonstration</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://hibbard.eu/blog/pages/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="http://hibbard.eu/blog/pages/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
      </head>
      <body>
        <p>Click here to <a href="test.php" class="send fancybox" data-first="King" data-last="Pullo">Greet King Pullo</a></p>
        <p>Click here to <a href="test.php" class="send fancybox" data-first="Pullo" data-last="the Mightier">Greet Pullo the Mightier</a></p>
        
        <script type="text/javascript">
          var firstName, lastName;
          
          $(".fancybox").click(function(e) {
            e.preventDefault();
            firstName = $(this).attr("data-first");
            lastName = $(this).attr("data-last");
            $.fancybox(this, {
              ajax : {
                type  : "POST",
                data  : 'firstName=' + firstName + '&lastName=' + lastName
              }
            });
          });
        </script>
      </body>
    </html>
    test.php:

    PHP Code:
    <?php 
      $f 
    = ($_POST['firstName']); 
      
    $l = ($_POST['lastName']); 
      echo 
    "Hello there, $f $l!";
    ?>

  12. #12
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to be clear, your examples work perfectly. It's the integration with my application that's causing the problems, especially with the error in my code.

    If you don't mind, I have to go, but I'll be sure to try tomorrow.

    Pullo, thanks again.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No probs
    It can be quite annoying when you're looking for a solution to a complicated problem and you have to try and bring a stranger up to speed with your project.

    Nonetheless, hopefully the last example I posted should help you implement the POST request correctly and route the response back to FancyBox.
    Let me know how you got on.

    Cheers

  14. #14
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, what does your 'e' variable do? I ask because that's the name of the variable I'm having problems with.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    It represents the "click" event.
    As, in this example, the page to display in FancyBox is hard-coded into the "href" (i.e. test.php) we need to prevent the browser following that link.
    That's what this line does:

    Code JavaScript:
    e.preventDefault();

    HTH

  16. #16
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I Googled the preventDefault() function, so understand what that does.

    However, I simply don't know enough about JavaScript / jQuery (whatever it's called) to fix the bug in my code, or how to implement your code and have it work (I can't get Fancy Box to work reliably, other than using the code I'm using elsewhere, but won't work here in this exercise).

    Because of the time constraints, I may have to abandon this exercise, largely because I honestly don't know what's going on, and this needs to be maintainable in the future.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    That's a shame

    If you can post a link to a page where I can see all of this in action, I don't mind taking a look.

  18. #18
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the kind offer. It's a commercial application, which requires sign in details, so I'll send you a private message with details for the development version.

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Forbes,

    So I got it working.

    This is what I did:

    HTML Code:
    <div id="button-link"><a class="fancybox button-link" id="button-link" href="..." title="Plan your journey">Journey Planner</a></div>
    This line is invalid as you have two elements with the same id.
    I changed it as follows:

    HTML Code:
    <div id="button-link"><a class="fancybox button-link" id="button-link1" href="test.php" title="Plan your journey">Journey Planner</a></div>
    Notice I also changed the file to which the AJAX post request is sent to "test.php".
    In test.php I just have <?php print_r($_POST); ?>

    You have this JavaScript at the top of the document.

    Code JavaScript:
    var s;
    var e;
    var fancyboxdata = new Array();
    $(function(){
      $('#post_code').blur(function(){
        s = $('#post_code').val();
      });
    });
     
    function map_routes(e){
      if ((s.length !== 0) && (e.length !== 0)) {
        fancyboxdata[0] = s;
        fancyboxdata[1] = e;
        document.getElementById('map_routes_button').style.visibility="visible";
      } else {
        document.getElementById('map_routes_button').style.visibility="hidden";
      }
    }
     
    $("#button-link").click(function(event) {
      event.preventDefault();
      _s = fancyboxdata[0];
      _e = fancyboxdata[1];
      $.fancybox(this, {
        ajax: {
          type : "POST",
          data : 's=' + _s + '&e=' + _e
        }
      });
    });

    Move it to the bottom of your file and place it directly before the closing </body> tag.
    This is also where the Google Analytics code should go (before the </body>, not after).

    Change this:

    Code JavaScript:
    $("#button-link").click(function(event) {

    into this:

    Code JavaScript:
    $("#button-link1").click(function(event) {

    Now when I submit the form, I see:

    Code:
    Array ( [s] => HA9 OAA [e] => Postcode )
    displayed in FancyBox.

    Yay

  20. #20
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, thanks again. I'll have a try later this evening and let you know how I get on.

  21. #21
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, you've been an enormous help.

    Okay, this is mostly working, except the close button on the Fancy Box doesn't actually close it.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Howdy,

    I took your code and swapped this:

    HTML Code:
    <a class="fancybox button-link" id="button" href="http://yourdomain.com/bookings/maps/routes/5" title="Plan your journey">Journey Planner</a>
    for this:

    HTML Code:
    <a class="fancybox button-link" id="button" href="test.php" title="Plan your journey">Journey Planner</a>
    and the problem went away (i.e. I could close FancyBox as expected).

    Ergo, something on the page you are posting the data to is causing an error.
    Is it possible for you to share the PHP code behind "bookings/maps/routes/5"?

    I cannot debug this remotely, due to the fact that my browser will not let me make a cross domain AJAX call (for security reasons).

  23. #23
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've uploaded the most recent changes.

    Firstly, "bookings/maps/routes/5" has to remain in place because that's where the Google Maps data is generated.

    Secondly, the error is "'undefined' is not an object (evaluating 'f.width')" which is triggering on a line that has no relevant code associated with it.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    To help you, I need to have a look at "bookings/maps/routes/5".
    Is that possible at all?

  25. #25
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, once you've gone through the post code selection process (per the instructions I sent you), right-click the "Journey Planner" button and open it in a separate tab.

    Obviously, the post code fields are going to be empty because the "POST" process won't have run, but you'll have complete access to the code.

    Weirdly, the default map locations loads this way, but doesn't via the usual means, which I suspect us due to the error.


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
  •