在函数调用中加载Javascript文件

Question

I'm using Google Captcha when some number of login attempts failed, my website is based on Ajax and Java Script so I need to load Google Captcha Java Script file when a function called!

I'm getting captcha code through making a request to my API, http://www.myserver.com/api/?request=captcha so this will return

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LeV3rdSAAAAABp2Q3bjyjCR9E6vvZ06oM6-6yj"></script>

I use $POST to make the request and .HTML to show captcha on my site

$.post("api/index.php", {request: "captcha"}, function(data) {

    $('#customContent').html(data);
});

but this doesn't show up captcha on the HTML element! Where am I doing wrong?

Answer 1

Go to this Google page and follow the instructions for dynamically inserting Google captcha into a page. You must do it differently than you are. If you're going to fetch the code with ajax, then scroll down the above page until the section labeled AJAX API and follow their code example.

You should read their directions exactly, but basically you put this in your page all the time:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

You create a container div for where you want the captcha to go and give it an id and then you call this with your key and the id when you want to insert the captcha:

Recaptcha.create("your_public_key",
    "element_id",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );

FYI, I've never done this myself. I just Googled and read instructions.

Answer 2

Finally I found an answer myself and thanks for your answers!

function showRecaptcha() {
        Recaptcha.create("your public key", 'captchadiv', {
        tabindex: 1,
        callback: Recaptcha.focus_response_field
        });
}  

and you don't need to load Google Captcha Java Script at the begging just use getScript function to load Google Captcha script when maximum failed logging attempts occurred and use .done responce status to call showRecaptcha() function. good luck!

Answer 3

Don't use jQuery to put script tag that uses document.write, instead put it with native javascript, like:

$.post("api/index.php", {request: "captcha"}, function(data) {

    $('#customContent')[0].appendChild(data);
});

I hope it helps!