Solved

Javascript update Iframe

Posted on 2004-04-26
3
909 Views
Last Modified: 2012-05-04
For reference this form is to collect patient demographics and other patient information while a doctor is ordering laboratory tests through our new browser application.

Here's what I'd like to do. The four buttons listed below (General, Chem, Tox, etc) would be listed in the main page with a iframe listed just below it.

When the doctor clicks on any of the buttons, the div layers would populate the iframe with new information. My reason for this is they don't want to scroll pages and pages of information because of course all the other information throughout the form scrolls as well.

So looking for help to have the Dr to click on a button that will change the layer display within the iframe.

Thanks and some of my existing code is listed below.



<!---- Code Listed Below ---->

<script language="JavaScript">
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"

if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"

if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"

if (ng5) document.getElementById('sec4').style.visibility = "hidden"
else if (ns4) document.sec4.visibility = "hide"
else if (ie4) sec4.style.visibility ="hidden"
}

function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function showAllSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}
</script>

<input type="button" value="General" onclick="showSec(1)">
<input type="button" value="Chemistry" onclick="showSec(2)">
<input type="button" value="Toxicology" onclick="showSec(3)">
<input type="button" value="Cytology" onclick="showSec(4)">

<div id="sec1" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetaminophen (Tylenol)">500 Acetaminophen (Tylenol)</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetylcholine Receptor Antibody">417 Acetylcholine Receptor Antibody</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Culture">126 Acid Fast Bacillus Culture</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Smear">003 Acid Fast Bacillus Smear</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Prostatic">479 Acid Phosphatase, Prostatic</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Total">004 Acid Phosphatase, Total</td>
    </tr>
  </table>
</div>

<div id="sec2" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Basic Metabolic Profile">687 Basic Metabolic Profile</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Beta 2 Microglobulin">032 Beta 2 Microglobulin</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Body Fluid">050 Bilirubin, Body Fluid</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Direct">478 Bilirubin, Direct</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total">395 Bilirubin, Total</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total and Direct">052 Bilirubin, Total and Direct</td>
    </tr>
  </table>
</div>

<div id="sec3" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Peptide">512 C-Peptide</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Reactive Protein">111 C-Reactive Protein</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C1 Esterase Inhibitor">9927 C1 Esterase Inhibitor</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C2 Complement">9921 C2 Complement</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="CA 19-9">509 CA 19-9</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Cadmium, Urine 24 Hour">117 Cadmium, Urine 24 Hour</td>
    </tr>
  </table>
</div>

<div id="sec4" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer">055 D-Dimer</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer, Quantitative">7251 D-Dimer, Quantitative</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Desipramine (Norpramin)">293 Desipramine (Norpramin)</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Sulfate">554 DHEA Sulfate</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Unconjugated">9940 DHEA Unconjugated</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Dialysis Profile">699 Dialysis Profile</td>
    </tr>
  </table>
</div>
0
Comment
Question by:campbelc
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
lil_puffball earned 250 total points
ID: 10924779
Just use

window.frames['framename'].document

instead of

document.


Here is the code incorporated into your code:

-----------------------------------------------------------------
main page
-----------------------------------------------------------------
<script language="JavaScript">
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
  for(var i=1;i<=4;i++){
    if (ng5) window.frames['framename'].document.getElementById('sec'+i).style.visibility = "hidden"
    else if (ns4) window.frames['framename'].document.layers['sec'+i].visibility = "hide"
    else if (ie4) window.frames['framename'].document.all['sec'+i].style.visibility ="hidden"
  }
}

function showSec(n) {
hideSec();
if (ng5) window.frames['framename'].document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) window.frames['framename'].document.layers["sec" + n].visibility = "show";
else if (ie4) window.frames['framename'].document.all["sec" + n].style.visibility = "visible";
}

function showAllSec(n) {
if (ng5) window.frames['framename'].document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) window.frames['framename'].document.layers["sec" + n].visibility = "show";
else if (ie4) window.frames['framename'].document.all["sec" + n].style.visibility = "visible";
}
</script>

<input type="button" value="General" onclick="showSec(1)">
<input type="button" value="Chemistry" onclick="showSec(2)">
<input type="button" value="Toxicology" onclick="showSec(3)">
<input type="button" value="Cytology" onclick="showSec(4)">

<p><iframe src=iframe.htm style='width:100%;height:50%;' name=framename></iframe>

-----------------------------------------------------------------
iframe.htm
-----------------------------------------------------------------
<div id="sec1" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetaminophen (Tylenol)">500 Acetaminophen (Tylenol)</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetylcholine Receptor Antibody">417 Acetylcholine Receptor Antibody</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Culture">126 Acid Fast Bacillus Culture</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Smear">003 Acid Fast Bacillus Smear</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Prostatic">479 Acid Phosphatase, Prostatic</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Total">004 Acid Phosphatase, Total</td>
    </tr>
  </table>
</div>

<div id="sec2" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Basic Metabolic Profile">687 Basic Metabolic Profile</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Beta 2 Microglobulin">032 Beta 2 Microglobulin</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Body Fluid">050 Bilirubin, Body Fluid</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Direct">478 Bilirubin, Direct</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total">395 Bilirubin, Total</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total and Direct">052 Bilirubin, Total and Direct</td>
    </tr>
  </table>
</div>

<div id="sec3" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Peptide">512 C-Peptide</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Reactive Protein">111 C-Reactive Protein</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C1 Esterase Inhibitor">9927 C1 Esterase Inhibitor</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C2 Complement">9921 C2 Complement</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="CA 19-9">509 CA 19-9</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Cadmium, Urine 24 Hour">117 Cadmium, Urine 24 Hour</td>
    </tr>
  </table>
</div>

<div id="sec4" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer">055 D-Dimer</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer, Quantitative">7251 D-Dimer, Quantitative</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Desipramine (Norpramin)">293 Desipramine (Norpramin)</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Sulfate">554 DHEA Sulfate</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Unconjugated">9940 DHEA Unconjugated</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Dialysis Profile">699 Dialysis Profile</td>
    </tr>
  </table>
</div>
0
 
LVL 6

Author Comment

by:campbelc
ID: 10929561
Thanks I'll try it out
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 11111475
You're welcome. Thanks for the points and the A! :)
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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

911 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

16 Experts available now in Live!

Get 1:1 Help Now