OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

JavaScript Execution Issue after HTML Replacement

  • Thread starter Thread starter Abdul Rehman
  • Start date Start date
A

Abdul Rehman

Guest
I'm currently facing an issue with JavaScript execution after dynamically replacing the HTML content in my web application using JavaScript.

CURRENT FUNCTION:

Code:
function insertHTML(decodedData) {
    // Method 1 Parse decoded HTML
    const decodedHTML = decodedData;
    const parser = new DOMParser();
    const doc = parser.parseFromString(decodedHTML, 'text/html');
    document.documentElement.replaceWith(doc.documentElement);

    // Method 2 Replace current document 
    document.open();
    document.write(decodedHTML);
    document.close();

}

EXPECTED CODE In decodedData variable:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/assets/css/fontawesome.min.css"/>
<title>Title of Page</title>
<style>
</style>
</head>
<body class="dark-theme">
<script>
    var notify = {
        timeout: "3000",
    }
</script>
<div class="layout">Content Here</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/custom.js"></script>
<script>
        // Color Switcher
        $(".color-switcher").on('click', function () {
            "use strict"
            $("body").toggleClass("dark-theme");
            var url = '/theme-mode';
            $.get(url)
        });
</script>
</body>
</html>

ISSUE: It does not execute the JavaScript however the CSS works.

  • I pass decoded HTML string it has full page content from (!DOCTYPE To the ).
  • I replace the entire current document's HTML content and will execute all the new JavaScript files and code which is replaced.

<p>I'm currently facing an issue with JavaScript execution after dynamically replacing the HTML content in my web application using JavaScript.</p>
<p><strong>CURRENT FUNCTION:</strong></p>
<pre><code>function insertHTML(decodedData) {
// Method 1 Parse decoded HTML
const decodedHTML = decodedData;
const parser = new DOMParser();
const doc = parser.parseFromString(decodedHTML, 'text/html');
document.documentElement.replaceWith(doc.documentElement);

// Method 2 Replace current document
document.open();
document.write(decodedHTML);
document.close();

}
</code></pre>
<p><strong>EXPECTED CODE In decodedData variable:</strong></p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/assets/css/fontawesome.min.css"/>
<title>Title of Page</title>
<style>
</style>
</head>
<body class="dark-theme">
<script>
var notify = {
timeout: "3000",
}
</script>
<div class="layout">Content Here</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/custom.js"></script>
<script>
// Color Switcher
$(".color-switcher").on('click', function () {
"use strict"
$("body").toggleClass("dark-theme");
var url = '/theme-mode';
$.get(url)
});
</script>
</body>
</html>
</code></pre>
<p><strong>ISSUE:</strong>
It does not execute the JavaScript however the CSS works.</p>
<ul>
<li>I pass decoded HTML string it has full page content from (!DOCTYPE To the ).</li>
<li>I replace the entire current document's HTML content and will execute all the new JavaScript files and code which is replaced.</li>
</ul>
 

Latest posts

Top