How to activate Greyed out/Dormant Javascript loaded via c# response?

[mickle026 401]

I have loaded some html and javascript as a json responce from my api into a div tag, but its dormant (doesn't activate)

How can I get this to work?

I understand that the JS page I have is Typescript, but all i can find on the subject is that it fully supports javascript.  Is this DOM related and if so how can I insert it & reload the dom? - I wish i understood this better ..

The text loads into the div tag, however the javascript is not active.

page.querySelector('#LoadSomeJS').addEventListener('click', () => {

                    console.log("LoadSomeJS Clicked");

                    ApiClient.getJSON(ApiClient.getUrl('/MyTest/myjs/LoadJSsegmentTest')).then(response => {
                        var dat = response;
                        console.log(dat.Text);
                        let elements = document.getElementById('loadedjs');
                        elements.innerHTML = dat.Text;
                    }).catch(e => {
                        console.log(e);
                    });
                });

Simply just loading this W3Schools example for now (its just a popup) - its not what i will be loading if i can get this to work.

 <!-- https://www.w3schools.com/howto/howto_js_popup.asp --> 

<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

<script type="text/javascript">
// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

I have also tried by creating an element (which should add to the dom - well thats what i thought )

                        let elements = document.getElementById('AddChanneljs');
                        var div = document.createElement("div");
                        div.innerHTML = dat.Text;
                        elements.appendChild(div);

They all insert the text, but none runt the javascript

 

I get:  Uncaught ReferenceError: myFunction is not defined

when viewing the source its greyed out still

 

 

Any help is appreciated

 

Edited April 1 by mickle026

[mickle026 401]

I believe (although not 100% certain) that the items exist on the page viewport but dont exist in the DOM.  I have no idea how to fix this.

[softworkz 3338]

Don't use:  <....onclick="myFunction()">

Do like this after you have added the html to the DOM:

6 hours ago, mickle026 said:

page.querySelector('#LoadSomeJS').addEventListener('click', () => {

                    console.log("LoadSomeJS Clicked");

 

[mickle026 401]

each way I try that I get :

if i load the query selector with the html Its greyed out

if I put the queryselector in the typescript file then the selector doesnt exist yet...

TypeError: can't access property "addEventListener", page.querySelector(...) is null

i am stumped but pretty sure im just missing something easy

[softworkz 3338]

page.querySelector('#LoadSomeJS').addEventListener('click', () => {

    console.log("LoadSomeJS Clicked");

    ApiClient.getJSON(ApiClient.getUrl('/MyTest/myjs/LoadJSsegmentTest')).then(response => {
        var dat = response;
        console.log(dat.Text);
        let elements = document.getElementById('loadedjs');
        elements.innerHTML = dat.Text;

        var popuptext = elements.querySelector('.popuptext');
        popuptext.addEventListener('click',
            () => {

                console.log("popuptext Clicked");
            });

    }).catch(e => {
        console.log(e);
    });
});

 

[mickle026 401]

Thank You,

it does what i wanted

 

Much apreciated!

[softworkz 3338]

I wasn't sure what you're doing exactly, so I couldn't say what's wrong. But possibly it's a matter of order/timing: When you

• add an HTML fragment to the DOM which includes inline JavaScript
  (there's not TypeScript in browsers, btw)
• and the script is supposed to register an event on an element which is part of the same fragment being added
• and the script code is just a list of statements (rather than a function trigger by event or called from elsewhere)

...then the included script might be executed even before the fragment has been added to the dom and so it can't find the element it is looking fcr,.

Edited April 1 by softworkz

[mickle026 401]

I am currently loading help files from the web into divs, but i want to be able to close them with a button or just the word close ,  I can use the button (image) to load them and as a toggle (replace for a close image) to close them but for design i wanted the close on the loaded div container at bottom centre.

I thought about a dialog but getting that to work with a vertical scroll bar and an X to close it is a bit advanced for where i am currently at.

 

I wanted the javascipt to work because: 1. i wanted to know how to do it and 2. Incase i wanted to do anything fancy like add settings into the dialog popup..

Edited April 1 by mickle026