this post was submitted on 09 Aug 2023
5 points (100.0% liked)

JavaScript

1975 readers
9 users here now

founded 1 year ago
MODERATORS
erlingur@programming.dev
Ategon@programming.dev
nick@programming.dev
5
[Coding Questions] what is the best way to load a file into a div that contains Java Script (lemmy.world)
submitted 1 year ago by BlackXanthus@lemmy.world to c/javascript@programming.dev
6 comments fedilink hide all child comments
 

Hello Everyone,

The issue: I have created a page that loads two other pages into div's at the press of a button, and then removes them on another press

Both these pages contain JavaScript. On one of the pages, the JavaScript fires when the page is loaded to fill out values pulled from a database.

The pages are loaded using a simple Ajax call, that puts the contents in the div.

The problem: obviously loading pages this way means I can't use 'document.load' to fire the JavaScript. I'm also finding that none of the scripts are loaded either.

I have a solution that can load the JavaScript after completion of the document.load, but for some reason it's not detecting the global variables with the initial Json data in it.

Both pages work individually.

The question:

  1. How do I get this to work?
  2. Is there a better (preferably non-iframe) way of doing this?
  3. Why, when the JavaScript is loaded manually, is it seeing the global Json values as 'not yet defined'?

Happy to offer any other information needed.

Thanks in advance

top 6 comments
sorted by: hot top controversial new old
[–] shnizmuffin@lemmy.inbutts.lol 4 points 1 year ago* (last edited 1 year ago) (1 children)

You want two web pages to load inside a third encompassing web page?

You are describing the use case for the iframe element.

Edit: markdown support not the greatest.

[–] BlackXanthus@lemmy.world 2 points 1 year ago

Yes,

I'm aware it's a use case for an iframe. However, I'm looking for a way to do it without an iframe. Most of the logic is there, just that there are these anomolies with the JavaScript variables.

[–] BlackXanthus@lemmy.world 2 points 1 year ago

For those that find this question is asking something that they are also struggling with, the answer was the 'embed' tag

MDN link

You will need to place the element into a structural holder (eg div), and remove and recreate the element in JavaScript to get it to vanish and reappear if you want it to reload on show.

Pages loaded in this way do not inherit CSS theming, except background colour (if no background colour set). It does pick up @media settings, but only from the browser. This is intended behaviour.

Ultimately, to get the full functionality, I am going to have to redesign these items to be part of a single page, loading the data in piecemeal. However, this fix gets me a functional way of achieving something I need quicker than a redesign.

Thanks,

-BX

[–] Ashiette@lemmy.one 1 points 1 year ago (1 children)

Have you tried putting the script tag(s) at the end of the body tag ?

[–] BlackXanthus@lemmy.world 2 points 1 year ago (1 children)

That works except for the pages loaded in, which do have the JavaScript tags at the end of their respective pages, however, one claims that the variables being set at the top of the script are not accessible

[–] Ashiette@lemmy.one 4 points 1 year ago

Without seeing any code it seems obscure... Did you properly close the script tag ?

Can you host your code somewhere ? Codepen maybe ?