CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Javier del Saz
Javier del Saz

Reputation: 856

jQuery is not loading js file in script tag of ajax request

I have an ajax POST request, this request comes with html with <script src=""> tags referencing external js files, when I insert this html in DOM the JS are not loaded, what I'm doing wrong? I can remember see this working loading the external script1 and script2 without problems.

Request:

$.ajax({
    type: 'POST',
    dataType: 'xml/html',
    cache: false,
    url: "/html/with/scripttags",
    data: {somedata:'value'},
    success: function(data) {
      $('body').append(data)
    }
  });

Content loaded:

<link rel="stylesheet" media="all" href="http://domain.com/application.css" />
<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>
<script type='text/javascript'>alert('executed')</script>
<div>BLAALBLABLAB</div>

However the alert in script tag is is executed without problems and the application.css external file is loaded without problems. Looks like jQuery doesn't load the files, I also check the network tab..

Upvotes: 2

Views: 4682

Answers (2)

n00dl3
n00dl3

Reputation: 21564

That's jQuery's normal behaviour, if you want to include your scripts, you need to parse the html and add them manually.

Bad news: you can't even select script tags in strings with $()...

I didn't test that, but this quick and dirty example should work:

function createGetScriptCallback(url) {
  return function () {
    return $.getScript(url);
  }
}
$.ajax({
  type: 'POST',
  dataType: 'xml/html',
  cache: false,
  url: "/html/with/scripttags",
  data: {
    somedata: 'value'
  },
  success: function (data) {
    var parser, doc, scriptsEl, callbacks;
    parser = new DomParser();
    doc = parser.parseFromString(data, "text/html")
    scriptsEl = doc.querySelectorAll("script[src]");
    callbacks = []
    for (var i = 0; i < scriptsEl.length; i++) {
      callbacks.push(createGetScriptCallback(scriptsEl[i].getAttribute("src")));
    }
    $.when.apply($, callbacks)
      .fail(function (xhr, status, err) {
        console.error(status, err);
      });
    $('body').append(data);
  }
});

But you should not depend on the html to load your scripts.

edit: less dirty code (inspired by @guest271314 's answer)

Upvotes: 2

guest271314
guest271314

Reputation: 1

The simplest approach would be to remove 

<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>

from "/html/with/scripttags", then call 

$.when($.getScript('http://domain.com/script.js')
      , $.getScript('http://domain.com/script2.js'))
.fail(function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
})

at $.ajax() success.

See also $.ajax() at dataType

multiple, space-separated values: As of jQuery 1.5, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use "text xml" for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: "jsonp text xml". Similarly, a shorthand string such as "jsonp xml" will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.

"xml/html" is not a valid MIME type or expected parameter to dataType

Upvotes: 0

Related Questions