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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Pass values from iframe list to document week plan dynamic 1

Status
Not open for further replies.
dimsis

dimsis

Programmer
Aug 6, 2000
76
0
0
GR
I have seven tables for each day of week like outlook and in a right panel an iframe with a list with text links.
I need when anyone clicks on a text link from the iframe to dynamicaly add / pass (innerText?) the text into the selected day of week table.

------------------ (iframe)
Monday | Tuesday | Text 1
------------------ Text 2
| | Text 3 <- if i click here
------------------ and i have selected Monday:
| |
------------------

i want to get:
------------------
Monday | Tuesday |
------------------
Text 3 | |
------------------
| |
------------------

if i click another text (text 1 for example) i want to add it under the text 3 and so on...
How can i do this?

Thanx in advance
 
Sort by date Sort by votes

You've not said how you are selecting the days, how many rows your table have by default (if any), or why you're using 49 tables instead of 1... So if this isn't what you want, then you'll need to give more specifics.

Save this as "textLinks.html":

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function selectThis(linkObj) {
			parent.linkClicked(linkObj.firstChild.nodeValue);
		}
	//-->
	</script>
</head>
<body>
	<a href="javascipt:void(0);" onclick="selectThis(this); return(false);">Link 1</a><br />
	<a href="javascipt:void(0);" onclick="selectThis(this); return(false);">Link 2</a><br />
	<a href="javascipt:void(0);" onclick="selectThis(this); return(false);">Link 3</a><br />
</body>
</html>

And then this is the main code:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function linkClicked(linkText) {

			// find which day is selected
			var dayIndex = 0;
			var dayRadios = document.forms[0].elements['daySelect'];
			for (var loop=0; loop<dayRadios.length; loop++) if (dayRadios[loop].checked) dayIndex = loop;

			// populate first cell under day
			document.getElementById('dayTable').tBodies[0].rows[0].cells[dayIndex].firstChild.nodeValue = linkText;
		}
	//-->
	</script>
</head>
<body>
<form>
	<table id="dayTable" border="1">
		<thead>
			<tr>
				<td><input type="radio" name="daySelect" value="0" checked="checked" /></td>
				<td><input type="radio" name="daySelect" value="1" /></td>
				<td><input type="radio" name="daySelect" value="2" /></td>
				<td><input type="radio" name="daySelect" value="3" /></td>
				<td><input type="radio" name="daySelect" value="4" /></td>
				<td><input type="radio" name="daySelect" value="5" /></td>
				<td><input type="radio" name="daySelect" value="6" /></td>
			</tr>
			<tr>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>Sat</th>
				<th>Sun</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
	</table>

	<iframe src="textLinks.html"></iframe>
</form>
</body>
</html>

Unfortunately, I've not had time to loop around checking for free cells (laptop battery has 5 mins to go!), so you'll have to work that one out.

Hope this helps,
Dan



 
Upvote 0 Downvote

Now we're cooking... laptop is charged up again, and this should help you more.

If you replace the linkClicked function above with this one, it will search out the next available blank cell, or add a new row if one does not exist.

Incidentally, the following test:

Code: 
cellContent.charCodeAt(0) == 160

Is used to test for cells that contain "&nbsp;", as ASCII character 160 is the non-breaking space character.

Code: 
function linkClicked(linkText) {

	// find which day is selected
	var dayIndex = 0;
	var dayRadios = document.forms[0].elements['daySelect'];
	for (var loop=0; loop<dayRadios.length; loop++) if (dayRadios[loop].checked) dayIndex = loop;

	// find first free cell under day
	var emptyRowIndex = -1;

	var tableBody = document.getElementById('dayTable').tBodies[0];
	var tableRows = tableBody.rows;
	for (var loop=0; loop<tableRows.length; loop++) {

		// is the cell empty?
		if (tableRows[loop].cells[dayIndex].childNodes.length == 0) {
			emptyRowIndex = loop;
			break;
		}

		// if not empty, does it have an "empty" string, space, or non-breaking space character in it?
		var cellContent = tableRows[loop].cells[dayIndex].firstChild.nodeValue;
		if (cellContent == '' || cellContent == ' ' || cellContent.charCodeAt(0) == 160) {
			emptyRowIndex = loop;
			break;
		}
	}

	// if no free cell found, add a new blank row with 7 cells (Mon - Sun)
	if (emptyRowIndex == -1) {
		var newRow = document.createElement('tr');
		for (var loop=0; loop<7; loop++) {
			var newCell = document.createElement('td');
			newCell.appendChild(document.createTextNode(' '));
			newRow.appendChild(newCell);
		}
		tableBody.appendChild(newRow);
		emptyRowIndex = newRow.sectionRowIndex;
	}

	// populate the empty cell
	tableRows[emptyRowIndex].cells[dayIndex].firstChild.nodeValue = linkText;
}

Hope this helps,
Dan

 
Upvote 0 Downvote
That's perfect!
I used a hidden form value to select a Day table.
I also used a mouseover effect.
I'm posting my code:

weekplan.htm
Code: 
<style type="text/css">
<!--
/* week plan  */
.WeekPlanCol
{ width:200px; height:1px; }
.WPDates { font-size: 9px; color:#FF6600;}
.WPText{ font-size: 10px; color:#000000;}
.WPTitles { font-size: 10px; color:#ffffff; background-color:#0066CC; font-weight:bold;}

.WPTable1 { border-style:inset; border-width:2px;}
.WPTable2 { border-style:outset; border-width:2px; border-color:#FF0000; }
.WPTable3 { border-style:dashed; border-width:2px; border-color:#FFCC00; }
.style1 {font-weight: bold}
-->
</style>
<table width="100%"  border="0" cellspacing="6" cellpadding="0">
  <tr>
    <!--- first column --->
    <td valign="top">
	
	
	<table width="100%%"  border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=1">
        <tr align="left">
          <td colspan="4" class="WPTitles">Monday</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=2">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day2</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=3">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day 3</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=4">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day 4</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
  </tr>
    <tr>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=5">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day 5</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=6">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day 6</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellpadding="2" cellspacing="1" class="WPTable1" onmouseover="this.className='WPTable2'" onmouseout="this.className='WPTable1'" onClick="this.className='WPTable3'; document.Form_WP.SelDay.value=7">
        <tr align="left">
          <td colspan="4" class="WPTitles">Day 7</td>
        </tr>
        
          <tr>
            <td nowrap class="WPDates">21:00#</td>
            <td width="100%" class="WPText">aaaaaaaaaaaaaaaa</td>
            <td width="17"><a href=""><img src="images/adm_edit_small.gif" alt="Edit" width="11" height="10" border="0"></a></td>
            <td width="17"><a href=""><img src="images/adm_del_small.gif" alt="Delete" width="11" height="10" border="0"></a></td>
          </tr>
        
      	</table></td>
    <td>&nbsp;</td>
  </tr>  
</table>

		
		
	  </td>
    <!--- second column --->
    <td class="WeekPlanCol"><img src="images/spacer.gif" class="WeekPlanCol"><br>
      <iframe src="programs.htm" width="200" height="300" frameborder="0" marginheight="0" marginwidth="0" name="prgiframe" scrolling="auto"></iframe>
    </td>
  </tr>
</table>
<a href="javascript:alert(document.Form_WP.SelDay.value);">111111</a>
<form name="Form_WP">
<input type="hidden" name="SelDay" value="">
</form>
<cfinclude template="footer.cfm">

and programs.htm (the iframe page)
Code: 
<table width="198" border=0 cellspacing=1 cellpadding=0 align="center">
    <tr>
      <td style="font-size:10px;">p050</td>
      <td style="font-size:10px;"><a href="Javascript:alert('this is what i want to add to the selected day, but not only the text i also need it\'s value')">Text 1</a></td>
    </tr>

    <tr>
      <td style="font-size:10px;">p100</td>
	  <td style="font-size:10px;"><a href="this.htm?valueineed=1">Text 2</a></td>
    </tr>


    <tr>
      <td style="font-size:10px;">p150</td>
      <td style="font-size:10px;"><a href="">Text 3</a></td>
    </tr>

    <tr>
      <td style="font-size:10px;">p140</td>
      <td style="font-size:10px;"><a href="">Text 4</a></td>
    </tr>
</table>

--------------
Now one more question, is it possible when some clicks the iframe text link to pass / add to the selected table it's text & it's value ?
These text links in the iframe are read from the database and represend some TV programs.
All of them has a default start time and a duration.
So my links are something like this:
<a href="weekplan.htm?programstarttime=17:30&prgduration=90">Sex and the city</a>

1) How can i add for example the text of the Sex and the city to a form input with hidden values it's start time and it's duration, and
2) how can i automatically SORT by start time the list for each day?

In the above example if someone has already selected Monday and has added Sex and the City first row in the Monday like this:
17:30 | Sex and the City
and he/she then clicks <a href="weekplan.htm?programstarttime=14:00&prgduration=120">The fun</a>
we must get:
14:00 | The fun
17:30 | Sex and the City

etc...
Can you also help in this??
Thank a lot for your great help!
 
Upvote 0 Downvote
Also i need to remove (on the fly) an added line ...

Then i want to submit all this data and write it to the database (i know how to do this, i only need all the added lines and text & values in form fields)
 
Upvote 0 Downvote

If you change the selectThis function to this:

Code: 
function selectThis(linkObj) {
	parent.linkClicked(linkObj.firstChild.nodeValue, linkObj.href);
}

and the linkClicked function declaration to this:

Code: 
function linkClicked(linkText, linkHref) {

then the HREF data will be available to you in the linkClicked function... so you will be able to parse it, use it for sorting, etc.

If you want to insert data in sorted order, that's a whole new ball-game. Not only would you have to insert rows, but you would only want to do so for certain columns.

Hope this helps,
Dan

 
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
154
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
176
Kennelbloke
Kennelbloke
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
231
xwb
xwb
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
69
feherke
feherke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top