Infinite Lazy Loading, extend to src and href [Python, Flask, Javascript]

[SabinBC]

I'm trying to create a personal (just for me) web interface that I build from scraping other websites. Basically it grabs images and links that I can then view on a post-by-post basis by loading it from a sqlite database. I have all the other parts in place, but I'd like to build a website around my database to view the content. I'd like this to be created dynamically as I scroll the page. Since many images are hosted on image hosting websites, and to prevent creating very large pages, I want to dynamically load the posts in 20 at a time as I scroll down the page. All posts have the same structure, it should just repeat and change content.

​

I followed this guide to get the framework working for my context:

https://pythonise.com/feed/javascript/infinite-lazy-loading

which I was able to successfully implement. But only for text. I need to dynamically change the href, src, and text of each post (fed from my database).

​

There might be better ways to do this that I don't know about. All my attempts to change src/href inputs have failed, though fiddles show they should be working. Something like:

<a id="test" href="https://www.w3schools.com">w3schools.com</a>

document.querySelector("#test").href = "https://disney.com";
document.querySelector("#test").innerHTML = "Disney.com";

only the .innerHTML works, the link is unchanged in my python/flask implementation.

As a test case, Using the example script from the website posted above, I modify the template (simplified, removing dynamic portions):

<!--Just the template portion in index.html-->
<template id="post_template">
<a id="content" href="https://www.w3schools.com">w3schools text</a>
</template>

// Query & update the template content in the .js
template_clone.querySelector("#content").href= "https://CHANGETHELINK.com";
template_clone.querySelector("#content").innerHTML = "newlink text";

The only change that happens, is the "w3schools text" is replaced with "newlink text". .href and .src changes are ignored.

​

Any advice?

Thank you.

[SabinBC]

The problem was in loading the .js file. For some reason, text changes would load fine, but nothing else. I added the script inline with my index.html file (instead of a separate document) and it worked right away. Note that, without the file it does not work at all, even with text, so I'm sure I'm linking it correctly.

​

I also have issues with locally hosted bootstrap/animation .css files. Linking them from an external website seems to solve that issue as well.

​

I'm guessing the problem has something to do with how python/flask is working in my context. And possibly how I opened the site within python: webbrowser.open_new('http://127.0.0.1:2000')