Executing javascript block then modal are opened?


#1

I am unable to get a javascript to execute in the modal, how do it get this working? :slight_smile:

I am trying to auto play an audio file then I popup an alert modal.
this is not working.


#2

Can you please provide some code? I can try and help.


#3

sure, there is the last try to make it work.
This is even just in the main webpage, so not even in the modal.

  New-UDHtml -Markup '<audio id="myAlert"> 
  <source src="..\public\sound\hornhunk.wav" type="audio/wav">
</audio>'
New-UDElement -Tag script -Attributes @{type="application/javascript"} -Content {
  @"
  let autoPlayAllowed = true;
  let v = document.createElement('audio');
  v.src = '..\public\sound\hornhunk.wav'; // we need this
  
  const promise = v.play();
  
  if (promise instanceof Promise) {
    promise.catch(function(error) {
      console.log(error.message);
      // Check if it is the right error
      if (error.name === 'NotAllowedError') {
        autoPlayAllowed = false;
      } else {
        // Don't throw the error so that we get to the then
        // or throw it but set the autoPlayAllowed to true in here
      }
    }).then(function() {
      if (autoPlayAllowed) {
        // Autoplay is allowed - continue with initialization
        console.log('autoplay allowed')
      } else {
        // Autoplay is not allowed - wait for the user to trigger the play button manually
        console.log('autoplay NOT allowed')
      }
    });
  
  } else {
    // Unknown if allowed
    // Note: you could fallback to simple event listeners in this case
    console.log('autoplay unknown')
  }

"@
}

and the audio file: http://soundbible.com/1048-Horn-Honk.html


#4

Is your hornhunk spelled correctly?


#5

yes it is. also downloaded
the javascript are never executed. it dont output anything to the console.


#6

Funny story. I was watching a video while coding and I started to hear a lot of honk and I was wondering where the hell all he honking was coming from.

Then I remembered I tested your javascript and since I had the UD-Hotreloader, my page was reloading every 750ms after the last change.

Anyway, to answer your question, from my experience with New-UDElement, it does not work with script tags.
Instead, what you can do is to create a javascript file in the html client folder (or at a sufolder level of client) and reference it in new-UDDashboard -Scripts parameter (you have to reference the URL).

From there, you’ll be able to use it normally.

Therefore, do these steps.

  • Locate the client folder used by univeral dashboard
    (either C:\Program Files\WindowsPowerShell\Modules\UniversalDashboard\2.2.0\client or the folder you used to publish your project)
  • Create a scripts folder and put your javascript (I.E. test.js) inside it.
  • Use -Scripts parameter with the URL of your script (I.E. https://domain.com/scripts/test.js (relative url will work too))
    If it doesn’t work, make sure you can reach the JS file from the URL

#7

oh sweet, I will try that :slight_smile:


#8

:grin: But I hear a lot of honk every time scripters gather together. :sunglasses:


#9

Hey MadWithPowerShell, your were correct, the file were not spelled correctly also :slight_smile:
hornhonk were the correct name of the file, not hornhunk :slight_smile:

I got it working by using the script parameter, and query the DOM to see if the alert where present, and that the modal were open.

This code then run every 1 sec.
not sure how to figure out how to hook into the modal open event?