This small script allows you to insert HTML content and Javascript code retrieved in Ajax with the Javascript Fetch() API
https://www.ajax-fetch-data-loader.miglisoft.com
The Fetch() Javascript API is a simple and modern way to load dynamic content into a page. Unfortunately if the loaded content contains some Javascript code it will not be interpreted, that is why I provide this script.
- parse the content retrieved with Fetch
- creates an Array with the HTML nodes and the scripts at the end
- parses the Array and:
- inserts the html nodes in the destination container
- inserts the javascript into <script /> tags, which allows them to be executed.
<script>
document.addEventListener('DOMContentLoaded', function(event) {
fetch('data.html')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.info('content has been fetched from data.html');
loadData(html, '#ajax-target').then(function (html) {
console.info('I\'m a callback');
});
}).catch((error) => {
console.log(error);
});
});
</script>
Alternatively you can append the fetched content to the HTML container instead of replacing it:
// first fetch your content like in the first example above, then ...
// the third "true" argument will append the fetched content into the container instead of replacing its original content.
loadData(html, '#ajax-target', true).then(function (html) {
console.info('I\'m a callback');
});