PDA

View Full Version : Submitting selected records from a List to an Ajax request



GaryW
7 Jul 2010, 1:03 PM
I'm trying to go from a List page, which displays several records you can select and then click a next button to slide to the next panel which will be populated based on those selected records.



items: new Ext.List(Ext.apply(groupingBase, {
multiSelect: true,
hideOnMaskTap: false,
scope:this
})),
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
});
}
},{xtype: 'spacer'},
{
text: 'View Fees',
ui: 'forward',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
ajaxValues();
}
}]
}]


When you click View Fees, it slides to the next panel and calls ajaxValues. I can't figure out how to getSelectedRecords from the list to pass to the Ajax request. I think I should be using params and getSelectedRecords, but nothing i tried worked.



function ajaxValues() {

Ext.Ajax.request({
url : 'values.php',
method: 'POST',
success: function ( result, request ) {
alert("Success: "+result.responseText);
},
failure: function ( result, request) {
alert("Failed: "+result.responseText);
}
});

}

evant
7 Jul 2010, 7:53 PM
getSelectedRecords gives you an array. So loop over the array and pull out the property from the record (probably the id).



var arr = [];
Ext.each(list.getSelectedRecords(), function(rec){
arr.push(rec.get('foo'));
});
Ext.Ajax.request({
url: 'Foo',
params: {
data: arr
}
});

GaryW
8 Jul 2010, 10:51 AM
It's looping thru correctly, but I can't get the values from the array. What is "rec" in your snippet? Is that an existing object?



function ajaxValues() {
var arr = [];
Ext.each(list.getSelectedRecords(), function(rec){
arr.push(rec.get('airlineList')); //airlineList is the ID of the list
alert(rec.get('airlineList')); //undefined
});

Ext.Ajax.request({
url : 'values.php' ,
method: 'GET',
params: { data: arr },
success: function ( result, request ) {
alert("Success: "+result.responseText);
},
failure: function ( result, request) {
alert("Failed: "+result.responseText);
}
});
}

ickyfoot
21 Jan 2011, 10:11 AM
Hi there,
I have a related issue. I am populating an array (via jQuery) with a series of 'key: value' pairs and attempting to send it to the server for processing. The problem is, when I add the array to the AJAX params list, only the last item in the array is retained. I am console.logging the array prior and during to the Ajax request function and everything's there, so something's happening when the Ajax call sends the request itself. Here's the code:


$('#edListDataBtn' + id).live("click", function (){
var title = $('#listInfDisp-'+id).html();
var paramStr = [];
var i=0;
$('div.listItems' + id + ' span').each(function(index){
var classes = $(this).attr('class');
var parts = classes.split(' ');
var setItmId = parts[1];
var getItm = $('span.' + setItmId + ' input').val();
if (setItmId != undefined) {
paramStr.push(setItmId+': '+getItm);
}
});
console.log(paramStr); <---ARRAY IS INTACT AT THIS POINT
Ext.Ajax.request({
url: LIST_SRC,
method: 'POST',
params: {action: 'edItems', data: paramStr}, <---POSTS ONLY THE LAST ARRAY ITEM
success: function(result,request) {
console.log(paramStr); <---ARRAY IS INTACT AT THIS POINT, TOO
console.log(result.responseText);
storeItms.load();
Ext.Msg.alert('Success','The List has been updated');
}
});
return false;
});
return false;

If in the php I simply call $_REQUEST and post back everything, it's just the 'action' parameter and the final item in the array. This leads me to believe that while the array is intact within the Ajax request, only the final item is actually being posted.

Any insight would be much appreciated.

Thanks,
-Eric

ickyfoot
21 Jan 2011, 10:33 AM
And, as *always*, I figure it out immediately after posting. I had to set it up as an object, basically, by making the following changes:


$('#edListDataBtn' + id).live("click", function (){
var title = $('#listInfDisp-'+id).html();
var paramStr = [];
var i=0;
$('div.listItems' + id + ' span').each(function(index){
var classes = $(this).attr('class');
var parts = classes.split(' ');
var setItmId = parts[1];
var getItm = $('span.' + setItmId + ' input').val();
if (setItmId != undefined) {
paramStr.push(setItmId+': '+getItm);
}
});
console.log(paramStr);
var paramFin = '{'+paramStr+'}'; <---DON'T OBJECTIFY ME!!!
Ext.Ajax.request({
url: LIST_SRC,
method: 'POST',
params: {action: 'edItems', data: paramFin}, <---USING NEW OBJECTIFIED VAR
success: function(result,request) {
console.log(result.responseText); <---EUREKA! THE FULL OBJECT IS RETURNED
storeItms.load();
Ext.Msg.alert('Success','The List has been updated');
}
});
return false;
});
return false;