Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Building A URL to pass into a Jquery FancyBox form

Posted on 2012-03-19
13
Medium Priority
?
1,480 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 44

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 44

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 44

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
 
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 44

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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

715 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