Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript update Iframe

Posted on 2004-04-26
3
Medium Priority
?
917 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
[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
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
lil_puffball earned 1000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

609 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