Question

I have a user selected pdf statement to display in a frame in the same web page. First I want the list of pdfs that are clickable to appear and then the pdf file to be loaded info frame when the user selects on the same page retaining the rest of the web page.

I am storing what the user has clicked using a global variable(userSelection) in the .js file (see function getUserSelection()). Accessing the same variable in setSource(). This is called while loading the iframe.

Right now, on firefox the function setSource() never gets called and the page doesn’t seem to respond to the mouse click. What am i doing wrong? This functionality is pretty basic, so there must be some work around. Please help!! –jody

    //Javascript
    var userSelection;

    function getUserSelection(yearandDoc)
    {
          userSelection="0";
          switch (yearAndDoc)
          {
       case '0506BS':  userSelection="1";
                             break;
             case '0506RP':  userSelection="2";
                             break;
             default:        break;
          }
    }

    function setSource ()
    {
         switch (userSelection){
            case "1":   document.getElementById("stmtFrame").src = "2005-06_BS_IE_Stmt.pdf";
                  userSelection="0";
                  break;
            case "2":   document.getElementById("stmtFrame").src = "2005-06_RP.pdf";
                  userSelection="0";
                  break;
            default:  document.getElementById("stmtFrame").src = "";
                  break;
      }
    }   


<!-- Here is the HTML -->

 <div>
     <p>2005/06 :  <a href="javascript:getUserSelection('0506BS')">Balance Sheet</a> ||
                   <a href="javascript:getUserSelection('0506RP')">Receipts &amp; Payments</a></p>

     <iframe id="stmtFrame" onload="javascript:setSource()"  frameborder="0" width="100%" height="700" </iframe> 
  </div>

Answer 1

Firstly, there are a few mistakes:

function getUserSelection(yearAndDoc) // not yearandDoc
<iframe ... ></iframe> // before you were missing >

Secondly, I think that changing the src attribute of the iframe calls the onload event. This means that your code is an infinite loop, since the onload event fires a function that adjusts the src attribute.

If I understand what you’re trying to do, you should be able to just merge the two functions, so that the src attribute only gets changed when you click one of the links:

function getUserSelection(yearAndDoc)
{
      switch (yearAndDoc)
      {
         case '0506BS':  document.getElementById("stmtFrame").src = "2005-06_BS_IE_Stmt.pdf";
                         break;
         case '0506RP':  document.getElementById("stmtFrame").src = "2005-06_RP.pdf";
                         break;
         default:        break;
      }
}

HTML:

<div>
     <p>2005/06 :  <a href="#" onclick="getUserSelection('0506BS')">Balance Sheet</a> ||
                   <a href="#" onclick="getUserSelection('0506RP')">Receipts &amp; Payments</a></p>

     <iframe id="stmtFrame" frameborder="0" width="100%" height="700"></iframe> 
</div>