Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Reload frame with button

Posted on 2009-03-31
39
Medium Priority
?
900 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 17
  • 14
  • 8
39 Comments
 
LVL 2

Expert Comment

by:captaincagemen
ID: 24033969
framename.location.reload(true)
0
 
LVL 13

Expert Comment

by:numberkruncher
ID: 24033971
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
ID: 24034072
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 13

Expert Comment

by:numberkruncher
ID: 24034086
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
ID: 24034093
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
ID: 24034101
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
ID: 24034108
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
ID: 24034143
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 500 total points
ID: 24034172
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
ID: 24034182
If you are using name instead of id then you should use captaincagemen's approach.
0
 
LVL 2

Expert Comment

by:captaincagemen
ID: 24034183
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
ID: 24034187
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
ID: 24034253
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
ID: 24034270
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
ID: 24034274
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
ID: 24034279
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
ID: 24034359
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
ID: 24034387
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
ID: 24034396
And Google is to no help here :)
0
 

Author Comment

by:MisterHamper
ID: 24034404
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
ID: 24034439
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
ID: 24034464
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
ID: 24034502
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
ID: 24034522
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
ID: 24034526
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
ID: 24034528
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
ID: 24034577
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
ID: 24034593
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
ID: 24034606
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
ID: 24034611
Just removed that. Didn't fix it. What could be wrong then?
0
 
LVL 13

Expert Comment

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

Author Comment

by:MisterHamper
ID: 24034658
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
ID: 24034720
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
ID: 24034761
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
ID: 24034776
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
ID: 24034796
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
ID: 24034799
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 500 total points
ID: 24034840
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
ID: 24034862
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

618 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