Is it possible to include dynamic data into a client side embedded script?

[dmbe11]

I’m not sure if I am even asking this correctly but I would like to insert dynamic data into an embedded script file like this example:

<script type="text/javascript" src="https://app.somesite.com/forms/33f4dd7f-d532-4a4b-9f6f-06b853e96e83.js"></script>

I would like to include this into the body of a Modal so that it displays the form it points to. The reason for making it dynamic is that I have many forms and I would like to change the form based on user selection. I tried searching for a solution but as I said I am a newborn with wappler and I’m not sure of the terminology.

thank you

[scott]

Hi @dmbe11, this might help you out.

Binding server connect variable inside Javascript

Seeing the php dump I think the session variable you want is $_SESSION["userdata"][0]["email"]. So in your script it would then become <script type=“text/javascript”> var Tawk_API=Tawk_API||{}; Tawk_API.visitor = { name : '<?php echo $_SESSION["userdata"][0]["FirstNames"] ?>', email : '<?php echo $_SESSION["userdata"][0]["email"] ?>' }; var Tawk_LoadStart=new Date(); // rest of the tawk.to widget code </script> App Connect expressions in script blocks will not work, but PHP…

[sid]

Hi,

I am not sure what exactly you are after, but another suggestion would be to look into dmx.app.data and dmx.parse options to access Wappler componets’ data in JS.

[dmbe11]

Maybe this will clarify my problem better:
I reviewed these suggestions and am still not finding a fix. The issue is I was looking for a way to include a dynamic src link within an embed script tag. To further clarify, I would like the url after src= to be stored in a database. I can indeed store the url but it doesn’t work, however if I just place the entire embed script it works fine.

[sid]

Can you explain a bit more with some code?
Dynamically binding src is quite simple in Wappler, and does not require any JS.
Try this: dmx-bind:src="url"
Here url will be your value coming in from an API or server action.

[dmbe11]

This have progressed a bit further since my last post. The issue is that I am trying to add this line:

<script type="text/javascript"src="https://app.xxxxxx.com/forms/1d5b8f00-249b-4a68-a908-3b3c23de14a9.js"></script>

This line is entered into a modal. There are 4 such modals with similar lines but for different products. At first, I thought that it would be best to change the link using a dynamic link but discovered that it might be easier to just use 4 separate modals and open the modal with the particular product link being select. Which I was able to do.

The issue now, all four of the script links show up in the last modal one after another. Each of the script links is within the correct modal, but it still all end up in the final modal.

This is what it looks like with just the code included in the last two modals for example:

[sid]

What is the script supposed to do?

From what I understand, all 4 script tags will get executed on page load. This is how HTML/JS works and not a Wappler thing. So it might be that they are conflicting with each other somehow.

[dmbe11]

Hi Sid, as I understand the process the script loads an external iframe that opens a secure web-form that access the stripe payment system. I am using it to create subscriptions for multiple products.

The situation is that there are 4 different subscriptions that I want to use, but don’t want all of then crowding up a single page so I thought that by using a modal I could split it up. But as you see the scripts all load their access button onto one modal and not where I placed them.

So even if they get loaded on page load why would they be placed in a single modal (the last modal) and not where I place then in the html structure. I even tried to set them up on separate partial’s with no luck. As you might have observed I’m really new to this stuff so I’m not even sure if I know the correct way to ask my questions.

This is a product from a company called collect I have used to process my in person card payments and because they are reasonable and handle much of the complicated API setup with stripe I thought it might be a good option. The actual end form is pretty nice. here is a link to see what it looks like form the Collect: https://collectforstripe.com/features/web-forms

[sid]

I have never played around with iframes on a real production app.
If setting the iframe on a single modal works well, then multi modal setup is what the issue is.

If you see that single iframe does work, you can use conditional region to handle this for multiple modals.
Place the iframe inside conditional region with condition set to something like modal.shown == true. I’m not sure what the exact value is for modal visible. In case there isn’t one, you can make use of a variable, set its value to 1 on click of button which opens the modal and set condition in CR as var1.value == 1.

What happens with CR is that the iframe will not be loaded on page load, unlike the other HTML parts of modal. Once the modal is shown or variable is set to 1, only then the CR will render the HTML inside it, i.e. the iframe, in your case.
So, every time a modal is shown, iframe should get loaded a-fresh.

On hidden event of modal, make sure to set variable back to 0 to remove the iframe HTML.
Also, you can use the same variable for all with values and conditions as 1,2,3,4 etc.

[dmbe11]

thx @sid, I’ll give it a try.