how can I dig my variable out of this pit?

Question

I asked a fairly poor question yesterday, but I still have the same general problem. I wanted to add a variable property to an object, and the solution I attempted was to do an ajax request to receive the variable, and then set the property to the response. I think I have tried this at least 100 different ways:

Ext.onReady(go);

function go() {

  var x; 

  function getRating(id, callback) {
      Ext.Ajax.request({
          url: '/index.php/ajax/do_rate',
          method: 'POST',
          success: function(result)
          {
              jsonData = Ext.util.JSON.decode(result.responseText);
              x = jsonData.result;
          }
      });
  }
  r2 = new Ext.ux.form.Rater({
      displayValue: x,
      maxValue: 10
  });

  var simple = new Ext.FormPanel({
    items: [r2]
  });
  simple.render(document.body);
}

If it try it as above, x is undefined. If I try to create r2 prior to the ajax request, and set its displayValue within the request, the correct displayValue is shown for the object in the console, but it does not render with the correct displayValue. I don't think it makes it in time. Thanks for the help, I'm thinking I might need a 'callback', but cannot figure out the proper method.

The working code is below:

Ext.onReady(go);

function go() {
    Ext.Ajax.request({
        url: '/index.php/ajax/do_rate',
        method: 'POST',
        success: function(result)
        {
            jsonData = Ext.util.JSON.decode(result.responseText);
            var r2 = new Ext.ux.form.Rater({
                displayValue: jsonData.result,
                maxValue: 10
            });
            var simple = new Ext.FormPanel({
            items: [r2]
            });
            simple.render(document.body);
        }
    });

}

Answer 1

Just do everything you need to do with the data inside the "success" callback.

function go() {

  function getRating(id, callback) {
      Ext.Ajax.request({
          url: '/index.php/ajax/do_rate',
          method: 'POST',
          success: function(result)
          {
              jsonData = Ext.util.JSON.decode(result.responseText);

              var x = jsonData.result;

              var r2 = new Ext.ux.form.Rater({
                  displayValue: x,
                  maxValue: 10
              });

              var simple = new Ext.FormPanel({
                items: [r2]
              });
              simple.render(document.body);
          }
      });
  }
}

Answer 2

you need to put this code:

r2 = new Ext.ux.form.Rater({
    displayValue: x,
    maxValue: 10
});

var simple = new Ext.FormPanel({
    items: [r2]
});

inside your AJAX POST CALLBACK like this:

success: function(result)
        {
            jsonData = Ext.util.JSON.decode(result.responseText);
            x = jsonData.result;
            r2 = new Ext.ux.form.Rater({
                displayValue: x,
                maxValue: 10
            });

            var simple = new Ext.FormPanel({
                items: [r2]
            });
        }