My website with a data table releaods every 30 seconds to receive new data from a database.
The problem now is, if a fancybox is open (a chart is shown) and the parent site reloads, my fancybox with the chart closes.
How can I prevent this behavior? Meaning parent site reloads and receives new data and the opened fancybox (chart) still stays in the foreground till I close it.
Proper solution would be not to reload the page, but use ajax to get fresh data. It is technically impossible to keep modal open while page refresh. You could open fancybox after each refresh, but it would not be smooth.
I solved this behavior by using the JavaScript method setTimeout
setTimeout(function() {location.reload();},30*1000);
instead of
<meta http-equiv="refresh" content="30">
During reloading, the site is flashing, but the fancybox remains. It works for me.
Related
I am working on an Ionic 3 application. Inside a div, i am loading an external url in an iframe and it is loading perfectly. But it creates problem when focuses out. The iframe reloads every time when it focuses out.
Scenario-01: In the page where i have loaded the iframe, there are other controls outside of the iframe such as a text box to enter some data. So, when i click on the textbox, the keyboard appears but at the same time iframe reloads again.
Scenario-02: I have one menu sliding drawer from left in the application. When i open the sliding drawer to select another page, i could see the iframe of the existing page reloads again.
Scenario-03: The external url that i have loaded in the iframe has some input controls. So, i want to enter something in those input boxes, the keyboard appears but at the same time iframe gets reloaded and i could not provide any data in those input boxes.
From my assumption, iframe is causing problems when it focuses out. So, i tried to capture the blur event of that iframe and try to stop the propagation of the event.
<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe>
But, both ionFocus and ionBlur events were not triggering.
For now, when i tried with Android application, all the scenarios trigger iframe reload. As keyboard does not appears in browser, when i tried with Browser, only Scenario-02 triggers iframe reload.
Iframe should load at the first time only. Then user can do whatever operations inside the iframe or outside the iframe but the iframe should not load again.
How to stop reloading the iframe if it focuses out by keyboard or sliding drawer or anything?
I figured out the solution. The problem was with the safeHtml:'resourceUrl' pipe. It was sanitizing every time iframe comes in focus and prepared a new ResourceURL. As a result, iframe gets reloaded each time.
So, i sanitized the url beforehand in the ts and set it to the variable. As a result, iframe is not reloading anymore. I have used DomSanitizer to sanitize the resource url.
url: any;
constructor(private domSanitizer: DomSanitizer) {
this.url= this.getSantizedURL();
}
getSantizedURL() {
this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}
I have a page hosted on, say, www.domainX.com. In my page there is an iframe, src attribute of which is set to www.domainY.com (so it's on another domain). There are some links on the page served from www.domainY.com (so they show up in the iframe). When I click one of these links there happens the navigation inside the iframe. Now, when I move the cursor on iframe, right-click and select 'Back' on the appearing menu, it makes a back in the inner iframe. If I do the same thing again, it does a back on the main window, as if I pressed the back button of the browser (or I right-clicked out of the iframe and selected 'Back').
My problem is: I am OK with back navigations in the iframe, but I do not want them to bubble up to the main window. I can alter the source code of the page on www.domainX.com, but I don't have access to the source code of the page on www.domainY.com . I tried attaching an 'onback' handler on the iframe element, which stops the event propagation; but it did not work. Any pointers will be appreciated.
Thanks
I have a link, it looks like that:
link text
The target (shop) is an iframe with the name shop. Clicking the link and showing someplace.html in the iframe only works, if the page that contains the iframe is already loaded.
So my problem is, how can I make it work even if the page that contains the iframe is not loaded? I tried loading the page with the iframe by redirecting to it when the link was clicked using its onclick, that worked, but I still have to load someplace.html afterwards and this is where I am stuck.
Any ideas how to solve that? I can use jQuery or plain JavaScript ... doesnt matter.
Thanks!
If you have a link with a target "shop", you must have a iframe called "shop". It is possible to load the iframe with a blank page if there is no initial content.
I'm adding facebook login buttons to fancybox (version 1.3.4) modals (one for join, one for login). The facebook buttons all get instantiated when the page loads, but are hidden. After triggering the fancybox login modal, the facebook buttons get rewritten in the modal and load correctly the first time. However if you close the modal and then reload it a second or third time, there is no facebook login button. It's just blank. When I look at the inline html block
that fancybox based the modal on, the facebook button markup that was generated when the page initially loaded is gone...actually not completely gone, but the button code deep in the iframe is wiped out.
I've seen suggestions to iframe these facebook buttons, so I tried adding an iframe instead of the raw facebook button markup. Note that I am not using the iframe fancybox type and I can't currently do that. When I include <iframe src="/myfacebookbuttonpage"></iframe> in the modal section, again it loads correctly the first time and then after closing the modal, looking at the source I can see the iframe rewritten as <iframe src="about:blank"></iframe> and the innards of the iframe are blank.
Anyone have any idea what's going on here? Or is this attempt to include facebook login buttons in fancybox modals completely wrong for some reason?
It's a bug in fancybox v1.3.2+ when using inline iframes.
As a work around, you may edit the fancybox js file or apply the workaround in your custom fancybox script.
Go here for further instructions
I have been working a JQTouch app. The functionalitly is correct however my animations on some menu items flicker, especially when you click a back link. The strange thing is it is only on certain menu items.
All pages are loaded in the same way via AJAX.
Can anyone shed any light on this?
site can be viewed at:
http://www.alliancerail.co.uk/ip/iphone.html
Thanks
Chris
I think you have an extra closing </div> that appears after "about" and right before "gnwr." Not sure if this will end up fixing your flicker problem...
You are loading content dynamically. Sometimes the jqt animates to the new page before that page has content. Try including more content in index.html such as the about or contact pages. You can also write your own ajax routines that get fired from onClick events bound to the anchor tag on your home page.
The goog group is a great resource -> https://groups.google.com/forum/#!forum/jqtouch