Ajax not working properly, do not know why

[Cyberangel67]

Ajax not working properly, do not know why?

The following code when dumping the myData variable is showing undefined, and I can't see why, and yes the json data is formatted correctly, as I use that function elsewhere.



var flightsGrid = {
init : function(){

var myData;
function doJSON(stringData) {
myData = Ext.util.JSON.decode(stringData);
}
Ext.Ajax.request({
url : 'http://localhost/mydata.php' ,
params : { action : 'getComponents' },
method: 'get',
success: function ( result, request ) {
doJSON(result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'There was a problem retrieving the data from the server. The server or network may not have been available at the time of your request. Please try again.'+action.date);
}
});

console.log(myData);
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'id'
},
[
{name: 'post_id'},
{name: 'topic_title'},
{name: 'author'},
{name: 'reply_count'}
])
});


// create the editor grid
var grid = new Ext.grid.Grid('flights-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true,
enableDragDrop:true,
autoExpandColumn: 'id'
});



var layout = Ext.BorderLayout.create({
center: {
margins:{left:0,top:0,right:0,bottom:0},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
ds.load({params:{start:0, limit:25}});
}
};

Ext.onReady(flightsGrid.init, flightsGrid, true);

[evant]

First off, please post your code in code tags {code}myCode{/code} (replace {} with []).

Second, your myData variable will almost always be null, because you're making a callback, but you aren't waiting for it to complete when you dump myData using console.log. You need to move this to somewhere AFTER your ajax request has completed.

[Cyberangel67]

Cheers but I am not sure how to format this so that happens.

This has me baffled, I knew that was the problem but I am not able to figure how to rewrite this. Seems stupid I know, but I am not an expert a JS, know enough to be dangerous :-(

[evant]

You already have the structure in place. You're doing it correctly with your JSON decoding. You wait until the callback finishes and then you parse the data. You need to do the same thing with everything after your ajax request (grid creation etc).

[Cyberangel67]

Yeah you where right, I should have been a little more observing:-(