0

I would like to understand how jquery handles context. I have this code:

var formHtml;

jQuery.get("form2.htm", function (data) {
    formHtml = data;
});

alert(formHtml);

What it does, it gets data from the form2.html page and I am setting the formHtml variable to that data so that I can use it somewhere else but when I alert that I get undefined. Is there something I am missing?

mpora
  • 1,411
  • 5
  • 24
  • 65

7 Answers7

4

ajax is asynchronous, so the alert is executed before the call has finished

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
2

jQuery.get() is an asynchronous call. jQuery.get() uses AJAX to fetch the value from the server side. That means the execution of the javascript statements will continue after sending the request to server without waiting for the response from the server.

AJAX stands for Asynchronous JavaScript and XML.

When response from the server comes back the callback method registered with the post method gets called.

So by the time the server request comes back the alert statement would have already executed. Since you have declared the global variable formHtml and not initialized it, its value is undefined that is what you are getting in your alert.

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • Now I know this is not working: https://github.com/kidovate/copyformdata. I had asked a question here: http://stackoverflow.com/questions/14695651/javascript-copy-form-from-one-page-to-another-form-on-another-page and someone offered it as a solution. When I tried it out nothing worked. – mpora Feb 07 '13 at 17:26
  • Do you want to copy the value from one form to anoter? – Arun P Johny Feb 07 '13 at 17:29
  • Yes. Specifically from one form on page "a" to another form on page "b" where I do not have control over page "b". – mpora Feb 07 '13 at 17:33
  • It is not possible unless you store the values from the page `a` in a shared space. – Arun P Johny Feb 07 '13 at 17:34
  • Thank you. What are some shared spaces do you have in mind? I have implemented some code to alter a bookmarklet and I was looking to explore other possibilities. – mpora Feb 07 '13 at 17:38
  • Is value stored in the database which you have access to? other wise I'm afraid it is not possible. – Arun P Johny Feb 07 '13 at 17:41
  • I am dealing with a very bad designed form that users do not longer want to use and the owner of the form wont change it. So I decided to a design a custom form to mirror the other form and I would transfer the values over to the other form once the custom form is submitted. – mpora Feb 07 '13 at 17:44
1

alert(formHtml); will be executed before formHtml = data;

pktangyue
  • 8,326
  • 9
  • 48
  • 71
1

As said by Leeish -> Well for one, the get will take a moment to complete.

You can use .ajaxComplete():

$(document).ajaxComplete(function(){
   alert(formHtml);
});
Jai
  • 74,255
  • 12
  • 74
  • 103
1

Try this :

var formHtml;

jQuery.get("form2.htm", function (data) {
    formHtml = data;
    alert(formHtml);
});

Like said before, jQuery.get is an asynchronous method. The callback function will be executed later when the response is received.

jQuery.get("form2.htm", function (data) {
    formHtml = data;
    alert('response received!');
});
alert('request send!');

You will see 'request send!', then 'response received!'.

Johnny5
  • 6,664
  • 3
  • 45
  • 78
0

form2.htm is loaded asynchronously. Your alert runs before the callback you passed to get is called so formHtml has not been given a value yet.

Dennis
  • 32,200
  • 11
  • 64
  • 79
0

jQuery.get() is asynchronous operation and your anonymous will call after finishing ajax call but during ajax request your alert is showing data so it is showing undefined

Govind Malviya
  • 13,627
  • 17
  • 68
  • 94