mickle026 404 Posted April 1 Share Posted April 1 (edited) 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 Link to comment Share on other sites More sharing options...
mickle026 404 Posted April 1 Author Share Posted April 1 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. Link to comment Share on other sites More sharing options...
softworkz 3350 Posted April 1 Share Posted April 1 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"); Link to comment Share on other sites More sharing options...
mickle026 404 Posted April 1 Author Share Posted April 1 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 Link to comment Share on other sites More sharing options...
softworkz 3350 Posted April 1 Share Posted April 1 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); }); }); 1 Link to comment Share on other sites More sharing options...
mickle026 404 Posted April 1 Author Share Posted April 1 Thank You, it does what i wanted Much apreciated! 1 Link to comment Share on other sites More sharing options...
softworkz 3350 Posted April 1 Share Posted April 1 (edited) 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 Link to comment Share on other sites More sharing options...
mickle026 404 Posted April 1 Author Share Posted April 1 (edited) 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now