Load Javascript file on function call

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?

Does the Google recaptha script use document.write() to insert it's content? If so, you can't insert that afterwards as it won't work. document.write() will only insert things into the current location in the document if it runs while the page is loading. Otherwise, document.write() clears the current document and starts a new one. — jfriend00
– jfriend00, Commented Jul 6, 2013 at 3:35
Have you checked to see if there is a response to your AJAX call? Are you sure this response is coming back as plain text and not JSON? — DevlshOne
– DevlshOne, Commented Jul 6, 2013 at 3:49

jfriend00 · Accepted Answer · 2013-07-06 04:33:03Z

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.

edited Jul 6, 2013 at 4:33

answered Jul 6, 2013 at 4:27

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naveen Gamage Over a year ago

Yes it works, after posting this question here, I also start Goggling more and found the same answer! thanks mate..

Naveen Gamage · Accepted Answer · 2013-07-06 04:35:36Z

1

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!

answered Jul 6, 2013 at 4:35

Naveen Gamage

1,87412 gold badges34 silver badges52 bronze badges

Comments

Rafael Fontes · Accepted Answer · 2013-07-06 03:52:15Z

-1

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!

answered Jul 6, 2013 at 3:52

Rafael Fontes

1,39114 silver badges20 bronze badges

Collectives™ on Stack Overflow

Load Javascript file on function call

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related