title: Refreshing Iframe With Script Inside A Parent Page
body: <p>I'm working on a little something that will be part of an e-commerce website for an assignment. You will probably look at it and think I should just do it with JS, but we're told to use hardly any JS, and instead favor PHP especially when querying the SQL tables.</p>
  
  <p>I'm building something where when a user mouseOvers() any of the images in the catalogue, a general iFrame refreshes with information based on the image that has the current focus - it does this by querying the database using a variable upon being loaded. This is where I've used JS to submit the form that refreshes an iFrame and, as PHP is parsed server side, upon being refreshed the information can be loaded seemingly dynamically to the user.</p>
  
  <p>It all seems to be working except from the fact the target iframe does not get updated, but instead the page is loaded in a new tab or window in my browser (Firefox). NOTE: This code is a rough draft!</p>
  
  <pre><code>&lt;div class="contentpane"&gt;
  
  
  &lt;div class="image1" onMouseOver="jsFunction();" onMouseOut="jsFunction2();"&gt;
      &lt;img src="http://t0.gstatic.com/images?q=tbn:ANd9GcStRUHQMqvpCvdCyEwkO9DFxy0IY9fg1CP3uePBktHRMz8QznlQ" width=100 height=100/&gt;
  
  &lt;/div&gt;
  
  &lt;div class="image2"&gt;
  &lt;/div&gt;
  
  &lt;div class="image3"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function jsFunction(){
  
      document.forms['testform'].elements['i1'].value =  "mouseOver";
      document.forms["testform"].submit();
      // force refresh on Mouse Over
      /*var f = document.getElementById('testiframe');
      f.contentWindow.location.reload(true);*/
  
  }
  
  function jsFunction2(){
  
  document.forms['testform'].elements['i1'].value = "mouseOut";
  document.forms["testform"].submit();
  
  }
  
  &lt;/script&gt;
  
  
  &lt;iframe src="iframetest.php" id='testiframe' width="200" height="200"&gt;
  &lt;!-- using this roundabout way with iframes so that all interaction with SQL is via PHP and not JS--&gt;
  &lt;/iframe&gt;
  
  &lt;!-- hidden form that has a target of the iframe, submitted by the js functions--&gt;
  &lt;form id="testform" method="GET" target="testiframe" action="iframetest.php" &gt;
      &lt;input type="hidden" id="i1" name="i1" value="hey"&gt; &lt;!-- retrieved in php file by $_GET--&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the code for iframetest.php is:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  Dynamic content, will be pulled from SQL via PHP &lt;br/&gt; &lt;br/&gt;
  
  
  &lt;?php 
  if(isset($_GET)){
  echo $_GET["i1"];
  } 
  ?&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Thanks for your help guys!</p>