PDA

View Full Version : return value of Ajax.request



pvdbel
4 Dec 2010, 12:48 PM
Hai all,

I want a function that include Ext.ajax.request that retrurn a value (translation from ajax request).
How do ik get the result.responseText back?



Ext.onReady(function(){
Ext.MessageBox.buttonText.yes = doTranslate('jsButtonYes');


function doTranslate(item) {
Ext.Ajax.request({
url: baseUrl+'/ajax/translate/',
params: { item: item },
method: 'GET',
success: function ( result, request) {
??? },
failure: function ( result, request) {
alert('failed');
}
});
}
});

devtig
5 Dec 2010, 12:24 AM
AJAX has an A for Asynchronous. The function defined in success will execute once the server's response is back.



Ext.onReady(function(){
function doTranslate(item) {
Ext.Ajax.request({
url: baseUrl+'/ajax/translate/',
params: { item: item },
method: 'GET',
success: function(response, options) {
var obj = Ext.decode(response.responseText);
console.log(obj);
//translate something
},
failure: function(response, options) {
console.log('server-side failure with status code ' + response.status);
}
});
}
});


If you want to localize (change language and language settings), check out the technique used here: http://dev.sencha.com/deploy/dev/examples/locale/multi-lang.html

Animal
5 Dec 2010, 12:33 AM
You have to think differently.

Your translate function will take a callback which will be a function to do something with the returned value:



function doTranslate(item, callback, callbackScope) {
Ext.Ajax.request({
...
success: function(xhr, opts) {
var result = Ext.decode(xhr.responseText);
callback.call(callbackScope || window, result); // Or result.whatever...
}
});
}


Make this mental change as soon as possible or things will become extremely difficult for you in UI development.

Nothing "blocks" in Javascript. You should have your app decomposed into objects and methods, and it should be simple to pass one of these methods as a callback to handle the result of an asynchronous operation.

pvdbel
6 Dec 2010, 4:25 AM
Hey Animal,

Thx! But can you help me look the right way?
How does the callback function look like?

Thanks in advance

Condor
6 Dec 2010, 4:30 AM
You could call it with:

doTranslate('abc', function(result){
// do something with 'result'.
});

Animal
6 Dec 2010, 5:17 AM
Personally, I would not translate like that anyway.

I'd load the translated text at age load time along with the rest of the payload.

mschwartz
6 Dec 2010, 7:01 AM
Sometimes you may not want to have a callback.

callback && callback.call(callbackScope || window, result); // Or result.whatever...

EelcoT
7 Dec 2010, 8:30 AM
However, this is not what Peter (and I as his collegue) want.
The translation function is intended to serve translations as values into various other objects and libraries passed as options (like a title for ext.tabs for example). The callback solution still requires me to do something, like setting values in the dom, which is not an option.

Solutions would be either translating the rendered dom elements, in which case the whole dynamics would be lost, or translating server side and passing all translations into a javascript array before loading the other functions (which is not what we want at this point).

Prototype would allow me to set the request to asynchronous: false, for instance, so the return value can be specified in the request function.

A third solution would therefore be to start using prototype alongside Ext, which we are also reluctant to do.

The question therefore is wether Ext allows non asynchronous processing of ajax calls?

Animal
7 Dec 2010, 8:33 AM
Just load the translated properties into the page at page startup so that you end up with a big object containing the key->text mappings.

devtig
7 Dec 2010, 9:31 AM
Just like in the example url I posted: http://dev.sencha.com/deploy/dev/examples/locale/multi-lang.html?lang=nl&charset=ascii

which loads the file with translations using key->text mappings : http://dev.sencha.com/deploy/dev/src/locale/ext-lang-nl.js