How to open a popup in one RE when triggered from another RE on the same index page

progressdiary · 2024-10-24T09:04:55.464Z

Hi guys please Help…

Im going in circles here and the previous solutions i found on the forum dont seem to help neither does AI…

I have a SPA… Main page is INDEX
I have RE_NAV
I have RE_Home
I have an POP UP in RE_Home called PU_login/signup

When someone is logged out the users name in the RE_NAV is changed to “Login or Sign up”.
I want them to be able to click the text “Login or Sign up” in the RE_NAV and it show “PU_login/signup” from the RE_Home.

I’m trying to use custom states here and custom workflows but I keep hitting blocks where the RE’s wont reference the INDEX page or each other as I know they wont.

There must be a way to achieve this right?

adamhholmes · 2024-10-24T09:22:50.028Z

Put a Javascript to bubble element on your index page, and set it to trigger an event (note: it must be visible on the page in order to work).
When that event is triggered, show the popup (probably by triggering a custom event in the relevant RE).
Then, in your other RE just call that JabascriptToBubble function with a Run JavaScript action.

progressdiary · 2024-10-24T09:28:55.401Z

Thanks for the reply @adamhholmes

adamhholmes:

Put a Javascript to bubble element on your index page, and set it to trigger an event (note: it must be visible on the page in order to work).

Forgive my ignorance:
how do I accomplish step 1?

I don’t know how to code at all and I’ve not use JS before either… but seems like this is the point where I start

adamhholmes · 2024-10-24T10:19:13.842Z

First, you need to install the Toolbox plugin, then you can add the JavaScriptToBubble element.

Be sure to give it a unique suffix (with no spaces) - that’s what you’ll use to ‘call’ it from within your other RE.

image1044×674 51 KB

And check the ‘Trigger Event’ box.

Once the element is added, you’l be able to create a workflow based on that JavaScript to Bubble element being triggered:

image798×896 20.8 KB

Here you can add whatever actions you need (i.e. showing the popup).

Then, in your other RE, when you want to call that JavaScript To Bubble element (and therefor trigger whatever actions are in the trigger workflow), just use a Run Javascript action with the following code:

bubble_fn_openPopup(); (openPopup being the unique suffix you gave the JavaScriptToBubble element - which can be anything you like).

image1146×1034 53.8 KB

Then, when you run that action from your RE, the javascript will ‘call’ the Javascript to Bubble element on your page, which will trigger the workflow to open the popup (or whatever your workflow does).

progressdiary · 2024-10-25T12:54:12.826Z

Thanks Adam, II must be missing a lot on how to do this because it still doesnt seem to work for me. Should there be conditionals and or custom states/ parameters to show and hide the elements?

I added the JS to bubble element on the index page and set it up as you did… called “openPopup” set to trigger event, I made the width and height 1 px each to hide it but its shown on the page.

The workflow should set done on the index page workflow tab right? -

I’m sorry Im very confused by on which RE to place what expression and what to add into the workflows and where to put a custom event and what that should be.

my setting this up in this way is not the best solution? would there be a better way while still using RE’s Should I make all the popup’s in one Generic popup and then show display them with states? or option set? URL parameters? but with states I’m back to the original issue of not being able to reference a state in another RE.

Thanks in advance

system · 2025-01-02T09:05:44.537Z

This topic was automatically closed after 70 days. New replies are no longer allowed.