Question

Im using jquery to call a page via ajax. I have some jquery functions that load inside the returned html from the page being called from ajax. The problem is Im trying to include the js file inside the returned data, it gives back the html but seems to strip the script tag:

    function buildDisplayResults()
    {
         $.ajax({
             method: 'get',
             cache: false,
             url : '/display_results.php',
             dataType : 'text',
             success: function (text) { $('#showresults').html(text); }
         });

    }

The returned data I have <script src="/js/display.js"></script>

That script code above always gets stripped out, but I need it in the returned data so the functions work inside the data the ajax call sends back. Any ideas?

Answer 1

As far as I can tell, it should work; it must be something else in your environment or in the markup you’re fetching. I’ve tested it and have it working on IE6, IE7, IE8, Chrome 9 on Linux and Windows, Firefox 3.6 on Linux and Windows, and Opera 11 on Linux and Windows; all using jQuery 1.5:

Ajax call on main example page:

$.ajax({
  url: "/okuli4/3",
  dataType: "text",
  method: "get",
  cache: false,
  success: function(data) {
    $('#target').html(data);
  },
  error: function(xhr, status, err) {
    $("<p>Error: Status = " + status + ", err = " + err + "</p>")
      .appendTo(document.body);
  }
});

…where the /okuli4/3 resource looks like this:

<p>I'm the snippet.</p>
<script type='text/javascript' src='/etobe4/2'></script>
<p>I'm the snippet after.</p>

…where the /etobe4/2 resource looks like this:

jQuery("<p>I was added by the external script file.</p>").appendTo(document.body);

Live example