0

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?

John
  • 9,840
  • 26
  • 91
  • 137
  • possible duplicate of [Inline jQuery script not working within AJAX call](http://stackoverflow.com/questions/2162496/inline-jquery-script-not-working-within-ajax-call) – Felix Kling Feb 28 '11 at 09:21
  • @Felix: It's hard to tell whether this duplicates that or not. If it does, the answers there seem to be a bit misleading or roundabout. :-) – T.J. Crowder Feb 28 '11 at 09:40
  • @TJCrowder: Mmh. Then maybe I was to quick in my judgement. I just saw a lot of other "I load HTML via Ajax but it does not execute my JavaScript"-questions. Ah but now that I think about it... it probably does not work if I have JavaScript directly in the page, but should work if I *reference* another script. Is this correct? – Felix Kling Feb 28 '11 at 09:48
  • @Felix: It works either way, provided you're not using `document.write`. – T.J. Crowder Feb 28 '11 at 10:58

1 Answers1

0

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

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Quick question, that ajax call is looped every 30 seconds. Having the script in the returned data means it gets reloaded every time it is called right? If so is there a way around that? – John Feb 28 '11 at 10:16
  • @John: *"...it gets reloaded every time...right?"* Right. *"If so is there a way around that?"* No, you'll have to pre-process the HTML text (`data` in my example `success` callback) to remove the script tag the second+ time. Here's a very basic example: http://jsbin.com/ebixo5/5 *(cont'd)* – T.J. Crowder Feb 28 '11 at 10:56
  • @John: *(continuing)* If you need to be more flexible than that very basic examlpe and strip all scripts, you could try to use regular expressions for that, although using regex to parse HTML is fraught with peril. Still, the Prototype library folks think they've sussed it, you might look at the implementation of their [`String#stripScripts`](http://api.prototypejs.org/language/String/prototype/stripScripts/) function and try to extract it. – T.J. Crowder Feb 28 '11 at 10:57