ajax execute script

Question

Ok, I think i'm getting close but things still aren't working:

I've got the following function

function showRecaptcha()
 {
 alert("test2");
 $.getScript("/plaoul/commentfiles/recaptchaJS.php", function(data, textStatus, jqxhr) {
 console.log(data); //data returned
 console.log(textStatus); //success
 console.log(jqxhr.status); //200
 console.log('Load was performed.');
 });
}

The function is supposed to call the follow javascript: http://www.jeffreycwitt.com/plaoul/commentfiles/recaptchaJS.php (feel free to view this page - it works just fine here, but not when I call it through ajax)

This is a javascript that when executed displays the recapatcha form.

So far the console log returns the following:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfDj8gSAAAAAG53PTtr-1665awLtERThvylvnUY"></script>
<noscript>
 <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfDj8gSAAAAAG53PTtr-1665awLtERThvylvnUY" height="300" width="500" frameborder="0"></iframe><br/>
 <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
 <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
 comment_navbar_jsfunctions.js:129success
 comment_navbar_jsfunctions.js:130200
 comment_navbar_jsfunctions.js:131Load was performed.

But I want the <script> to actually show up as the recpatcha image in a div on my page div#commentWindow. Once I have the script using getScript I can't figure out how to get the script to display in div#commentWindow. Can you help me?

Answer 1

Since you are grabbing this HTML via AJAX you don't have to worry about <noscript>. So you can do something like this:

//get plain-text from local PHP file
$.get('/plaoul/commentfiles/recaptchaJS.php', function (response) {
 //get the source of the `<script>` element in the server response
 var source = $(response).filter('script')[0].src,
 script = document.createElement('script');
 //set the type of our new `<script>` element and set it to `async = true`
 script.type = 'text/javascript';
 script.async = true;
 //set the source of the new `<script>` element to the one in the server response
 script.src = source;
 //add the new `<script>` element to the DOM
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(script, s);
});

You may notice some of this code is from the Google Analytic Asynchronous tracking code (the part that creates a new <script> element).

• Jasper: @Jeff Sorry about that, one ga variable was left behind, this was a Google Analytic code snippet and I replaced ga with script. I updated the answer.
• Jeff: great - but I'm still not sure I see how the script is being targeted to div#commentWindow -- does this take place in the final step when the <script> element is added to the DOM? Should it be `var s = document.getElementByID('#commentWindow')?

Answer 2

So you simply want to fetch the output of that PHP file and render it out to the page?

Have you tried $('#commentWindow').load('/plaoul/commentfiles/recaptchaJS.php');

Edit -- sorry, that should have been .load. http://api.jquery.com/load/

• Jeff: yes. It doesn't seem to work because its a javascript and doesn't seem to execute it. The div comes back blank