PDA

View Full Version : ExtJS 3.3.1 Store AJAX Problem



Liffey
26 Nov 2013, 5:46 AM
Hey guys,

I'm new in this forum and new to ExtJS and I've tried to find the solution to my problem but I could not find something similiar.

What am I doing?

I've got a form panel with certain fields, ect. and I've got a Button which triggers an function to make an AJAX request according to the parameters set in the panel. The AJAX request calls an PHP script and this script get's the data according to the parameters and returns an XML. The XML response is beeing handled in the success area of the AJAX request. Where I'm saving the attributes to an global array, finally I'm trying to load the data manually to an array store. The store is used to save the attributes of the XML. The store is tied to an grid panel.

Problem:

Actually everything works for me in FF but no other browser suppores this solution, the data is beeing rendered but the elements in the grid panel are not visible.

What thought did I have?
I've made an ugly solution, I know that myself that's why I'm here to learn from you guys. I hoped that there is an possibility to call the data from the store, but I could only find something for ExtJS 4. The problem is that I'm tied to 3.3.1 because of the use of GeoExt 1.1.

Code:
Array Store


eventsStore = new Ext.data.ArrayStore({ //Create data store for the events stored in eventsArray
fields: [ //Define the fields of the store
{name: "name"},
{name: "description"},
{name: "eventsCategory"},
{name: "fee"},
{name: "date"},
{name: "street"},
{name: "nr"},
{name: "plz"},
{name: "town"}
]
});


AJAX request function (triggerd by an button from the from panel)


function getEvents(startdt, enddt, eventType, eventRadius, ccLat, ccLong){
Ext.Ajax.request({ //Sending AJAX request
url: "../php/phpsql_getEvents.php",
method: "POST",
params: { //Parameters
startdt: startdt,
enddt: enddt,
eventType: eventType,
eventRadius: eventRadius,
cityCenterLat: ccLat,
cityCenterLong: ccLong
},
success: function(response){ /
markers.clearMarkers();
var xml = response.responseXML;
var events = xml.documentElement.getElementsByTagName("event");

eventsArray = new Array();

for (var i = 0; i < events.length; i++) {
var name = events[i].getElementsByTagName("name")[0].innerHTML;
var description = events[i].getElementsByTagName("description")[0].innerHTML;
var eventcategory = events[i].getElementsByTagName("eventcategory")[0].innerHTML;
var fee = events[i].getElementsByTagName("fee")[0].innerHTML;
var date = events[i].getElementsByTagName("date")[0].innerHTML;
var street = events[i].getElementsByTagName("address")[0].children[0].innerHTML;
var nr = events[i].getElementsByTagName("address")[0].children[1].innerHTML;
var plz = events[i].getElementsByTagName("address")[0].children[2].innerHTML;
var town = events[i].getElementsByTagName("address")[0].children[3].innerHTML;
var lat = events[i].getElementsByTagName("location")[0].children[0].innerHTML;
var long = events[i].getElementsByTagName("location")[0].children[1].innerHTML;

var html = "<h3>"+name+"</h3><br/>"+description+"<br/><br/>"+"<b>Eintritt: </b><br/>"+fee+"&euro;"+"<br/><br/><b>Adresse:</b><br/>"+street+" "+nr+"<br/>"+plz+" "+town;

eventsArray[i] = new Array();
eventsArray[i][0] = name;
eventsArray[i][1] = description;
eventsArray[i][2] = eventcategory;
eventsArray[i][3] = fee;
eventsArray[i][4] = date;
eventsArray[i][5] = street;
eventsArray[i][6] = nr;
eventsArray[i][7] = plz;
eventsArray[i][8] = town;
eventsArray[i][9] = lat;
eventsArray[i][10] = long;

placeMarker(lat, long, html);
}

eventsStore.loadData(eventsArray);
}
});
}

mitchellsimoens
3 Dec 2013, 12:55 PM
So you are using Ext.Ajax to load data and then add that data to the store? You should use a store with a proxy and xml reader to load data.

Liffey
5 Dec 2013, 1:11 AM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)

Hey,

thanks for the advise but I found a solution to my problem. The main code was correct I was simply working on the wrong DOM tree. I've changed the code as follows:



function getEvents(startdt, enddt, eventType, eventRadius, ccLat, ccLong){ Ext.Ajax.request({ //Sending AJAX request url: "../php/phpsql_getEvents.php", method: "POST", params: { //Parameters startdt: startdt, enddt: enddt, eventType: eventType, eventRadius: eventRadius, cityCenterLat: ccLat, cityCenterLong: ccLong }, success: function(response){ //Success function markers.clearMarkers(); //Clear current makers from markers layers var xml = response.responseXML; //Save resulting XML var events = xml.documentElement.getElementsByTagName("event"); //Get events from XML eventsArray = new Array(); for (var i = 0; i < events.length; i++) { //Get event attributes + store attributes in eventsArray if(events[i].getElementsByTagName("name")[0].firstChild == null){ var name = ""; } else{ var name = events[i].getElementsByTagName("name")[0].firstChild.data; } if(events[i].getElementsByTagName("description")[0].firstChild == null){ var description = ""; } else{ var description = events[i].getElementsByTagName("description")[0].firstChild.data; } if(events[i].getElementsByTagName("eventcategory")[0].firstChild == null){ var eventcategory = ""; } else{ var eventcategory = events[i].getElementsByTagName("eventcategory")[0].firstChild.data; } if(events[i].getElementsByTagName("fee")[0].firstChild == null){ var fee = ""; } else{ var fee = events[i].getElementsByTagName("fee")[0].firstChild.data; } if(events[i].getElementsByTagName("date")[0].firstChild == null){ var date = ""; } else{ var date = events[i].getElementsByTagName("date")[0].firstChild.data; } if(events[i].getElementsByTagName("street")[0].firstChild == null){ var street = ""; } else{ var street = events[i].getElementsByTagName("street")[0].firstChild.data; } if(events[i].getElementsByTagName("nr")[0].firstChild == null){ var nr = ""; } else{ var nr = events[i].getElementsByTagName("nr")[0].firstChild.data; } if(events[i].getElementsByTagName("plz")[0].firstChild == null){ var plz = ""; } else{ var plz = events[i].getElementsByTagName("plz")[0].firstChild.data; } if(events[i].getElementsByTagName("town")[0].firstChild == null){ var town = ""; } else{ var town = events[i].getElementsByTagName("town")[0].firstChild.data; } if(events[i].getElementsByTagName("lat")[0].firstChild == null){ var lat = ""; } else{ var lat = events[i].getElementsByTagName("lat")[0].firstChild.data; } if(events[i].getElementsByTagName("long")[0].firstChild == null){ var long = ""; } else{ var long = events[i].getElementsByTagName("long")[0].firstChild.data; } var html = "<h3>"+name+"</h3><br/>"+description+"<br/><br/>"+"<b>Eintritt: </b><br/>"+fee+"&euro;"+"<br/><br/><b>Adresse:</b><br/>"+street+" "+nr+"<br/>"+plz+" "+town; eventsArray[i] = new Array(); eventsArray[i][0] = name; eventsArray[i][1] = description; eventsArray[i][2] = eventcategory; eventsArray[i][3] = fee; eventsArray[i][4] = date; eventsArray[i][5] = street; eventsArray[i][6] = nr; eventsArray[i][7] = plz; eventsArray[i][8] = town; eventsArray[i][9] = lat; eventsArray[i][10] = long; placeMarker(lat, long, html); //Call placeMarker function } eventsStore.loadData(eventsArray); //Manually load local data } }); }

kumar_Rajesh78
5 Dec 2013, 5:27 PM
your final code looks really unformatted. Please post it after formatting for the benefits of others.

Thanks,
Rajesh

Liffey
10 Dec 2013, 2:03 AM
I'm sry for the messy code. I'm reducing it to to the following basic changes. The error was based on the fact, that I had used the wrong DOM-NODE.

Ths was the old DOM-NODE:

events[i].getElementsByTagName("name")[0].innerHTML;

I've changed it to the following DOM-NODE:

events[i].getElementsByTagName("name")[0].firstChild.data