Assigning ajax call return value to an var with jquery

Question

How can I assign a variable(var) to a json object which is returned from ajax call to the server? I need to access that object in the rest of the body.

For example, I've try this, I don't know it's correct.

var selectValues=$(document).ready(function() {
    $.ajax({
                  type: "POST",
                  url: "http://10.0.2.2/mobileajax/callajax.php",
                  data: ({name: theName}),
                  cache: false,
                  dataType: "text",
                  success: onSuccess
                });
})


var $vendor = $('select.mobile-vendor');
var $model = $('select.model');
$vendor.change(
              function() {
                  $model.empty().append(function() {
                      var output = '';
                      $.each(selectValues[$vendor.val()], function(key, value) {
                          output += '<option>' + key + '</option>';
                      });
                      return output;
                  });
              }).change();

// bonus: how to access the download link
$model.change(function() {
    $('a#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
});

Note that, variable selectValues is used in the rest of the body.

Daan Poron · Accepted Answer · 2011-11-11 10:53:52Z

I think you should do the whole code inside the $(document).ready(function() function and then make the ajax call synchronous. Because now the ajax call will be made when the document is ready, but the other code will be run directly without waiting for the document to be ready. Also the ajax call is asynchronous by default, so you should make it synchronous and assign the selectValues variable inside the success function of the ajax call. It will become something like this:

$(document).ready(function() {
        var selectValues;
        $.ajax({
              type: "POST",
              url: "http://10.0.2.2/mobileajax/callajax.php",
              data: ({name: theName}),
              cache: false,
              dataType: "text",
              async: false,
              success: function(data) {
                selectValues = data
              }
            });

            var $vendor = $('select.mobile-vendor');
            var $model = $('select.model');
            $vendor.change(
                          function() {
                              $model.empty().append(function() {
                                  var output = '';
                                  $.each(selectValues[$vendor.val()], function(key, value) {
                                      output += '<option>' + key + '</option>';
                                  });
                                  return output;
                              });
                          }).change();

            // bonus: how to access the download link
            $model.change(function() {
                $('a#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
            });
})

Manuel van Rijn · Accepted Answer · 2011-11-11 10:51:13Z

0

you have to define the var outside the document ready scope like this:

var selectValues;
$(document).ready(function() {
    // ajax
});

in the onSuccess function you can define the selectValues = data or something like that

answered Nov 11, 2011 at 10:51

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

5 Comments

Abimaran Kugathasan Over a year ago

assigning data to selectValues? I need to assign the returned value, not the sending value.

Manuel van Rijn Over a year ago

excuse me, i meant the response so something like success: function(response) { selectValues = response; }

Abimaran Kugathasan Over a year ago

Thanks a lot for the quick response!

Daan Poron Over a year ago

as long as the rest of your code isn't in the document ready this can't work .. because the rest of the code will be executed before the selectedValues is assigned.

Manuel van Rijn Over a year ago

true, but it's only triggered by change events :)

Sagar · Accepted Answer · 2011-11-11 10:54:06Z

0

$.ajax({
              type: "POST",
              url: "http://10.0.2.2/mobileajax/callajax.php",
              data: ({name: theName}),
              cache: false,
              dataType: "text",
              success: function (result){
                  var selectValues=result;
              }
            });

try this.

answered Nov 11, 2011 at 10:54

Sagar

2692 gold badges3 silver badges14 bronze badges

4 Comments

Manuel van Rijn Over a year ago

var selectValues will be only available in the success function and not outside that scope

Sagar Over a year ago

Then define the "var selectValues" as global

Manuel van Rijn Over a year ago

indeed, that should be your answer to Kugathasan Abimaran

nnnnnn Over a year ago

Even if selectValues is global, note that the rest of the page can't actually access the values until after the success callback runs.

sebjames · Accepted Answer · 2011-11-11 10:56:13Z

0

Here is how we extract the returned information from our (xml) ajax calls:

$.ajax ({
    type: "POST",
    url: "something.cgi?someparam=whatever",
    data: "key=val&key2=val2",
    dataType: "xml", // you use json, but I don't think it matters
    success: function (data) {
    if ($("error", data).text() === "") {
        // I could assign $("error", data).text() to a var just here
        // This gets the "error" parameter out of the returned xml or
        // json, here contained in "data"
    }
    [snip the rest]

answered Nov 11, 2011 at 10:56

sebjames

1

Comments

Daan Poron · Accepted Answer · 2011-11-11 11:05:22Z

Another way to do this is to add the rest of your code in the success callback lik this:

$(document).ready(function() {
        $.ajax({
              type: "POST",
              url: "http://10.0.2.2/mobileajax/callajax.php",
              data: ({name: theName}),
              cache: false,
              dataType: "text",
              async: false,
              success: function(selectValues) {
                var $vendor = $('select.mobile-vendor');
                var $model = $('select.model');
                $vendor.change(
                              function() {
                                  $model.empty().append(function() {
                                      var output = '';
                                      $.each(selectValues[$vendor.val()], function(key, value) {
                                          output += '<option>' + key + '</option>';
                                      });
                                      return output;
                                  });
                              }).change();

                // bonus: how to access the download link
                $model.change(function() {
                    $('a#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
                });
              }
            });

})

Collectives™ on Stack Overflow

Assigning ajax call return value to an var with jquery

5 Answers 5

Comments

5 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related