Getting Thickbox.js to work with .php file extensions

Garrett · Aug 1, 2009

Basically, I have a landing page that asks people to insert some information in a form. The form sends the information to the next page (results.php) and a php script calculates a number based on the information they put in on page 1.

I am trying to get it to work with Thickbox.js, because I want to have the lightbox display the persons "score" , with the presell page right underneath. So people click the form, see their score on the next page inside the lightbox, and then "close" the lightbox and end up on my landing page.

The ThickBox script handles the following file types.

.jpg

.jpeg

.gif

.png

.htm

.html

I can change the script if people think another file type should be added. Or, if you are js savvy you can change it yourself.

Since I am using PHP to do the calculation, it isn't working. Anybody know of any alternatives? I need to be able to pass the variable and echo it out within the lightbox though.

jenzkc · Aug 1, 2009

maybe try putting this in your .htaccess (will make .html files behave as php files):

<Files *.html>
AddHandler application/x-httpd-php .html .htm .php
</Files>

and passing the variable through the query string as usual

although looking over the docs it appears the iframe mode supports .php extensions

(iframed content -> demo -> demo html)

bobsoap · Aug 1, 2009

Unless I misunderstood the probelm: Have you simply tried referencing the PHP script in the Thickbox call? That will definitely work because I've done something similar with Thickbox before. I just passed parameters via GET - no problems.

Garrett · Aug 2, 2009

Thanks... it looks like .htaccess did the trick. Now I just need to figure out how to get Thickbox.js to automatically popup on the loaded page. I tried appending it to the url like so:

<form action="results.php?sex=1&weight=180&height=74&age=22#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" method="get">

...but that doesn't auto pop it. Thickbox is only activated onClick, not onPageLoad

Victory · Aug 2, 2009

POST to Thickbox Popup

Let me see if i understand you.

You have a landing page, which asks some questions, you want have a form go to a presale page, which has the result of calculation on the form data as a thickbox.

Thickbox does not support POST, here is the work around

Start out with your landing page As follows:

Code:

<?php
// @file landing.php
// code by Victory at dfhu.org , License BSD
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Best Website in The World</title>
<link rel="stylesheet" href="style.css" >
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
  <form action="presale.php" method="POST">
    How Much money Do you Have:
    <input type="text" name="money">
    <br>
    Do you want to give it to me?
    <select name="give_me">
      <option value="yes">Yes</option>
      <option value="for_sure">For Sure!</option>
    </select>  
    <input type="submit" value="test your score">
  </form>
</body>
</html>

Now you need to instantiate the thickbox after the document is ready. sending it the form info.

Code:

<?php
// @file presale.php
// code by Victory at dfhu.org , License BSD
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Onload Thickbox </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Thickbox Popup Onload">
<meta name="keywords" content="thickbox,popup,onload">
  <!-- 

   NOTE: For This to work These Files Most Be There, additionally
   the loading 'gif' which is by defaul 'images/loadingAnimation.gif'
   Do not think your soo cool you can get away without using the  
   'thickbox.css'

  --!>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="css/thickbox.css">
<script type="text/javascript">
  $(document).ready(function(){

      // you may also wish to add a _SESSION variable to avoid poping
      // up when it is not appropriate (for sufficiently small values
      // of appropriate)

      // You should note that you will not be able to use this method
      // when the for very long values, do to browser limitations on
      // your length. Thicgkbox does not support POST data as of this
      // writing.

    tb_show('Pop Up',
        './gotten.php?height=300&width=300&<?php
echo "&money=" . intval($_POST['money']);
echo "&give_me=" . urlencode($_POST['give_me']);
?>',
        'rel');
  });
</script>
</head>
<body>

 <?php
  echo "<pre>";
  print_r($_POST);
  echo "</pre>";
 ?>

<p>BYE NOW!!!!</p>
</body>
</html>

The calculation are done on the "gotten.php" page, here is just the post data being spit back at you, just make the example complete.

Code:

<?php
// @file gotten.php
echo "<pre>GET:\n";
print_r($_GET);
echo "</pre>";

echo "<pre>POST:\n";
print_r($_POST);
echo "</pre>";

?>

Rage9 · Aug 2, 2009

Your making this a lot harder than it has to be. Me personally I'd do it all on one page and use two scripts (one for your info gathering page page, and one to create the data for the popup).

Anyways, in this example it's just a simple form (without being a form) and when you click the submit button it fires the java script.

The java script pulls the values of the input boxes, encodes them for transport, and invokes a new thickbox which will be populated with data returned from test.php.

Code:

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="./thickbox/thickbox-compressed.js"></script>
    <link rel="stylesheet" href="./thickbox/thickbox.css" type="text/css" media="screen" />

     <script type="text/javascript">

    // Set thickbox loading image
    tb_pathToImage = "./thickbox/loadingAnimation.gif";

    jQuery(document).ready(function() {

        $('#formButton').click(function(){

        var name = $("#name").val();
        var address = $("#address").val();

        //url encode the strings (not 100% perfect)
        name = escape(name);
        address = escape(address);

        var url = "test.php?id=test&height=220&width=400&name=" + name + "&address=" + address;

        tb_show("title", url , null);

        });

    });

    </script>

  </head>
  <body>

<div>
    Name: <input type="text" id="name"><br>
    Address: <input type="text" id="address"><br>
    <button id="formButton">Submit</button>
</div>

  </body>
</html>

The test.php file is simply:

Code:

<?php

echo "name: $_GET[name] <br />";
echo "address: $_GET[address]";

?>

Unfortunately there's no good way to detect when the user has closed the window (a shitty downside of thickbox). Your best bet is to try and get them to click through from there, or try to redirect them when they try and close / navigate away from the main page. If it was a deal breaker though I'd look at using jqModal.

Hope that helps.

Victory · Aug 2, 2009

Your making this a lot harder than it has to be.

That might be, but as you said, your method doesn't follow the specs, and it has the problem of escape/urlencode.

But I would definitely be interested to see an implementation that is more to spec using jqModal, i am not familiar with it.

Rage9 · Aug 2, 2009

Victory said:
That might be, but as you said, your method doesn't follow the specs, and it has the problem of escape/urlencode.

But I would definitely be interested to see an implementation that is more to spec using jqModal, i am not familiar with it.

Fuck the specs, I improved the specs. It doesn't make sense to use 2 pages when everything can be done on one. Unfortunately thickbox just doesn't allow us to do everything we want.

Yeah escape isn't perfect (wont handle + and / properly) there are many scripts wrote to handle this I just didn't include any. All you have to do is google javascript urlencode.

Victory · Aug 2, 2009

Code:

Fuck the specs

You sir, i would drink a beer with you any time, remind me i owe you one next time we meet.

Garrett · Aug 2, 2009

Sweet! thank guys. I am going to test out all your code today. At this point, I have the php script echoing out the variable within the lightbox, still just need to get Thickbox to auto-fire onLoad.

Here is my index.php so far:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Default XHTML</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <link rel="stylesheet" type="text/css" href="thickbox.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="thickbox.js"></script>
        
        <script>
        function popup(){
        window.open('http://localhost:8888/calculator/conversiontable.php','window_name','width=180,height=450,scrollbar=1');
        }
        </script>
        
</head>
<body>


        <div id="vertical">
            <div id="hoz">
            <h2>Calculate YourBlah Blah Blah<br /><span class="subhead">..which is blah blah blah</span></h2>
            
            
            <div id="calculator">
            <form action="results.php#TB_inline?height=600&width=600&inlineId=hiddenModalContent&modal=true" method="get" class="thickbox">
                    <table>
                    <tr>
                        <td><span>Sex</span></td>
                        <td>
                            <select name="sex">
                            <option value="1">Male</option>
                            <option value="0">Female</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><span>Weight (lbs)</span></td>
                        <td><input type="text" name="weight" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px; margin-top:4px;font-weight:bold;" /></td>
                    </tr>
                    <tr>
                        <td><span>Height (inches)  <a class="popup" href="javascriptPopup()">?</a> </span></td>
                        <td><input type="text" name="height" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px;font-weight:bold;" /></td>
                    </tr>
                    <tr>
                        <td><span>Age (years)</span></td>
                        <td><input type="text" name="age" value="" style="background:#eee; padding:3px; border:1px solid silver; font-size: 17px;font-weight:bold;"/></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right"><input type="submit" value="What's my resting metabolic rate?" style="margin-top:4px;position:relative;right:40px;" /></td>
                    </tr>
                    </table>
                    </form>
                    </div><!-- end #calculator -->
            
            
            </div>
        </div>



</body>
</html>

and results.php

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Default XHTML</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <link rel="stylesheet" type="text/css" href="thickbox.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="thickbox.js"></script>
        
</head>
<body>



<a href="#TB_inline?height=600&width=600&inlineId=hiddenModalContent&modal=true" class="thickbox">Pop
<div id="hiddenModalContent" style="display:none;">

<p style="font-family:impact;font-size:24px;text-align:center;line-height:150%;">Congratulations, your blah blah rate is:<?php script and exho function ?></p>

<p>So to lose weight, you simply must not consumer more calories than you burn.</p>
</a>

</body>
</html>

The lightbox only wants to fire when I click the popup link, not automatically when the page loads.

bobsoap · Aug 2, 2009

Add a body onload event to results.php:

Code:

<body onload="popit(browser)">

...with the popit() function being:

Code:

function popit(browser) {
	if(browser=="ie") {
		jQuery(function(){
			setTimeout(function(){
				tb_show('Confirm','#TB_inline?height=600&width=600&inlineId=hiddenModalContent&modal=true', null);
			}, 1000);
		});
	} else {
		tb_show('Confirm','#TB_inline?height=600&width=600&inlineId=hiddenModalContent&modal=true', null);	
	}
}

The JS uses a delay if it's internet explorer, which is needed to make it work in IE. You can set the browser variable in the header like so:

Code:

<!--[if IE]><script type="text/javascript">var browser = "ie";</script><![endif]-->

Search

Search

Getting Thickbox.js to work with .php file extensions

Garrett

music LOUD

jenzkc

Banned

bobsoap

Together we can do anyone

Garrett

music LOUD

Victory

Space Between Posts

Rage9

Banned

Victory

Space Between Posts

Rage9

Banned

Victory

Space Between Posts

Garrett

music LOUD

bobsoap

Together we can do anyone