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?

Jasper · Accepted Answer · 2012-02-23 23:29:29Z

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).

@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.
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')?

T. Stone · Accepted Answer · 2012-02-23 23:06:07Z

0

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/

answered Feb 23, 2012 at 23:06

T. Stone

19.5k15 gold badges72 silver badges100 bronze badges

1 Comment

Jeff Over a year ago

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

Collectives™ on Stack Overflow

ajax execute script

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related