I have a JS function that is called in an iFrame that performs a post to my server and THEN is suppose to refresh the parent page of the iFrame. When I click a button on a third party site, a hidden div is rendered with my iframe. Once I make a submit post, I want to refresh the page (3rd party) page.
So the current setup for that website (which is third party and I have no control over their code), is this:
Body
div
div
div
table
tr
my iframe
....
So the code that is attached to my jQuery ajax POST call is such:
.....
xhtml.append("}).done(function() { alert('im here'); window.location.reload(false);});");
xhtml.append("}");
.....
I'd prefer not showing all the code - but I can confirm that the done callback from the post IS called correctly AND the page does appear to "refresh" - but it should be treating it almost like I first entered the page, with my iframe closed.
How do I get almost a fresh reload of the page/css/etc? I figured this would work, but it appears it doesn't.
--Edit--
I realized that adding reload(true) will reload the server on initial request. However, the other content that renders (to view the hidden div) doesn't appear to reload correctly. It leaves the hidden divs up.
--Edit 2--
It looks like that window.location.reload(false); isn't a true "replica" of a browser refresh call. Which is ideally what I'm looking for.
Instead of saying
window.location.reload
try using
window.parent.location.reload
Above options will only work in case of the page and contents of IFrame both are hosted on same domain.
Related
What I am trying to do is load content via Ajax on a site. So suppose we have this as the main page example.com/blankpage (I have used htaccess to get rid of the .html part). Currently I have this working, I click a link on the page that directs to mysite.com/blankpage#PAGE1 and the Ajax script will load all the text from PAGE1.html and place it into a div on blankpage.
Now here is what I am actually trying to do. Pretend I have another link on the page as such: mysite.com/blankpage?action=PAGE2. Clicking on the button works and it actually does load the contents of the file, however it only does so after loading a new page. It doesn't actually load PAGE2, it loads the blankpage and then replaces the contents of the div with the contents of PAGE2, which is what I want, but without a page load/refresh.
For the past hour I have been trying to find an error in my Ajax loading script but then it occurred to me that it might be the hash tag. Do Ajax page loads NEED # or am I actually making a mistake somewhere.
I can post the code if need be.
you can try jquery load() function.
I think it's useful for your requirement.
like div has is "blankPage".
so you can do like this
$('#blankPage').load(your url);
in this load function you can return your view and put this blankPage div.
We have the following situation:
We have a webpage (let's call it Page A) that gives us only the header of a website.
We have another webpage (let's call it Page B) that gives us the content with no header and includes the Page A in a hidden iframe.
When Page A is loaded it will get its own HTML and add it in an empty div in Page B.
All of this is working as expected.
My question:
Can I delay the page rendering of Page B when it reaches the iframe, wait for the iframe to load and when the HTML is populated in Page A to continue the rendering. The behaviour should be as if I'm calling the contents from a synchronous AJAX call. The idea is NOT to show the content of the Page below the main menu until the menu HTML is populated.
The business logics behind this:
We're using an external service as a forum and we need to add our website header above. They can give as a free-html slot where we can put our own HTML. The header is dynamic so we need to load it each time from an URL. Since their site may response faster we don't want the content to load and several moments later the menu to pop out of nowhere. We need to have the menu HTML populated before we continue showing the content. The Menu HTML is populated from an iFrame by the iFrame so we need to wait for it to load.
Any help will be appreciated.
Maybe you can hide the contents of Page B via style="display:none;" and then show the contents when iframe's load event fires.
Insert the markup for the <iframe> dynamically in a content loaded event handler. Since you've tagged the question jquery
$(window).on("load", function() {
var iframe = $("iframe").attr("src",url).whatever();
$("whatever selector").append(iframe);
})
I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js
I seem to be facing a strange issue here (at least seems so).
I have a DIV which has a few links (anchors) in it. Clicking a link makes an AJAX call (using jQuery), and the server (Controller) sends an HTML response (in fact, a JSP, via Spring MVC).
Now, this DIV can be reached by scrolling down the page. However, when I click the link within the DIV, I am navigated to the top of the page (the AJAX call doing its job in the background), whereas I expect (WANT) to stay where I was on the page (i.e., on that DIV).
How can I control that?
Make sure the href on your links call void(0) and use the onClick attribute for your AJAX function.
click me
Not having a value for the HREF attribute causes the page to scroll to the top. Anchors arent necessarily links to other pages, they can link to areas within the page, so if the HREF is blank it will simply go to the top.
How can make a link within a facebox window that redirects it to another page without breaking out?
I tried using an iframe which worked nicely... except the initial content I want to display in the facebox is a simple message and a link. I then want the link to redirect to a page if clicked.
As iframes require a src there is no where on the page I can write the message. My only thought was to generate a src for the iframe that passed the message as a parameter on a url to a php page that echoed the message (quite an ugly solution).
Is there a better way?
Well, you could use ajax to simply replace the contents of the facebox.
$("#mylink_id").click(function() {
$("#content_id").load($(this).attr('href'));
return false;
});