Link to home
Start Free TrialLog in
Avatar of MisterHamper
MisterHamperFlag for Denmark

asked on

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!!
Avatar of captaincagemen
captaincagemen
Flag of Netherlands image

framename.location.reload(true)
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

Avatar of MisterHamper

ASKER

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 :(
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

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)">
Go for:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.location.href = frame1.location.href" target="frame1">

Open in new window

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

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. :-(
ASKER CERTIFIED SOLUTION
Avatar of captaincagemen
captaincagemen
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
If you are using name instead of id then you should use captaincagemen's approach.
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

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');
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
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
Did you change "formname" to the name of your form?

If you don't know the form name, try "frame1.forms[0].submit()".
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

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?
Did you try the following?
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.forms[0].submit()">

Open in new window

And Google is to no help here :)
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
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

Agreeing with numberkruncher here, you will probally not have a FORM tage in the php file wich is loaded in the iframe
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
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

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

Open in new window

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

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

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

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

Just removed that. Didn't fix it. What could be wrong then?
Is your website online? If so, could you post the URL so that we can take a look.
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.
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

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)
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.
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
It's at my site if you want to give it a shot and see if it works for you :)
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!