Use template with extern js

[Kaeswurm_Thomas (Thomas Kaeswurm)]

Hello Masters of Web Core,

We use HTML templates from our web designer.
These two scripts are usually included in the templates at the end of the HTML file.

  </body>

    <script type="text/javascript">rtl.run();</script>

    <!-- Vendor js -->
    <script src="assets/js/vendor.min.js"></script>
    <!-- App js -->
    <script src="assets/js/app.min.js"></script>

</html>

Basically everything works. Only some events from these templates don't. (Events on elements from the HTML file).
Our problem now is that when the js files are initialized (as it looks) the DOMContent is not yet fully loaded. We noticed it when debugging, because the getElementById() function in the foreign js scripts does not return any results.

Unfortunately, my knowledge of Javascript is not great enough to initialize the foreign js scripts by hand.

I am now looking for a solution that will only run the scripts after they have fully loaded.

I tried it in the project HTML file with "windows.load" and also in the Delphi with the event DOMContentLoaded. Both were unsuccessful.

What can I do?

Best regards
Thomas

[brunofierens]

This typically heavily depends on how the template is organized.

You could try to add the defer attribute on these script files to ensure the DOM is loaded first before they start to execute.

HTML script defer Attribute

[Kaeswurm_Thomas (Thomas Kaeswurm)]

"defer" don't work.
But I've tried this:

procedure TfrmSophaSelect.WebFormDOMContentLoaded(Sender: TObject);
var
  sl: TStringlist;
begin
  sl := TStringlist.Create;
  sl.LoadFromFile( 'assets/js/vendor.min.js');
  Application.RunScript( sl.Text);
  sl.Clear;
  sl.LoadFromFile( 'assets/js/app.js');
  Application.RunScript( sl.Text);
  sl.Free;

  ShowFrame( TframeSophaMain);
end;

It seems to work.

[Kaeswurm_Thomas (Thomas Kaeswurm)]

But I don't know yet how it behaves on a "real" web server.

[brunofierens]

I see no reason why what you did would behave different on a "real" server.
Other than this, to be able to say something useful about this, I would need much more detail & context. It is clearly an issue specific to the template rather than TMS WEB Core.

[Kaeswurm_Thomas (Thomas Kaeswurm)]

I think this is because the project.html is executed immediately (asynchronously) and the form.html only inside "rtl.run". And in it the element is created for which the script wants to create an event. (And does not find the element)

I'll leave it like that for now.

I can present the project in a few weeks. It uses several Web Core projects as one big project and gets all data from many own XData servers.

[brunofierens]

Would love to see your projects. Always mega interesting to see real-life use-cases!