Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11001
  • Last Modified:

Refresh an iFrame from the parent

Hi everybody,

I need refreshing an iframe from the parent when the list menu is changed. I have tried the following code:

 <script type="text/javascript">
  function go()
    {
      document.main.submit();
             }
      function reload()
{
       document.getElementById("Frame3").location.reload();
}         
</script>
<script type="text/javascript">
      function reload()
      {
            document.getElementById("Frame3").location.reload();
                  }      
</script>
<body>
<form name="main" action="county.php" method="post" target="county">
<select name="state" size=1 onClick="go();" onClick="reload();">
<iframe src="city.php" id="Frame3" name="city" width="700" height="200" frameborder="0"></iframe>

It does not work. I also tried

onClick="document.getElementById("Frame3").location.reload();"

It does not work also.

Any ideas, please.

Thanks
Andy
0
andy7789
Asked:
andy7789
  • 11
  • 6
  • 6
  • +1
1 Solution
 
Richard QuadlingSenior Software DeverloperCommented:
Hi andy7789,


What happens if you location.href = location.href;



Regards,

Richard Quadling.
0
 
andy7789Author Commented:
Richard,

Sorry, do not get it. Where do you want me to insert it?

Thanks

Andy
0
 
Richard QuadlingSenior Software DeverloperCommented:
Instead of ...

document.getElementById("Frame3").location.reload();

try ...

with (document.getElementById("Frame3"))
 {
 location.href = location.href;
 }

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Richard QuadlingSenior Software DeverloperCommented:
with (document.getElementById("Frame3").location)
 {
 href = href;
 }

0
 
Richard QuadlingSenior Software DeverloperCommented:
Try

document.getElementById("Frame3").location.reload(true);

or

with (document.getElementById("Frame3").location)
 {
 replace(href);
 }


0
 
andy7789Author Commented:
No, still the same problem...
0
 
andy7789Author Commented:
I am checking your last solutions...
0
 
william007Commented:
Hi, try this,


 <script type="text/javascript">
  function go()
    {
      document.main.submit();
            }
     function reload()
{
      document.getElementById("Frame3").src=document.getElementById("Frame3").src;
}        
</script>

<body>
<form name="main" action="" method="post" target="county">
<select name="state" size=1 onClick="reload();"><option value=1>a</option><option value=1>b</option></select>

<iframe id="Frame3" src="Todo.htm"  name="city" width="700" height="200" frameborder="1"></iframe>
</body>
0
 
william007Commented:
Just remember to change the Todo.htm to your php file...
0
 
andy7789Author Commented:
Hi William,

Yes, your line   document.getElementById("Frame3").src=document.getElementById("Frame3").src; is working, but now I have lost my submit-on-click option. I have combined

 function go()
    {
      document.main.submit();
        document.getElementById("Frame3").src=document.getElementById("Frame3").src;
             }

<form name="main" action="county.php" method="post" target="county">
<select name="state" size=1 onClick="go();")>

Now it refreshes the Frame3, but does not submit onClick. I cannot understand why document.main.submit() is not working after I added your 2nd line, which is working.

Thanks

Andy
0
 
Richard QuadlingSenior Software DeverloperCommented:
When you submit a form, then page is reloaded. So the second line is never reached.
0
 
william007Commented:
Hi, RQuading is right.
0
 
william007Commented:
Sorry, is RQuadling ;)
0
 
Richard QuadlingSenior Software DeverloperCommented:
If you had the form in a frame,then MAYBE only that frame would be reloaded when you told it to submit.

0
 
andy7789Author Commented:
It seems that the second line is reached, but the first line is not, because, the iframe is refreshing and it is on the 2nd line.
Anyway, how could I do both actions onClick - submit the form and refresh an iframe?
I can submit onChange, but I would rather do both onClick.

Thanks
Andy
0
 
william007Commented:
Hi, can you tell us why you need to submit the form as well as refresh the iframe? Since you submit the form, you are losing control to the current form.

If you just want to show the country list, refresh the iframe will do the job.
0
 
andy7789Author Commented:
It is a bit more complicated. I have 3 dependent input forms. The selected value in the 1st form generates the options for the second form etc. All the values come from the database. After the 2nd option is selected, the 3rd iframe form is populated. Next, if we change the 1st form input, it submits the value to the second form (which is reloaded), but the last 3rd form in the 3rd frame still contains the options from the previous run.
That's it.

So far the best solution what I have found is to refresh the 3rd frame onChange (1st form), and submit the 1st form onClick.
0
 
Michel PlungjanIT ExpertCommented:
If the target of the form is not the same page as the page with the iframe then you just need to clean up your code


 <script type="text/javascript">
function go(theForm) {
  theForm.submit(); //
  reloadIframe()
}
function reloadIframe() {
  window.frames["Frame3"].location.reload(1); // leave out the 1 to just reload from cache
}        
</script>
<body>
<form name="main" action="county.php" method="post" target="county">
<select name="state" size=1 onClick="go(this.form);">


<iframe src="city.php" id="Frame3" name="city" width="700" height="200" frameborder="0"></iframe>


You cannot have two onClick handlers, instead execute two statements in the go.
I passed the form to the function so you do not need to name the form
0
 
andy7789Author Commented:
Thanks a lot everybody. William's solution works the best for me.
0
 
Michel PlungjanIT ExpertCommented:
How so?

It only reloads the frame (from cache), it does not submit the form onChange of the select...
0
 
andy7789Author Commented:
Here is the soluition (combined with william's) that works for me:

<script type="text/javascript">
  function go()
    {
        document.getElementById("Frame3").src=document.getElementById("Frame3").src;
             }
</script>
<select name="state" size=1 onClick="document.main.sibmit();" onChange="go();")>
<iframe src="county.php" name="county" width="700" height="30" frameborder="1" marginwidth="0" marginheight="0"></iframe>
<br />
<iframe src="city.php" id="Frame3" name="city" width="700" height="200" frameborder="1" marginwidth="0" marginheight="0"></iframe>

As you see, it submits to the iframe "county" onClick and refreshes another frame "city" onChange
0
 
Michel PlungjanIT ExpertCommented:
But that is not correct javascript (apart from sibmit).

Simply combine both in the onChange as I suggested in my rather more compatible suggestion


<script type="text/javascript">
function go(theForm) {
  theForm.submit(); // submit
  window.frames["Frame3"].location.reload(1); // reload in the correct manner
}
</script>
<select name="state" size=1 onChange="go(this.form)">
<iframe src="county.php" name="county" width="700" height="30" frameborder="1" marginwidth="0" marginheight="0"></iframe>
<br />
<iframe src="city.php" id="Frame3" name="city" width="700" height="200" frameborder="1" marginwidth="0" marginheight="0"></iframe>
0
 
andy7789Author Commented:
I have tried this, but its not working. What happens, it reloads the Frame3, but does not submit the form. My variant works on ie, netscape and firefox. What do you mean under not correct javascript?
0
 
Michel PlungjanIT ExpertCommented:
The correct event handler for a drop down is onChange
onClick is not supported by several browsers
Also ....src=....src is not the way to reload a frame/window
location.reload(1) is the correct syntax.

I would like to see an example of where it does not submit the form...
Perhaps there were other reasons..
0
 
andy7789Author Commented:
Thanks mplungjan,

I will check a few more options and give you an example, when the form is not submitted.
0
 
Michel PlungjanIT ExpertCommented:
Here is a boiled down example to prove my suggestion which I now see did not work in FF because it had ID="Frame3" and not NAME=Frame3. Now I changed to   window.frames["city"].location.reload(1);  it also works in FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
<script type="text/javascript">
function changeFrames(theForm) {
  theForm.submit(); // submit
  window.frames["city"].location.reload(1); // reload in the correct manner
}
</script>
 
</head>

<body>


<form target="county" action="http://www.google.com/search">
<select name="q" size=1 onChange="changeFrames(this.form)">
<option value="">Please select
<option value="Keukenhof">Keukenhof
<option value="The Hague">The Hague
</select><br>
<iframe src="javascript:''" name="county" width="700" height="300" frameborder="1" marginwidth="0" marginheight="0"></iframe>
<br />
<iframe src="javascript:'<script>document.write(new Date())</script>'" id="Frame3" name="city" width="700" height="200" frameborder="1" marginwidth="0" marginheight="0"></iframe>
</form>

</body>
</html>
0
 
william007Commented:
Hi, andy7789, I think mplungjan has provided a more feasible solution than mine,
You should consider accept his answer after resolving all the issue.

About the submit comment, I missed out the target part of the form. So in this case, you can submit + reload like mplungjan suggest. I learnt something from it indeed.

If you want to accept mplungjan answer, just post a comment here, I think mplungjan will do that for you.
0
 
andy7789Author Commented:
Mplungjan,

Thank you for the multiple solutions. Here is the report what is working and what is not:

1.
<script type="text/javascript">
  function go(theForm)
    {
      theForm.submit();
  window.frames["city"].location.reload(1);
             }
</script>
<select name="state" size=1 onChange="go(this.Form);")>

Not working at all: no doc submit + no refresh

2. My small modification to your suggestion:
  function go()
    {
  document.main.submit();
        window.frames["city"].location.reload(1);
             }
</script>
<select name="state" size=1 onChange="go();")>

Submit form is OK (this is my old version), refresh the window causes popping the window to confirm sending POSTDATA. Clicking OK does not reload the Frame3 anyway. Not good at all.

3.
 function go()
    {
      document.main.submit();
        window.frames["Frame3"].location.reload(1); // your previous version
             }
</script>

Refreshing Frame 3 does not work on all browsers.

So far the only working solution looks as the follows:

<script type="text/javascript">
  function go()
    {
     document.main.submit();
     document.getElementById("Frame3").src=document.getElementById("Frame3").src;
             }
</script>
 </head>
<body>
<?php
      require_once('Connections/myconn.php');
      mysql_select_db($database_myconn,$myconn);
      require_once('myfunctions.php');
?>
<form style="margin: 0; padding: 0; border: 0px;" name="main" action="county.php" method="post" target="county">
<select name="state" size=1 onChange="go();")>

<?php      
$q=mysql_query("SELECT DISTINCT State FROM zipcodes GROUP by State");
while($r=mysql_fetch_array($q)){
echo "<option>$r[State]</option>";
}
?>
</select>
<input type="submit" value="Get State" />
</form>
<iframe src="county.php" name="county" width="700" height="30" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<br />
<iframe src="city.php" id="Frame3" name="city" width="700" height="200" frameborder="0" marginwidth="0" marginheight="0"></iframe>

I am sorry, but so far only william007's solution realy reloads the Frame3 and works on all browsers.

Thanks
Andy
0
 
Michel PlungjanIT ExpertCommented:
1. You can forget   window.frames["Frame3"].location.reload(1);
that was a mistake - the correct version is
window.frames["city"].location.reload(1);

2. if you pasted the code in, then there are mistakes in

<script type="text/javascript">
  function go(theForm)
    {
      theForm.submit();
  window.frames["city"].location.reload(1);
            }
</script>
<select name="state" size=1 onChange="go(this.Form);")>

go(this.Form)
MUST be
go(this.form)
lowercase f - as I had in all my examples
If it is NOT lowercase, the script will fail completely.
also the select MUST be inside form tags!!!
and there is an extra (not important but unnecessary) bracket here: "go(this.Form);")

So I suggest you try again with this:

<script type="text/javascript">
function reloadFrames(theForm) { /* changed name since "go" is flagged as a reserved word */
  theForm.submit();
  window.frames["city"].location.reload(1);
}
</script>
<select name="state" size=1 onChange="reloadFrames(this.form)">


Thanks.

Javascript can be hard to test sometimes due to cut and paste errors and the like.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 11
  • 6
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now