How do i dynamic to load js to my form ?

WEB TMS WEB Core
1

Hi, i have included most of my js using the index.html and my app works like XDataMusicWeb, which most pages/forms is only a <div> that to be load into the main form.


my question is that , if i have some JS functions that is only specific to the particular pages and forms , how do i dynamically load the JS , during , onCreate or on before show/initialize of the new page ?

can u provide me some sample to learn, thanks.
2

You can programmatically create a script element with 

var
  script: TJSHTMLScriptElement;
begin   
  script := TJSHTMLScriptElement(document.createElement('script'));
  
  // config your script element here
  document.head.appendChild(script);
end; 

and set what you need in this script element.
3

I want to try this code, i get " undeclared identifier TJSHTMLScriptElement" error in IDE. And i get "ERROR
Uncaught InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided "  error on browser.


I have lastest version.
4

Did you add the unit web to your uses list?

5

Hi ,


i found that after create the script element , i can do a script.innerHTML := "alert('called!')";
but do not know how to proceed further , please advice,

1. what are the properties available for script element ?
2. usually , these are my needs for using this script element 
     - one is loaded the js , i.e. <script type="text/javascript" src="core_f7_app1.js"></script>
     - another is define some var / function in the script element and execute them ,
3. your sample code above i.e. document.head.appendChild 
   will be executed before the page is loaded ?
   what is the difference defining the js in head and body of the html ?
       
please advice , thanks.
6

You can find the definition for TJSHTMLScriptElement in web.pas


The moment that the script is loaded will depend on the moment where you call the code

var
  script: TJSHTMLScriptElement;
begin   
  script := TJSHTMLScriptElement(document.createElement('script'));
  
  // config your script element here
  document.head.appendChild(script);
end; 

If you invoke this code from a button click, it will be executed after your page has already loaded for example.