Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

passing vars between iframes

Status
Not open for further replies.
lloydie2

lloydie2

Programmer
Apr 21, 2003
75
GB
I am trying to parse a var to another frame using onclick. I am useless at JS and need some help understanding what to do. this is currently how my tr onclik works.

Code: 
<script type="text/javascript" language="javascript">

var allcells = document.getElementsByTagName('tr'); 

function tr_mouseover(tr) { 
if (!tr.jlatched) tr.className = 'jover'; 
}

function tr_mouseouturgent(tr) { 
if (!tr.jlatched) tr.className = 'jurgent'; 
else tr.className = 'jlatched'; 
}


function tr_clickoverdue(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) {    
cell.className = cell.id; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
}
}
</script>

and in the body
Code: 
<table>
<tr class='joverdue'  id='joverdue' onmouseover='tr_mouseover(this)' onmouseout='tr_mouseoutoverdue(this)' 
onclick='tr_clickoverdue(this)(top.itemdetail.location="jobdetails.php?job_id=1071")'>
<td class='jobstable' width='50'>1071</td><td class='jobstable' width='130'>Gate Ltd</td>
<td class='jobstable' title='GGHS - DelCastillo - Unable to dial Swiss'>GGHS - DelCastillo,...</td>
<td class='jobstable' width='65'>03-11-2004</td>
</tr>
</table>

the above code changes the colour of the table row on mouseover and opens a page in another frame onclick. When I click a row I want to send a var to another frame.
I have tried parent.frame3.value, but it does not seem to work.
I think I need more of an example.
Can you help based on my code above?
 
Sort by date Sort by votes
Code: 
parent.frames['frame3'].myvar = "New var text";
Value might be a reserved keyword.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
so should I use the following:
Code: 
<tr class='joverdue'  id='joverdue' onmouseover='tr_mouseover(this)' onmouseout='tr_mouseoutoverdue(this)'
onclick='tr_clickoverdue(this)(top.itemdetail.location="jobdetails.php?job_id=1071")parent.frames['toolbar'].jobid= "1071";'>

in the other frame I have the following to test.

Code: 
	<script language="JavaScript">
	var jobid; 
	function PopMeUp()
	{
		alert ( jobid );
	}
</script>	


<a href="javascript:;" onclick="PopMeUp()"><img src="images/jobadd.gif" alt="" height="32" width="32" border="0">
 
Upvote 0 Downvote
Multiple statements are separated by semicolons (;):
Code: 
onclick='tr_clickoverdue(this)[red];[/red]top.itemdetail.location="jobdetails.php?job_id=1071"[red];[/red]parent.frames['toolbar'].jobid= "1071";'

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
I am sure I'm going in the right direction, but when I try to test, all I get from thr alert is 'undefined'. Do I need to correctly define the var in the page it is passed to?

Code: 
 <script language="JavaScript">
    var jobid;
    function PopMeUp()
    {
        alert ( jobid );
    }
</script>    


<a href="javascript:;" onclick="PopMeUp()"><img src="images/jobadd.gif" alt="" height="32" width="32" border="0">
 
Upvote 0 Downvote
The variable will be undefined if you call the page without activating the code to change it first. Did you click the tr before testing? Can you post all the code (or all that is necessary) of all the necessary pages?

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Yes I did click on tr first.
Might be a bit difficult to post code as it is mostly php and relies on a database. What I have posted is the resulting source code. I read somewhere about using window.parent.etc.
anyway here is as much code as I can give you. there are a couple of iframe pages not included, but you should'nt need them.
Thanks for your help so far.

main window
Code: 
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>Welcome to Adobe GoLive 6</title>
		<style type="text/css" media="screen"><!--
.boxstyle  { background-color: white; border: solid 1px silver }
.boxpad { padding-left: 5px }
--></style>
	</head>

	<body bgcolor="#eeeeee">
		<table  width="800" border="0" cellspacing="0" cellpadding="0" height="650">
			<tr>
				<td colspan="2">
					<table class="boxstyle" width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="90"></td>
							<td>
							<iframe name="toolbar" id="toolbar" height="35" scrolling="no" src="toolbarjob.php" width="100%" frameborder="0">
							</iframe>
							</td>
							<td width="90"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr height="300">
				<td rowspan="3" width="200" height="605">
					<table class="boxstyle" width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
						<tr>
							<td valign="top">
								<iframe name="menutree" id="menutree" src="menutree.php" frameborder="0" width="200" height="100%">
Sorry, your browser doesn't support iframes. A demonstration of a <a href="mysql.html">centered fluid iframe</a> would be visible here if you were using a capable browser.
</iframe>
							</td>
						</tr>
					</table>
				</td>
				<td class= "boxpad" valign="top" height="300">
					<table class="boxstyle"width="100%" border="0" cellspacing="0" cellpadding="0" height="300">
						<tr>
							<td>
							<iframe name="select" id="select" scrolling="no" src="welcome.php" frameborder="0" width="100%" height="100%">
							Sorry, your browser doesn't support iframes. <br>Please use a beowser which supports iFrames. (IE6, Firefox, Mozilla).
							</iframe>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr height="5">
				<td height="5"></td>
			</tr>
			<tr height="300">
				<td class= "boxpad" valign="top" height="300">
				<table class="boxstyle"width="100%" border="0" cellspacing="0" cellpadding="0" height="300">
						<tr>
							<td>
								<iframe name="itemdetail" id="itemdetail" scrolling="auto" src="#" frameborder="0" width="100%" height="100%">
									
							Sorry, your browser doesn't support iframes. <br>
									Please use a beowser which supports iFrames. (IE6, Firefox, Mozilla).

								</iframe>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<p></p>
	</body>

</html>

select frame
Code: 
<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>Welcome to golive Ltd</title>
		<link href="details.css" rel="stylesheet" media="screen">

<style type="text/css">  

th.jnormal {  
font: 600 12px arial,tahoma,verdana,sans-serif; 
text-style: bold; 
text-align: center;
background: #ffffff;  
} 

tr.othertr {  
font: 200 12px arial,tahoma,verdana,sans-serif;  
background: #ffffff;
tr align: left;
td align: left; 
} 

tr.jassign  { font: bold 12px arial, tahoma, verdana, sans-serif; background-color: #ffffff; text-align: center; cursor: pointerhand }


tr.jnormal  { font: 200 12px arial, tahoma, verdana, sans-serif; background-color: #ccffcc; text-align: center; cursor: pointerhand }

tr.jurgent  { font: 200 12px arial, tahoma, verdana, sans-serif; background-color: #ff9; text-align: center; cursor: pointerhand } 

tr.joverdue  { font: 200 12px arial, tahoma, verdana, sans-serif; background-color: #fcc; text-align: center; cursor: pointerhand } 

tr.jover {
font: 200 12px arial,tahoma,verdana,sans-serif; 
text-align: center; 
background: #e0e0e0;
cursor: pointer; 
cursor: hand;  
} 

tr.jout {  
font: 200 12px arial,tahoma,verdana,sans-serif; 
text-align: center;
background: #ffffff;  
cursor: pointer; 
cursor: hand; 
} 

tr.jlatched { 
font: 200 12px arial,tahoma,verdana,sans-serif; 
text-align: center;
background: #c1c1c1;
}
.side { border: solid 1px black }
.outframe { border: inset 3px white }
</style>

<script type="text/javascript" language="javascript"> 

var allcells = document.getElementsByTagName('tr'); 

function tr_mouseover(tr) { 
if (!tr.jlatched) tr.className = 'jover'; 
} 

function tr_mouseoutassign(tr) { 
if (!tr.jlatched) tr.className = 'jassign'; 
else tr.className = 'jlatched'; 
}

function tr_mouseoutnormal(tr) { 
if (!tr.jlatched) tr.className = 'jnormal'; 
else tr.className = 'jlatched'; 
}

function tr_mouseouturgent(tr) { 
if (!tr.jlatched) tr.className = 'jurgent'; 
else tr.className = 'jlatched'; 
} 

function tr_mouseoutoverdue(tr) { 
if (!tr.jlatched) tr.className = 'joverdue'; 
else tr.className = 'jlatched'; 
} 

function tr_mouseout(tr) { 
if (!tr.jlatched) tr.className = 'jout'; 
else tr.className = 'jlatched'; 
}  

function tr_clickassign(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) { 
cell.className = cell.id; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
} 
} 


function tr_clicknormal(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) { 
cell.className = cell.id; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
} 
} 

function tr_clickurgent(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) { 
cell.className = cell.id; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
}
}

function tr_clickoverdue(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) {    
cell.className = cell.id; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
}
}
</script>		


 
	</head>

	<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						<tr>
							<td>
								<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="white">
									<tr class='jobstable' id='jobstable'>
										<td bgcolor="#dddddd" width="50">
											<div align="center">
												<b>Job ID</b></div>
										</td>
										<td bgcolor="#dddddd" width="130">
											<div align="center">
												<b>Customer</b></div>
										</td>
										<td bgcolor="#dddddd">
											<div align="center">
												<b>Summary</b></div>
										</td>
										<td bgcolor="#dddddd" width="65">
											<div align="center">
												<b>Date</b></div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td><DIV STYLE="height: 270; overflow: auto;">
								<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="white">
							<tr class='jassign' id='jassign'
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseoutassign(this)' 
onclick='tr_clickassign(this); top.itemdetail.location="jobaddcust.php?job_id=1071"; top.toolbar.jobid="1071";'><td class='jobstable' width='50'>1071</td><td class='jobstable' width='130'>Gate Gourmet Lon Ltd</td><td class='jobstable' title='GGHS - DelCastillo, Ximena - Unable to dial Swiss Mobiles'>GGHS - DelCastillo, Ximena - Unable to d...</td><td class='jobstable' width='65'>03-11-2004</td></tr><tr class='joverdue'  id='joverdue'
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseoutoverdue(this)' 
onclick='tr_clickoverdue(this)(top.itemdetail.location="jobdetails.php?job_id=1052")'><td class='jobstable' width='50'>1052</td><td class='jobstable' width='130'>Gate Gourmet Lon Ltd</td><td class='jobstable' title='GGHW - Hill, Carol - Phone 6440'>GGHW - Hill, Carol - Phone 6440...</td><td class='jobstable' width='65'>22-10-2004</td></tr><tr class='joverdue'  id='joverdue'
							</DIV></td>
						</tr>
					</table>

	</body>

</html>

toolbar frame
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>Welcome to Adobe GoLive 6</title>
		
	<script language="JavaScript">
	var jobid = top.toolbar.jobid; 
	function PopMeUp()
	{
		alert ( jobid );
	}
</script>	

	</head>

	<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td><a href="javascript:;" onclick="PopMeUp()"><img src="images/jobadd.gif" alt="" height="32" width="32" border="0"></a></td>
			</tr>
		</table>
		<p></p>
	</body>

</html>
 
Upvote 0 Downvote
Code: 
    var jobid = top.toolbar.jobid;

You said yourself that this should be
Code: 
    var jobid = [red]parent[/red].toolbar.jobid;

Try changing that in all places.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
After all that, I realise the problem was typo's in my php code. for each of the different colours there is php code quering a database and generating the table rows and JS. I did the first one but not the other 3, but only tried the last 3. Doh.
Thanks for your help.
 
Upvote 0 Downvote
Glad it's sorted.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
820
lexer
lexer
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
223
Dara2020
Dara2020
audiopro
  • Locked
  • Question
Passing vars to a javascript progarmme 2
Replies
14
Views
282
ChrisHirst
ChrisHirst
cutum
  • Locked
  • Question
Need to hide Web Part between certain dates-SharePoint 2010
Replies
12
Views
491
vacunita
vacunita
pdbowling
  • Locked
  • Question
Passing javascript variables to a function
Replies
2
Views
150
pdbowling
pdbowling

Part and Inventory Search

Sponsor

Back
Top