Vanilla Javascript - reinitialise after AJAX call

JavaScript
1

Hi,

The problem I am now working on is a vanilla js minirouter that loads templates from ‘views’ and inserts them to the respective div in the dom tree. The problem is, after injecting the partial template into the layout, due to asynchornous nature of AJAX, it loses binding to both scripts and the general dom events manipulation.

I tried a silly way like using eval() function after successful AJAX call that evaluates inline script in the bottom of the partial template, but it is way too messy.

What’s the alternative? I was thinking about firing a CustomEvent to stimualte bubbling up the tree again after the AJAX call.

Do you have any ideas how to solve this problem?

Please, no jQuery answers. Thank you.

2

Never, ever, ever use eval(). For anything. Period. Seriously.

As far as re-initing the DOM after JS update, I’m not sure.

V/r,

:slight_smile:

3

it shouldn’t. Something in your code must be causing it but as you haven’t included the code it is impossible to say what you have done to cause it.

4

an example:

router.js script

  (function() {
    var router = {
    	home: homeView
    
    }
    router.home();
var frontSection = document.getElementById('homeView');

    function homeView() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(xhr.readyState === 4 && xhr.status === 200) {
    
    		frontSection.innerHTML = "";
                      frontSection.innerHTML = xhr.responseText;
    
          }
    	}
    	xhr.open('GET', 'views/home-tpl.html#heroText', true);
        xhr.send();
    
    }
    
    })();

main.js example script

    (function() {
    
    var element = document.getElementById('element') || "";
    
    if(element) {
         element.addEventListener('click', function() {
          console.log('clicked');
        
        }, false);
     }
})();

home partial template

<div id="heroText">
  <div id="element"></div> 
</div>

index.html here

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- <link rel="stylesheet" href="styles/main.css"> -->
<body>
<div id="homeView" class="container-fluid">


    </div>
</body>
<script src="js/router.js"></script>
<script src="js/main.js"></script>
</html>

A simple example as that, now trying to manipulate home template elements after javascript injection into the front section and it would not catch what I targeted.

So, the problem here is, in order to target ‘element’ i’d have to put it either inside ajax successful response call (realy messy), or include additional DOM manipulation script in the bottom of the home.html partial which would not work as those are not evaluated after AJAX call without using eval() on the inline scripts, and inline scripts are a mess.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.