Solved

Building A URL to pass into a Jquery FancyBox form

Posted on 2012-03-19
13
1,278 Views
Last Modified: 2012-06-22
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

0
Comment
Question by:trevor1940
  • 6
  • 6
13 Comments
 
LVL 13

Expert Comment

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

to

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

Expert Comment

by:Chris Stanyon
ID: 37741645
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.
0
 
LVL 1

Author Comment

by:trevor1940
ID: 37742335
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
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 37742448
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

0
 
LVL 1

Author Comment

by:trevor1940
ID: 37742782
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 37742889
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

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:trevor1940
ID: 37743024
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]
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 37743147
Post your full javascript function. The code I've posted works, so maybe you've still got typos somewhere
0
 
LVL 1

Author Comment

by:trevor1940
ID: 37746186
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

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 37746824
Ok.

Had a look at this and you need to set your href in the onStart function. Then your variable will be set each time you click the button, and be passed to your script.

Try this code - I've moved the href option inside of the onStart function.
$(document).ready(function() {
	$("#button").fancybox({
		'onStart' : function(){
			Txt = $("#HiddenText").val();
			return { href : 'cgi-bin/form.pl?HiddenText=' + encodeURI(Txt) }
		},
		'width' : '75%',
		'height' : '75%',
		'autoScale' : false,
		'transitionIn' : 'none',
		'transitionOut' : 'none',
		'type' : 'iframe'
	});
});

Open in new window


Tested it and it works fine :)
0
 
LVL 1

Author Comment

by:trevor1940
ID: 37747330
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]
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 37747444
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.
0
 
LVL 1

Author Comment

by:trevor1940
ID: 37762633
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

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now