CODEWITHSUNDEEP
jquery
Adi Sembiring
Adi Sembiring

Reputation: 5936

Set Global Variable in jQuery

How to set global variable.

$(document).ready(function() {

      $("a.action").click(function(event) {
            var tempResponse = "";
            $.get("", function(response){
                tempResponse = response; 
            });
            alert("response " + tempResponse );
      }

       //todo use response to manipulate some data
});

I declared globa variable tempResponse. and I set in get call back function.

tempResponse = response;

but while I try to alert the response no data displayed. I also try this solution. I change the variable declaration become $.tempResponse and change the set script become $.tempResponse = response;

But it doesn't work to.

Why this could be happened ?

Upvotes: 2

Views: 5652

Answers (5)

Ken
Ken

Reputation: 31

I believe setting the global variable in the top of the script, then setting the ajax call to async: false will do exactly what is needed.

This way the ajax finishes before the javascript attempts to assign the variable. Plus the ajax function is cleaner to me than using .get.

tempResponse = null;
$.ajax({
    url: 'whatever.cgi',
    async: false,
    dataType: 'json',
    data: { blank: null }
    success: function(data) {
         tempResponse = data.response;
    }
 }).error(function(){
    alert('Ajax failed')
 });

 alert(tempResponse);

In your script that is returning the "response", make sure its in json format. In php I would make the data into an array like 

$json_data = array('response'=>$var_name_php_for_response_value);

then only echo out the needed data like so:

 json_encode($json_data);

This would produce the format: { "response":"some response text" } which is the correct json format.

Upvotes: 3

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

My suggestion is you have to wait for the ajax to finish. use ajaxComplete()

if you have: 

var tempResponse = "";
    $.get("ajax/test.html", function(response){
        tempResponse = response; 

    });

you could:

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    alert("response " + tempResponse );
    $(this).text('Triggered ajaxComplete handler.');
  }
});

Upvotes: 0

Erik
Erik

Reputation: 20722

To make it work:

$(document).ready(function() {
    var tempResponse = "";
    $.get("", function(response){
        tempResponse = response; 
        alert("response " + tempResponse );
    });
});

Notice your alert is now inside the json callback function; this function does not execute until the json query is done

Upvotes: 0

Patrick
Patrick

Reputation: 15717

You are just calling your alert right after the $.get so the tempResponse is not yet ready

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038780

Because you call the alert before the variable is actually set. Remember that you are performing an asynchronous query when you call $.get. Try this instead:

$(document).ready(function() {
    $.get('/somescript.cgi', function(response){
        alert('response ' + response);
    });
});

Upvotes: 2

Related Questions