Pass values from iframe list to document week plan dynamic 1

dimsis · Dec 2, 2004

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

BillyRayPreachersSon · Dec 2, 2004

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

BillyRayPreachersSon · Dec 2, 2004

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 " ", 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

dimsis · Dec 2, 2004

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!

dimsis · Dec 3, 2004

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)

BillyRayPreachersSon · Dec 3, 2004

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

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!

Pass values from iframe list to document week plan dynamic 1

dimsis

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

dimsis

Programmer

dimsis

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor