PDA

View Full Version : Problem While Fetch Data via Ajax in one File and Using it in other file



yasirsaleem
9 Apr 2013, 10:32 PM
Hi all,
I am fetching data via Ajax in one file named 'data.js' in this way:



Ext.onReady(function () {
Ext.Ajax.request({
url: '../users/all_users_ws.json',
success: function(response){
data = Ext.decode(response.responseText);

usersList = [];
for (var i=0; i<data.users.length; i++) {
usersList.push({boxLabel: data.users[i], name:'all_users', inputValue:data.users[i]});
}
}
});
required = '<span style="color:red;font-weight:bold;" data-qtip="Required">*</span>';
});


Then I tried to access this data in another file named 'user_profile.js' as follows:



Ext.onReady(function() {
// alert('start');
// alert(data.usersList);

userProfileForm = {
xtype: 'form',
title: 'User Profile',
items: [{
xtype:'combo',
fieldLabel: 'Users',
afterLabelTextTpl: required,
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'id',
'user'
],
data: data.usersList
}),
valueField: 'id',
displayField: 'user',
editable: false,
}]
}
});


Note that the rendering is performing in another file which I have not mentioned here because there is no problem in its rendering.

I have performed some tests which results are given below:
In 'user_profile.js', when I ran my code by commenting the first statement, i.e., alert('start'); and uncommenting second alert, i.e., alert(data.usersList); then my form is not rendering/displaying
In 'user_profile.js', when I uncommented first and second alerts then I am getting my data correctly in second alert and the form is populating correctly as I want.
From above testings I have inferred that.

The form is rendering correctly when I am using alert('start') because in 'data.js', data is fetching in Ajax block, therefore, the time of appearing alert and pressing 'Ok' is enough for Ajax block to fetch data. While on the other hand, withou alert('start'), when the control comes on 'user_profile.js' file, then until that time data is not being fetched by Ajax block therefore I am getting nothing.
I am looking for any alternative. I would be thankful if anyone could resolve my enquiry.

Thank you and I look forward to hearing back soon

Yasir Saleem

Farish
9 Apr 2013, 10:53 PM
You shouldnt be using onReady function twice. it should only be used once. you can create your form in a function and then call that function inside success of the AJAX request. that way, you will be sure that the data has arrived before the form is created.

Another thing you need to check is that "data" is a global variable. If its not, then it wont be accessible from outside the AJAX request. Since you have declared it without var (var data = ...), it should be global.

yasirsaleem
10 Apr 2013, 1:21 AM
Thank you for your quick response.

Yes, 'data' variable is global and it is accessing correctly when I add alert('start') statement.

I also tried by making a new function and calling it in success block of Ajax request but the problem is that in my HTML files I have declared them as follows:



<script type="text/javascript" src="{{=URL('static','view_js/userst/partials/data.js')}}"></script>
<script type="text/javascript" src="{{=URL('static','view_js/users/partials/users_profile.js')}}"></script>


Since 'user_profile.js' is defining after 'data.js' file therefore, my global variables and functions defined in 'users_profile.js' are not accessible in 'data.js'.

But if I reverse their position, i.e.,

<script type="text/javascript" src="{{=URL('static','view_js/users/partials/users_profile.js')}}"></script>
<script type="text/javascript" src="{{=URL('static','view_js/userst/partials/data.js')}}"></script>


then my functions and global variables defined in 'users_profile.js' are accessible in 'data.js' but then global variables defined in 'data.js' are not accessible in 'user_profile.js'.

Please guide me that is there any mechanism that I can access functions and global variables in any file regardless of their defining position.

Farish
10 Apr 2013, 3:04 AM
in the first file, you can define global variables on the very top. e.g.:

var data;

this can then be accessed in all files no matter what the order. However, you should name it in a way which is not so commonly used.

yasirsaleem
10 Apr 2013, 3:28 AM
It worked :)
Thank you so much.