Javascript - DOM parser load ajax requests, scripts no run

Question

When a user clicks on a link instead of loading a whole new page I load the new page's HTML data through an ajax request (and also with a query string I get the server to not send the nav bar data each time) the resulting data from the ajax request I then put through DOMParser to allow me to just get the content from the div with the id of "content" and replace the current document's "context" div's innerHTML.

After doing a request through this method though any script tags within the newDOM don't run after being put in the content div. Also, it does appear to run while it is in newDOM either, because if you have a script that instantly edits the document while it loads there is no effect when you log out newDOM

AjaxRequest(href, function(data) {
  var parser = new DOMParser();
  var newDOM = parser.parseFromString(data.responseText, "text/html");

  //Setup new title
  var title = '';
  if (newDOM.getElementsByTagName('title').length > 0 && newDOM.getElementsByTagName('title')[0] !== null) {
  title = newDOM.getElementsByTagName('title')[0].innerHTML;
  } else {
  title = rawhref;
  }

  document.title = title;
  history.pushState({}, title, rawhref);

  if (newDOM.getElementById('content') === null) {
  //If there is an error message insert whole body into the content div to get full error message
  document.getElementById('content').appendChild(newDOM.getElementsByTagName('body')[0]);
  } else {
  document.getElementById('content').appendChild(newDOM.getElementById('content'));
  }

  MapDOM();

  if (typeof(onPageLoad) == "function") {
  onPageLoad();
  }
  });

Note: the variable "rawhref" is just the request URL without ?noheader so that it will be easier for users to go back though their history. NOTE: Also after any new load I also have a function that overwrites any new a tag so that it will work though this method for the next new page.

Also, it would be much preferred if the answer didn't use jQuery.

you would need to call eval() on the textContent of any newly added script tags. — dandavis
– dandavis, Commented Jan 11, 2017 at 5:00
@JaromandaX: You could use Function too i guess, or dataURLs, is that what you meant? — dandavis
– dandavis, Commented Jan 11, 2017 at 5:01
necessary? no, you could add dupe and add new scripts, but jQuery uses eval() for load() and even html(), and it should be faster than working with the slow dom... — dandavis
– dandavis, Commented Jan 11, 2017 at 5:06
but jQuery uses ... I have zero care factor for what jQuery uses :p — Jaromanda X
– Jaromanda X, Commented Jan 11, 2017 at 5:08
for sure. i'm just saying eval is shockingly widely acceptable in this specific context, due to it's existing wide-spread use and simplicity, even if nobody worth salt around here would publicly push eval... — dandavis
– dandavis, Commented Jan 11, 2017 at 5:16

Ajani Bilby · Accepted Answer · 2017-01-11 05:25:30Z

Some one just answered this and while I was testing it they deleted their solution.... Um, thanks so much who ever you were, and for anyone in the future who has this problem here is the code they showed, but I didn't have time to fully understand why it worked.... but I think can work it out.

function subLoader(dest, text) {
  var p = new DOMParser();
  var doc = p.parseFromString(text, 'text/html');
  var f = document.createDocumentFragment();
  while (doc.body.firstChild) {
    f.appendChild(doc.body.firstChild);
  }
  [].map.call(f.querySelectorAll('script'), function(script) {
    var scriptParent = script.parentElement || f;
    var newScript = document.createElement('script');
    if (script.src) {
      newScript.src = script.src;
    } else {
      newScript.textContent = script.textContent;
    }
    scriptParent.replaceChild(newScript, script);
   });
   dest.appendChild(f);
}

Collectives™ on Stack Overflow

Javascript - DOM parser load ajax requests, scripts no run

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related