asked on

Building A URL to pass into a Jquery FancyBox form

Hi

I have a simple form inside a Jquery fancyBox I need to pass a value from a hidden field on the parent page into this form via cgi perl script.

on loading the parent this value is unknown.

on hitting the button how can i grab the contents of this hidden field and build the url to pass into the perl script?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="Fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {
      $var Txt  = $("#HiddenText").value; 
			$("#button").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
                                 'url'         : 'cgi-bin/form.pl?$HiddenText=' +Txt
			});
      
      })
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText" value="I'm Hidding">
        <input type="button" value ="press Me" id="button">
  </body>
</html>

Open in new window

Sudhindra A N

change the line (above code) from
'url' : 'cgi-bin/form.pl?$HiddenText=' +Txt

to

'url' : 'cgi-bin/form.pl?HiddenText=' +encodeURI(Txt);

Chris Stanyon

Change line 16 to the following

var Txt  = $("#HiddenText").val();

Open in new window

You'll probably need to change your url value as ansudhindra has already pointed out.

trevor1940

ASKER

Hi

I chancged the line
'url' : 'cgi-bin/form.pl?$HiddenText=' +Txt
to

'href' : 'cgi-bin/form.pl?$HiddenText=' + encodeURI(Txt);

and the form.pl scipt loads & the value in Txt is passed

if i don't hard code a value in HiddenText but in generated by user interaction no value is passed

Chris Stanyon

Your Txt variable is being set when your page loads, so it loads the value that is in the HTML when the page loads. You need to move this so that it is called when you open the dialog. The fancybox script has an option called onStart to run code before the fancybox is loaded.

Try this:

$(document).ready(function() {

var Txt; 
$("#button").fancybox({
	'onStart' : function(){
		Txt = $("#HiddenText").val();
	},
	'width' : '75%',
	'height' : '75%',
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'type' : 'iframe',
        'href' : 'cgi-bin/form.pl?$HiddenText=' + encodeURI(Txt)
});
      
})

Open in new window

trevor1940

ASKER

Hi

at the moment all my Form.pl is doing is looping though $cgi->params and priniting the name & value pair

when it gets to HiddenText the value is undefined

sugesting the value of HiddenText is not being fetched after the button is pressed.

Chris Stanyon

The javascript part of the code looks right, but I don't know about your perl script. Are you sure you need the $ in front of the variable key

'href' : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt)

Open in new window

Throw in an alert statement, to make sure the script is picking up the value.

Change the onStart function to this

'onStart' : function(){
		Txt = $("#HiddenText").val();
                alert(Txt);
	},

Open in new window

trevor1940

ASKER

Hi

No i don't need the $ in front of the variable key it was a typo

I have put the alert in but this isn't fireing

i've also put breakpoints in using firebug and they are not stopping either

as for the perl script all it is doing is taking what ever is sent via cgi and prining it

so if the href was cgi-bin/form.pl?HiddenText=i'm Hidding&MyVar=hello

then the perl script will print

name = HiddenText [i'm Hidding]
name = MyVar [hello]

what i'm getting is

name = HiddenText [undefined]
name = MyVar [hello]

Chris Stanyon

Post your full javascript function. The code I've posted works, so maybe you've still got typos somewhere

trevor1940

ASKER

Hi

i put a firebug watch on the href line this stops when the page is loaded and HiddenText is empty

Type a value in the input box (IN reality this is generated by javascript)

hit the press Me button

the firbug watch dose not stop at the href line

at no point dose alert(Txt); come up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="Fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="Fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
$(document).ready(function() {

var Txt; 
$("#button").fancybox({
	'onStart' : function(){
		Txt = $("#HiddenText").val();
                alert(Txt);
	},
	'width' : '75%',
	'height' : '75%',
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'type' : 'iframe',
        'href' : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt)
});
      
})
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText">
        <input type="button" value ="press Me" id="button">
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trevor1940

ASKER

changed code

Type a value in the input box
hit the press Me button
Rusult inside the FancyBox

Not Found

the requested URL /[object HTMLInputElement] was not found on this server.

typing this into address bar cgi-bin/form.pl?HiddenText=i'm Hidding&MyVar=hello

loads form.pl and prints
name = HiddenText [i'm Hidding]<br />name = MyVar [hello]

Chris Stanyon

Don't really know what else to suggest.

I've tested the code against jQuery version 1.7.1 and fancyBox version 1.3.4 and it all works well.

trevor1940

ASKER

Success!

I managed to get this working at home using the versions you suggested

Here's the code if you or anyone else is interested
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Parent</title>
   
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
	<script type="text/javascript" src="fancybox/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
    $(document).ready(function() {
    	$("#button").fancybox({
    		'onStart' : function(){
    			Txt = $("#HiddenText").val();
    			return { href : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt) + '&Switch=A' }
    		},
    		'width' : '75%',
    		'height' : '75%',
    		'autoScale' : false,
    		'transitionIn' : 'none',
    		'transitionOut' : 'none',
    		'type' : 'iframe'
    	});
    });
                                                
  </script>
  </head>
  <body>
        <input type="text" id="HiddenText">
        <input type="button" value ="press Me" id="button">
  </body>
</html>

Open in new window

form.pl NOTE: the Shebang (First line) may need altering as per perl installation and platform

#!C:/Perl64/bin/perl.exe
print "Content-type:text/html\n\n";

use CGI;
 my $q = CGI->new;
my $HiddenText = $q->param('HiddenText');

my @Names = $q->param;

print <<HTML;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>FancyBoxForm</title>
  </head>
  <body>
  <h1>Holly Gibbons</h1>
HTML

foreach my $name (@Names)
  {
    print "<p>" . $name . "[ " . $q->param($name) . "]</p>";  
    
  }
print <<HTML;

  </body>
</html>


HTML

Open in new window