Onshown trigger problems

Wappler General
1

Hi, I have this page https://street-mng.herokuapp.com/vegan , where modal is shown, once serverconnect meets a condition. Once the modal is shown, it plays html5 audio. You can see the modal and audio in action, if you click the blue button too.

The problem is that when the page is loaded for the first time and modal is shown through serverconnect, the audio is not playing. I have to click the button to show modal first and audio is already playing. After this step, audio is also working once triggered by serverconnect. Do you have any idea, where is the problem that it’s not working from the beginning through serverconnect trigger? Button and serverconnect are triggering the same modal with same play function. I have no idea…thank you for your help.

2

Hi @iwian ,
Have you tried calling this by looking at the modal state? I think you can find a better solution this way.

var mdl = document.getElementById("newOrderModal");
mdl.addEventListener('shown.bs.modal', function (event) {
 alert('modal opened');
})

Also, if you add them to the bottom of the page, the codes will be better.

3

Thanks, I tried that and it’s not working :frowning: the result is the same. Once you play it for the first time, modal triggered through serverconnect, audio is not playing. You have to trigger it through click on a button. I’m guessing there is a problem with the audio file, but didn’t find, what it could be.

You can try the api call here https://street-mng.herokuapp.com/api/neworder-vegan and request is: * {“branch”: “vegan”} . You have to clear cache to simulate that you’re on the page for the first time.

4

I also tried to change audio from external file to base64, but there is no difference.

5

It works with every click… are you sure ?

6

Yes, it works on every click, but the problem is that it’s not working once the first action is triggered through api and not by clicking. I think I found the problem, which is Autoplay browser policy, which is requiring that the user has to interact with the site first to be able to play him any sound.

7

Have you tried calling the javascript function when the action end?

image
image772×482 9.65 KB

you also added “noload” to server connect. This means that the page will not run when it loads.

<dmx-serverconnect id="scDeleteVegan" url="/api/delete-vegan" noload></dmx-serverconnect>