$.getJSON will not run function after data is returned

Question

I'm having trouble getting the users IP to persist to the next function because every time I call $.getJSON it skips my function. I am certain that the JSON being returned is fine because when I run the code shown here:

<script type="application/javascript">
$.getJSON("http://www.telize.com/jsonip?callback=?",
    function(json) {
        document.write("My IP address is : ", json.ip);
    }
);
</script>

the IP is written to the screen exactly as you would expect. Here is my most recent attempt:

<script type="application/javascript">

function verifyRecaptchaAnswer() {
  var privateKey = 'privateKey'; 
  var challengeValue = $('#recaptcha_challenge_field').val();
  var responseValue = "manual_challenge" ;
  var userIP = $('#hiddenField').val();
  $.post("http://www.google.com/recaptcha/api/verify",
    { privatekey: privateKey, remoteip: userIP, challenge: challengeValue, response: responseValue },
    function(data) {
      return data;
    }
  ); 
}

$(document).ready(function() {

  var hiddenField = document.createElement('input');
  hiddenField.setAttribute("name", "ipHolder")
  hiddenField.setAttribute("type", "hidden");
  hiddenField.setAttribute("id", "hiddenField");

  $.getJSON("http://www.telize.com/jsonip?callback=?",
    function(json) {
      hiddenField.setAttribute("value", json.ip);
    }
  );

  $('#submit').on("click", function(){
    event.preventDefault();
    verifyRecaptchaAnswer();
  });
});
</script>

I have tried everything under the sun in that function(json){} block, but none of it works. Except of course for the example shown on the website, http://www.telize.com/ , which is the first code block posted. I found this site after finding this stack post: How to get client IP address using jQuery, which looks like the same thing. I haven't even gotten to testing the verifyRecaptchaAnswer function yet, but that is what I want the user IP for.

Functions like `$.getJSON` and `$.post` are **asynchronous**. The callback function isn't run until the HTTP request completes. — Pointy, Dec 19 '13 at 01:42
`return data;` is pretty useless there. Apart from that, what exactly is the problem? You are saying `document.write("My IP address is : ", json.ip);` works, but `hiddenField.setAttribute("value", json.ip);` doesn't? — Felix Kling, Dec 19 '13 at 01:42
@FelixKling the code implicitly expects that the "hidden field" will have had its value populated by the time the "verify" function runs. — Pointy, Dec 19 '13 at 01:46
@Pointy: I know, but that function is not run until the button is clicked. Most likely this is the problem, but I just want a proper explanation of the problem from the OP. — Felix Kling, Dec 19 '13 at 01:47
@FelixKling, yes document.write(...); works, and anything else I put in the function does not. — BaltimoreBirds, Dec 19 '13 at 14:16

score 2 · Answer 1 · answered Dec 19 '13 at 02:08

2

I think you are missing this line:

document.body.appendChild(hiddenField);

answered Dec 19 '13 at 02:08

Steve Wellens

20,506
2
28
69

PS - might wanna pass `event` through the `submit` click function: `.on('click', function(event) { ... });` – Deryck Dec 19 '13 at 02:10

$.getJSON will not run function after data is returned

1 Answers1