[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Reload frame with button

Hey! I have looked through 20 posts now, but none answered my question. I have a couple of iFrames on my site, showing some scripts from differant php-files each. I have above each frame a picture to reload them, but I can't get it to work correctly. The php-files are pretty sensitive, and the only thing that works is a "true" reload (fx right-click > Reload Frame) or this script here, which works pretty well:

<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="self.location.reload(true)" target="frame1">

But that script reloads every frame, and not just the one frame. How do I target it to reload frame1 only? Thanks!!
0
MisterHamper
Asked:
MisterHamper
  • 17
  • 14
  • 8
2 Solutions
 
captaincagemenCommented:
framename.location.reload(true)
0
 
numberkruncherCommented:
You should be able to perform the same operation on the frame in question. Try the following:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="document.getElementById('frame1').location.reload(true)" target="frame1">

Open in new window

0
 
MisterHamperAuthor Commented:
Thank you!
I understand now, that it was just about replacing "self" with "frame1". So simple yet so smart. :-)

Is there by the way any way to remove or disable or stop this from showing up, the "To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier"? It comes when I reload the frames. But the point is to be able to change the frames for the users, so that message is rather annoying :(
0
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!

 
numberkruncherCommented:
Instead of refreshing the frame you could try the following:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="document.getElementById('frame1').location.href = document.getElementById('frame1').location.href" target="frame1">

Open in new window

0
 
MisterHamperAuthor Commented:
I didn't come up before, with this code by the way, when all the frames where reloaded at once (or something like that)
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="self.location.reload(true)" target="frame1">

But with this code, it does show up
<INPUT TYPE="image" src="refresh.jpg" onClick="frame1.location.reload(true)">
0
 
captaincagemenCommented:
Go for:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.location.href = frame1.location.href" target="frame1">

Open in new window

0
 
numberkruncherCommented:
Actually you could get rid of the target attribute, it doesn't actually do anything in this context.

Also, the following version is slightly more efficient.
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="{var f=document.getElementById('frame1'); f.location.href = f.location.href;}">

Open in new window

0
 
MisterHamperAuthor Commented:
numberkruncher:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="document.getElementById('frame1').location.href = document.getElementById('frame1').location.href" target="frame1">
When I insert this script, it does nothing with my frame1. Nothing happens when I click it. Is there any explanation for that maybe? :)

captaincagemen:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.location.href = frame1.location.href" target="frame1">
Thanks. Just tried that one out. It reloads, but it forgets about what have been typed in before so it practically resets the frame. :-(
0
 
captaincagemenCommented:
Ahh but if you want that frame to remember the form information you should not reload it or changes it location. You should POST the form inside the frame. You already got the code to show the post values as input values?

then it would be something like this:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.location.href = frame1.formname.submit()" target="frame1">

Open in new window

0
 
numberkruncherCommented:
If you are using name instead of id then you should use captaincagemen's approach.
0
 
captaincagemenCommented:
made a mistake there! it should be:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.formname.submit()" target="frame1">

Open in new window

0
 
MisterHamperAuthor Commented:
numberkruncher:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="{var f=document.getElementById('frame1'); f.location.href = f.location.href;}">
Thanks for the help, but this one is the same as the last one, nothing happens when I click the image. Quite strange. I also tried with ('frame1.php');
0
 
MisterHamperAuthor Commented:
Captaincagemen:
I just tried your script, the most recent one,
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.formname.submit()" target="frame1">
and nothing happened when I clicks the image in that script. :-(

But it is just that when i rightclick the frame and select "Refresh Frame", it remembers the form information and works perfectly (except when i select "Refresh Frame" it asks about if "To display this page, Firefox must send information that will repeat any action"). But the first script I used, in Post #0, the frames still remembered their information and reload perfectly without any messages. I don't get why it then asks once it is just a single frame that will be reloaded, and not all at once. But I am not that good at scripting yet, sadly
0
 
MisterHamperAuthor Commented:
Maybe many of the scripts don't work because I don't have a JavaSource script at the top of my index.php? Just wondering if that could be the reason only some of the scripts have worked so far
0
 
numberkruncherCommented:
Did you change "formname" to the name of your form?

If you don't know the form name, try "frame1.forms[0].submit()".
0
 
captaincagemenCommented:
You did replace the "fornname" with the name of your form right ?
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.YOURFORMNAME.submit()" target="frame1">
 
if thats not working try
 
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.forms[0].submit()" target="frame1">

Open in new window

0
 
MisterHamperAuthor Commented:
Ohh, no I didn't replace the formname. There is no formname or form name in my index.php, so I don't quite know what it is. What is the difference from a normal "name="frame1"? And is it just to write "formname="frame1" in my iFrame script?
0
 
numberkruncherCommented:
Did you try the following?
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.forms[0].submit()">

Open in new window

0
 
MisterHamperAuthor Commented:
And Google is to no help here :)
0
 
MisterHamperAuthor Commented:
Oh yeah, I did try that. That was the same as most of the others. Nothing happened when i click the image at all. Maybe I should try with a formname. Is just "formname="frame1" in my iframe script? Oh and thank for helping me out
0
 
numberkruncherCommented:
Have a look in the source code for the frame in question. Look for a "<form " tag.

If you cannot find a form tag, then that's why you cannot submit it, there isn't one to submit. This would be rather odd, because there must have been some sort of a form to submit if your getting a message box confirming the re-submit!

If you find a form tag, and it doesn't have a name, then simply give it a name "form1" or something, and use:

<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.form1.submit()">

Open in new window

0
 
captaincagemenCommented:
Agreeing with numberkruncher here, you will probally not have a FORM tage in the php file wich is loaded in the iframe
0
 
MisterHamperAuthor Commented:
Just tried Ctrl+F and there is no "form" in any of the php-scripts, and in index.php the only "form" is from the submit-button

<form action="frame1.php" method="POST" target="frame1">
<input type="Text" value="Amount combined" name="amount">
<input type="image" src="submit.jpg" width="20" height="20" border="0" value="Update">
</form>

Could it be "name="amount"", thats the formname? I just tried writing amount in the formname's spot in your script, still the samy - not working. Strange
0
 
captaincagemenCommented:
make that part:
<form action="frame1.php" method="POST" name="form1" target="frame1">
<input type="Text" value="Amount combined" name="amount">
<input type="image" src="submit.jpg" width="20" height="20" border="0" value="Update">
</form>

Open in new window

0
 
captaincagemenCommented:
and then at the other end ofcourse this:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.form1.submit()">

Open in new window

0
 
numberkruncherCommented:
Try using the following instead, and then use the previous example I gave:
<form name="form1" action="frame1.php" method="POST" target="frame1">
<input type="Text" value="Amount combined" name="amount">
<input type="image" src="submit.jpg" width="20" height="20" border="0" value="Update">
</form>
 
 
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.form1.submit()">

Open in new window

0
 
MisterHamperAuthor Commented:
This is pretty weird. It still isn't working. The same problem as before with teh script, nothing happens when clicking the image at all

This is how my script looks like now. Should be correct:
<body>
 
<form action="meal1.php" method="POST" name="form1" target="meal1">
<input type="Text" value="Amount combined" name="amount">
<input type="image" src="submit.jpg" width="20" height="20" border="0" value="Update">
</form>
<br><br>
 
<font face="verdana" size="1"><INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="meal1.form1.submit()"><br>
<iframe  src="meal1.php" name="meal1" FORM NAME="form1" frameborder="0" width="370" height="95" scrolling="no">Your browser doesn't support iFrames.</iframe>

Open in new window

0
 
numberkruncherCommented:
You need to remove:

FORM NAME="form1

from the second part. But this probably wont fix the problem.
<font face="verdana" size="1"><INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="meal1.form1.submit()"><br>
<iframe  src="meal1.php" name="meal1" frameborder="0" width="370" height="95" scrolling="no">Your browser doesn't support iFrames.</iframe>

Open in new window

0
 
numberkruncherCommented:
Got it....I think

What page is the following bit on?

<form action="meal1.php" method="POST" name="form1"

If your answer is "ABC.php" then change the above to:

<form action="ABC.php" method="POST" name="form1"

and use the original:

<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="meal1.location.href = meal1.location.href">

Open in new window

0
 
MisterHamperAuthor Commented:
Just removed that. Didn't fix it. What could be wrong then?
0
 
numberkruncherCommented:
Is your website online? If so, could you post the URL so that we can take a look.
0
 
MisterHamperAuthor Commented:
Yeah here you go
http://kortlink.dk/6f8n
As you can see, the first Refresh button doesn't work (the one we have been toying with) and the second one works (but that's because it just completely resets the site by loading it with a href=the true link.
0
 
numberkruncherCommented:
I have tested the following in both Chrome and FF and they both seem to work. I type in an amount in the textbox at the top, click the refresh button next to "Breakfast" and the details change below witihout any message boxes.

I was not able to test this in IE because its DOM debugger doesn't let you go inside nested frames.
<input type="image" onclick="meal1.location.href=meal1.location.href" value="Reload" src="refresh.jpg"/>

Open in new window

0
 
MisterHamperAuthor Commented:
Hmm that is indeed very strange. Because it isn't working AT ALL for me. I just tried in Internet Explorer - it says "Error on page" in the bottom.

Just tried your script down there. It does reload with that, but it resets the whole php in the frame, so it doesn't remember the setting you typed in at the top of the page. If you type in fx 6000, and then refresh with the button, is there still 6 items in the frame, instead of just around 2 to 4? (it is still the original script at my page at the link)
0
 
numberkruncherCommented:
Try using my last code snippet on your page, might be worth me trying that here to see if it works outside of the debugger.
0
 
MisterHamperAuthor Commented:
I have now updated the breakfast-refresher with your latest piece of code. It does indeed refresh, but if you type in an amount at the top (fx 6000) it doesn't remember that you typed in 6000. It just restarts from the start, which is ~2000
0
 
MisterHamperAuthor Commented:
It's at my site if you want to give it a shot and see if it works for you :)
0
 
numberkruncherCommented:
I have just tested that page in Chrome, and IE7 and IE8 and all three do the same thing.

- I type in "6000" at the top
- Click the blue refresh arrows
- Display beneath changes, and textbox remains as "6000".

The refresh frame part is actually working.

The reason that it forgets the current value is because your form action posts back to "meal1.php", and that result is then being returned to the frame. Obviously this is not happening when it gets refreshed.

What is your motivation of using IFRAMES here? It would be far easier to use AJAX, and simply bounce requests to and from the server. You can then update the page content dynamically using JavaScript, and you never have to leave the page.

There is a library called "Prototype Framework for JavaScript" (http://prototypejs.org) which is absolutely fantastic at making life with AJAX simple.
0
 
MisterHamperAuthor Commented:
I began using iFrames because it was the only thing I knew could do that :)
But thanks alot, I will check out that Prototype Framework out tomorrow! Thanks for the help, both you and captaincagemen!
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!

  • 17
  • 14
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now