Solved

Reload frame with button

Posted on 2009-03-31
39
863 Views
Last Modified: 2012-08-13
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
Comment
Question by:MisterHamper
  • 17
  • 14
  • 8
39 Comments
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
framename.location.reload(true)
0
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
Go for:
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.location.href = frame1.location.href" target="frame1">

Open in new window

0
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 2

Accepted Solution

by:
captaincagemen earned 125 total points
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
If you are using name instead of id then you should use captaincagemen's approach.
0
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
Did you change "formname" to the name of your form?

If you don't know the form name, try "frame1.forms[0].submit()".
0
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
Did you try the following?
<INPUT TYPE="image" src="refresh.jpg" value="Reload" onClick="frame1.forms[0].submit()">

Open in new window

0
 

Author Comment

by:MisterHamper
Comment Utility
And Google is to no help here :)
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
Agreeing with numberkruncher here, you will probally not have a FORM tage in the php file wich is loaded in the iframe
0
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
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
 
LVL 2

Expert Comment

by:captaincagemen
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
Just removed that. Didn't fix it. What could be wrong then?
0
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
Is your website online? If so, could you post the URL so that we can take a look.
0
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
It's at my site if you want to give it a shot and see if it works for you :)
0
 
LVL 13

Assisted Solution

by:numberkruncher
numberkruncher earned 125 total points
Comment Utility
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
 

Author Comment

by:MisterHamper
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now