?
Solved

Javascript variable scope issue, prototype.js

Posted on 2008-02-07
9
Medium Priority
?
826 Views
Last Modified: 2012-06-27
Hi all,

I have one function

function GetData()
{
      var resp;
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";      
                  
                              alert(response); // 1            
                                       
                                        resp  = response;
                },
                        
                onFailure: function(){  }
              });
alert resp;
}

/////////////

the problem

alert (response) works fine
but
alert(resp) doesnt work fine. I want the value of response in resp.

Hope its clear. Thanks in advance.
kiranvj
0
Comment
Question by:Kiran Paul VJ
  • 4
  • 3
  • 2
9 Comments
 
LVL 9

Assisted Solution

by:Lakio
Lakio earned 400 total points
ID: 20840951
Im guessing you just forgot () "alert resp" -- > alert(resp)

the " alert(resp) " runs before " resp = response " does
and thats why resp has no value


you have too do what you want to do with the response in the onSuccess function
function GetData() // step 1
{
      var resp;
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";
 
                                        resp  = response;
 
                              step2(resp) // step 2
                },
                        
                onFailure: function(){  }
              });
}
 
function step2( data ) // step 2
{
 alert( data )
}

Open in new window

0
 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 20867822
Hi Lakio,

>>the " alert(resp) " runs before " resp = response " does and thats why resp has no value

that doesnt seem to be the problem

alert(response); shows first , then only alert(resp);
So alert(respose) execute first, after that this line resp  = response; is executed.

I think its purely related to variable scope, since there are two different functions. Even if I declare a variable as global doesnt make much difference.
0
 
LVL 9

Expert Comment

by:Lakio
ID: 20867986
how does your JS look like now?
well, I will show you with this code,
'GetData' will alert before 'onSuccess' does. Just try it.

function GetData()
{
      var resp;
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";      
                 
                             // alert(response); // 1            
                                       alert('onSuccess')
                                        resp  = response;
                },
                       
                onFailure: function(){  }
              });
alert('GetData');
}
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 20969948
Hi Lakio,

First of all sorry for the late reply, i was on travel for few weeks.

I tried ur code.

But this alert('onSuccess') shows first. After that alert('GetData'); is showed.

Kiranvj
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21004455
Yes it is a scoping and more

Read the comments


function GetData()
{
      var resp; // internally known only to getData 
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";      
                  
                              alert(response); // 1            
                                       
                                        resp  = response; /* no var, so global window.resp - if var here, only known to anonymous function HOWEVER there is something called closure that might get in the way here */
                },
                        
                onFailure: function(){  }
              });
alert(resp); //  how can the resp have a value here, the ajax is asyncronous and the anonymous function has not yet been called
}

Open in new window

0
 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 21004568
hi mplungjan,

thank you for replying.

i didnt understand these fully
/* ......... HOWEVER there is something called closure that might get in the way here */

can u plz tell abt closure or some links will be really helpful.

and

alert(resp); //  how can the resp have a value here, the ajax is asyncronous and the anonymous function has not yet been called

the ajax onSucess is already called before alert(resp); because alert(response); showed before alert(resp);

I tried the below code also but still its not working.

thanx once again
kiranvj
var resp; // made it global
function GetData()
{
      //var resp; // internally known only to getData 
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";      
                  
                              alert(response); // 1            
                                       
                                        resp  = response; /* no var, so global window.resp - if var here, only known to anonymous function HOWEVER there is something called closure that might get in the way here */
                },
                        
                onFailure: function(){  }
              });
alert(resp); //  how can the resp have a value here, the ajax is asyncronous and the anonymous function has not yet been called
}

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1600 total points
ID: 21004651
http://blog.morrisjohns.com/javascript_closures_for_dummies

But try this:
var resp; // made it global
var tId;
function GetData()
{
      
      new Ajax.Request("value.php",
             {
                              method:'get',
                              onSuccess: function(transport){
                              response = transport.responseText || "";      
                  
                              alert(response); // 1            
                                       
                                        resp  = response; /* no var, so global window.resp */
                },
                        
                onFailure: function(){  }
              });
  tId = setInterval('testResp()',100);
}
function testResp() {
  if (resp) {
    alert(resp);
    clearInterval(tId)
  }
}

Open in new window

0
 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 21005068
Thank you mplungjan,

The link and code was really helpful. And thanks for responding to the mail. You are really helpful.


@Lakio

Thank you for your time and efforts.

Kiranvj
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21011788
You are welcome
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

592 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question