Page Include in popup blank on second load (conditionally)?

Mark L
Mark L ✭✭✭✭

I have a button that opens a popup that has a page include. Inside this page include I have another popup for a field editor that closes itself when it is done being worked with. When done working with the original popup, the page include will "close topmost popup" to close itself.

When trying to reopen the popup (press button again), the popup will show "Loading" as if the page include is loading, but then will be blank as if there is nothing in the page include.

If this blank popup is closed and then the button clicked again and the popup reopened, the page include will load normally.

It seems like reloading the original popup will be blank if we ever had the second popup (under the page include) up.

I don't get any errors or anything in the console. I'm not sure why this is happening or how to fix it.


This is on the v1 editor

Answers

  • A couple of notes:

    1) try sliding panels instead of popups. They behave differently upon close. Sliding panels retain page include info after close.’

    2) try using the toggle component action to hide your page include when closing the pop up and showing it upon opening the pop up. This forces the reload of the component.

  • Mark L
    Mark L ✭✭✭✭

    Toggle component doesn't seem to work.

    Redesigning this to work with a sliding panel will take some time and there may be issues with that as well. I've had issues with page includes in sliding panels in the past so I just avoided using them, but I'll see if I can experiment with that some more.

  • Mark L
    Mark L ✭✭✭✭
    edited March 11, 2021

    Sliding panels have similar issues. I need the page include in its original state when it loads, able to receive url parameters and start off fresh. Trying to re-render / toggle it causes the same problem to happen. I've been experimenting with unrendering and re-rendering the include and can't get that working either. It seems like just randomly trying to use the same page include twice causes this issue of the page include loading a blank page every other render.

  • Mark L
    Mark L ✭✭✭✭

    I think I figured out the problem. An error was throwing when opening the "sub-popup" / "sub-flyout" --- "Uncaught Error: cannot call methods on tabs prior to initialization" -- this I think was causing issues with trying to re-render items.

    The cause of this error was custom display logic on components within the sub-popup, and setting fields that change the display logic just prior to opening the sub-popup. I think it's because when you tell the sub-popup to open skuid then treats it as opened for display logic purposes, but if you do this in the same action sequence as setting a field value that affects display logic, the item is not actually rendered yet and throws an error when changing something that affects display logic on that item. That's my guess at least. Removing the display logic item on the sub-popup prevented this error from throwing.

    The error itself once it is thrown causes problems with the page afterwards, and likely also was messing up the re-render of the page include. It seems to cause an issue with taking actions on the page once but then once it tries and fails the second go works. Eg. Had a button that triggered display logic elements, those display logic elements would not update on first click of the button, but on second click they then would.

    This is just a "workaround" by not doing the thing that causes the bug, but it's definitely a bug in v1 squid involving rendering / display logic / setting items that have display logic that haven't been rendered on the screen yet.

  • Germany3
    Germany3 🛠️ 

    @Mark L have you tried producing this issue in V2?

  • Oh...When using toggle component, you have to turn the setting to from toggle to “hide” and then do another action to toggle “show”. Just toggling the component with “toggle” doesn’t cause it to re render.

    I used to have issues with sliding panels in previous versions but in the latest versions they fixed the issues. Sliding panels are the bomb I use them everywhere. You do have to create your own close button for each if you open them 100% which I always do for mobile compatibility.

    if your users use smart phones to access your apps, sliding panels work way better than pop ups.


    hope this helps

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!