I have page with tabs (which are actually links handled by parent pjax). Which loads the tab content via pjax calls.
In one of the tabs, I have a gridview which is inside a pjax container. So that makes it a nested one.
The problem is that the nested one when loaded and inserted into the page, does not include it's own javascript i.e:
jQuery(document).pjax("#history-gridview a", "#history-pjax", {"push":true,"replace":false,"timeout":5000,"scrollTo":false});
You need to call renderAjax() when requesting the tab page (or content). I do something like this:
if (Yii::$app->request->isAjax) return $this->renderAjax('myview');
else return $this->render('myview');
However, it may not fix your problem. I've found if I navigate tabs and a grid is loaded dynamically in the tab (with its own pjax container), then any interaction with grid sort and filter tries to reload from the outer (pjax tab) container even with skipOuterContainers set to true.
On a side note, the developers are thinking of dropping pjax support completely as per here as well as how asset bundles work.
The question remains:
How to create super fast performance like an SPA (single page app)
without Angular2 or similar? The grid container within a tab container
is the perfect example which, if could be achieved (catering for
back/forward buttons, initialisation scripts) would be awesome.
Related
I'm building a component that uses an <iframe> to display another component. This component connects to an NGXS state which needs to reflect changes made to the state. After a lot of failures and testing I discovered the component will always only load the default settings of the state. I created a <button> to toggle a boolean and added an *ngIf to the <iframe> so I can force it to reload manually after trying things like this.Frame.(contentDocument || contentWindow).location.reload(true); didn't make any difference.
I created a stablitz app to demonstrate this issue however I think stackblitz blocks the use of <iframe>s in their platform so you might need to copy it into a local project to tinker with it. It's a simple app that shows the state outside of the <iframe> as well as inside with a button that toggles the <iframe> on and off so you can see how only the default values load after you update the value I have available for demonstration purposes. I'm not getting any type of errors and the issue isn't a matter of something being wrong with the code so I don't know what more to show that isn't in the stackblitz.
Does anybody know why and how <iframe>s do this and if there's a way around it? The only thing I can think to try is make a NestJS app to see if putting the data outside the app and making an API request from the component inside the <iframe> will be allowed, however I don't know why this issue is occurring to in turn know if that too won't be rejected for that same reason. How this can be handled?
The document running in an iframe is isolated from its host. They do not share memory- Angular does not provide a way to synchronize state between a host and an iframe on the page out of the box. The example is actually booting two Angular apps (one inside the frame and one outside). If you are using an iframe for security and isolation purposes, you'll need to devise a way to pass state between the host and the child via postMessage (and be aware that you are running two copies of your application). If this isn't for security/isolation, simply do not use an iframe to contain the child component.
I'm using Oracle Apex 19.1
I got a page with 4 tabs in a Region Display Selector. When it comes up to a page reload you can see all tabs while the page is loading. It's not a second but you see the content of all tabs among themselves flashing.
I tried to set a staticID on the Region Display Selector and use it in the css with display:none with a Dynamic Action on Page Load i call the show True Action on the Region but it's still the same effect with all tabs flashing.
Is there a method i can prevent this?
Thanks for any advise and help
I avoided this by putting a custom attribute in the region.
Have you tried setting the server side condition to
Item != Value
for a particular hidden value
then create a page load process to set the value.
Then the regions should appear after the page loads.
I want to be able to append the #web-messenger-container element to an element instead of the document.body.
I've tried using Smooch.render without setting the embedded attribute to true and it works fine on some browsers, but on others, the smooch CDN calls are cancelled. It is related with this issue: https://github.com/smooch/smooch-web/issues/666
I don't want to use embedded mode, I just want to move the Smooch button to another container. I've tried moving the iframe element with JS but it causes the iframe to reload and the Smooch window disappears.
I would say if you want to append #web-messenger-container to a different element, embedded mode is the way to do that. Without embedded mode Smooch's host JS will call render() to append the iframe on it's own so trying to call it second time will give you nothing but grief I think.
If all you want is to render your own open/close button, that's pretty straightforward. You can specify a custom button width and height of '0', and trigger Smooch.open() / Smooch.close() however you like.
For example:
https://jsfiddle.net/alavers/ve5uhjnd/
So I've recently been converting an old project to Angularjs, but there's a bigger section that I can't convert right now, but still need to work inside Angular.
To solve this I used an Iframe. The problem now is when I switch to a different page, the view and by association the iFrame is getting destroyed. This means when I switch back it will reload the iFrame and will lose the user's spot and any data they didn't save on the form. Usually I solve this by storing everything inside a service, but it won't work for this since its an iFrame.
Is there anyway to create the iFrame outside of the context of the template so when I switch back to the page I can call the iFrame to display, rather than reloading it, then I can manually destroy it when I want?
Or is there a better way to go about doing this?
Thanks!
for anyone interested, what I ended up doing is putting the iFrame in a parent template inside an ng-if. When I go to the route I want the iframe in, I set the ng-if to true and leave it as true when I'm selecting different tabs and want it to persist, when I want it to switch or not persist I set the ng-if back to false and everything seems to be working as expected.
I have a (JSF 2.0/ Primefaces 2.2RC-SNAPSHOT) app that has
<p:layout>
I use a lot of dialog in my application and before the newest version of primefaces came out there was no way to display a dialog with a modal on top of the layout without putting the dialogs outside of the tags.
So I did just that. The issue I am having now is I am noticing that constructors and postcontructs are being called when my application is loaded. This is because the view with the layout is being loaded and therefore all my dialogs are being loaded.
I don't want these constructors being called until I am actually dealing with the appropriate views in my application.
I have been testing the appendToBody attribute on the
<p:dialog>
tag but it seems really buggy. Everything works fine on the initial rendering of a view. I can open a dialog close it etc and it works fine. If I navigate away to another view and then come back to the initial view and open the dialog, everything is running off the page. The dialog window is in the correct place but the content is not.
My question is 1. Is there a way I can have the dialog windows outside of my layout as a child of the
<h:body>
without having all the managed bean constructors associated with them initiated when the application loads?
Or does anyone know how to fix the alignment issue when using the appendToBody tag? Thanks.
When using layout and dialog, I usually place my dialogs outside of the layout as a direct child of the body element. I have a special ui:insert part in my page template for this.
appendToBody was added to make this easier, if it doesn't work well for you, give this approach a try. I know modal dialogs and layout can work this way.
without having all the managed bean constructors associated with them
initiated when the application loads
Maybe the managedbean gets loaded when your dialog is rendered.
Try rendering the dialog only after the button click, perhaps byputting rendered="#{mybean.flagLoadMyDialog}" on the dialog, and set the flagLoadMyDialog when the button is clicked using ajax.
Also remember to ajax-update the dialog after the button click.