am getting there with jqgrid, although i am still unable to save row data to the server
my mini-app creates buttons for each row, which makes a call to a googlemaps geocode. the geocode fills out a form on my page with the data returned.
i have 3 seperate form fields each with its own button so the user can update the row with a correct address, the rel of each button gets changed to the id of the row the geocode has just been performed on. i have this function for the buttons:
EDIT--------------
I have changed my code to try and get the response from the saveRow I donot see ANY AJAX CALLS BEING MADE in firebug if i alert the saveRow it returns false, I have tried putting an error function to catch the error, but this does not seem to get called. Oleg entioned that there are multiple id's in the database, bu this is impossible as its a primary key autonumber. i dont see the request to my server.php to update the record getting called.
$('body').delegate('#displayaddr_btn', 'click', function(){
myID = $(this).attr('rel');
myLat = $('#lat').val();
myLng = $('#lng').val();
myAddress = $('#displayaddr').val();
alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
jQuery("#rowed2").jqGrid('setRowData',myID,{ lat_mdt:myLat, lng_mdt:myLng, displayaddr_mdt:myAddress });
alert(jQuery("#rowed2").jqGrid('saveRow',myID) jQuery("#rowed2").jqGrid('saveRow',myID, {errorfunc:function(id, error){ alert('there was an error in saveRow()- ID:'+id+' Error: '+error); } }); })
nothing seems to happen the alert outputs all the info it should, but i see no call to the processing page to update the record.
------------Update in response to Oleg-------------------------------
Hi Oleg thanks for taking the time, indeed there was an error in my php file for the update of the record, this is now fixed, the output Number of keys: 4 matches number of values: 4my update = UPDATE mapdata_mdt SET idetp_mdt = 0,geoaddr_mdt = 'n11hl',active_mdt = 0,flag_mdt = 0 WHERE id_mdt = 1343 is code i have put in the php page, and is my expected output.
in fact the edit functions on the grid are working as expected:
my problem is when i try to run saveRow() from a button external to the jqrid.
the button's (3 of them) are generated underneath the grid, when the 'geo' button for the grid row is pressed)
This is where i am experiencing problems when the button is clicked saveRow() returns false,from what i can see the call to server.php is not even made, so i cant debug any response.
(I have not used WFC, ASMX web services of ASP.NET MVC before and dont want to complicate things at this point!!)
what am missing? Test URL (geocode the first record called TEST in the list to populate the formthen click one of the save buttons for the appropriate text field)
here is all my code:
function setAddrButtons(myID, mylat, mylng){
alert(' setaddrButtons----ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
$('#displayaddr_btn').attr('rel', myID);
$('#revlook_btn').attr('rel', myID);
$('#altaddr_btn').attr('rel', myID);
$('#lat').val(mylat);
$('#lng').val(mylng);
}
//jquery grid stuff
$('body').delegate('#displayaddr_btn', 'click', function(){
myID = $(this).attr('rel');
myLat = $('#lat').val();
myLng = $('#lng').val();
myAddress = $('#displayaddr').val();
alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
alert(jQuery("#rowed2").jqGrid('saveRow',myID)
jQuery("#rowed2").jqGrid('saveRow',myID,
{errorfunc:function(id, error){
alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
}
});
})
$('body').delegate('#revlook_btn', 'click', function(){
myID = $(this).attr('rel');
myLat = $('#lat').val();
myLng = $('#lng').val();
myAddress = $('#revlook').val();
alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
jQuery("#rowed2").jqGrid('setRowData',myID,{ lat_mdt:myLat, lng_mdt:myLng, displayaddr_mdt:myAddress });
alert(jQuery("#rowed2").jqGrid('saveRow',myID)
jQuery("#rowed2").jqGrid('saveRow',myID,
{errorfunc:function(id, error){
alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
}
});
})
$('body').delegate('#altaddr_btn', 'click', function(){
myID = $(this).attr('rel');
myLat = $('#lat').val();
myLng = $('#lng').val();
myAddress = $('#altaddr').val();
alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
alert(jQuery("#rowed2").jqGrid('saveRow',myID)
jQuery("#rowed2").jqGrid('saveRow',myID,
{errorfunc:function(id, error){
alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
}
});
})
myGrid = jQuery("#rowed2").jqGrid({
url:'data/stokistdata_s_json.php?q=3',
datatype: "json",
mtype: "POST",
rowNum:10,
rowList:[50,100,150,200,300,400,500,600],
pager: '#prowed2',
sortname: 'name_mdt',
viewrecords: true,
gridview:true,
sortorder: "asc",
rowNum:50,
scroll: true,
editurl: "data/server.php",
caption:"Stockist's and Orchid days",
colNames:[
'Actions',
'id',
'Type',
'Name',
'Geo Address',
'Display Address',
'Telephone',
'Email',
'website',
'lat',
'lng',
'flag',
'description',
'active'
],
colModel:[{
name:'Actions',
index:'Actions',
width:100,
sortable:false,
search:false
}, {
name:'id_mdt',
index:'id_mdt',
width:15,
align:"left",
sortable:true,
search:false,
hidden: true,
editable: true,
editrules: { edithidden: true },
editoptions:{readonly:true},
hidedlg: true,
key: true
}, {
name:'id_etp',
index:'id_etp',
width:90,
align:"left",
sortable:true,
editable:true,
edittype:"select",
formatter:'select',
editoptions:{value:{1:'Stokist',0:'Orchid Day'}},
editrules:{required:true},
search:true,
stype:'select',
sopt: ['eq'],
searchoptions:{value:{'':'All',1:'Stockist',2:'Orchid Day'}}
},{
name:'Name_mdt',
index:'Name_mdt',
align:"left",
width:150,
editable:true,
editrules:{required:true},
search:true,
stype:'text',
sopt:['cn']
}, {
name:'geoaddr_mdt',
index:'geoaddr_mdt',
width:150,
align:"left",
editable:true,
search:false,
edittype:"textarea",
editoptions:{rows:"3",cols:"30"}
}, {
name:'displayaddr_mdt',
index:'displayaddr_mdt',
width:150,
align:"left",
editable:true,
search:false,
edittype:"textarea",
editoptions:{rows:"3",cols:"30"}
}, {
name:'telephone_mdt',
index:'telephone_mdt',
width:80,
align:"left",
editable:true,
search:false
}, {
name:'email_mdt',
index:'email_mdt',
editrules:{email:true, required:false},
width:80,
align:"left",
sortable:false,
editable:true,
search:false
}, {
name:'website_mdt',
index:'website_mdt',
editrules:{url:true, required:false},
width:80,
align:"left",
sortable:false,
editable:true,
search:false
}, {
name:'lat_mdt',
index:'lat_mdt',
width:40,
align:"left",
sortable:false,
editable:true,
search:false
} , {
name:'lng_mdt',
index:'lng_mdt',
width:40,
align:"left",
sortable:false,
editable:true,
search:false
}, {
name:'flag_mdt',
index:'flag_mdt',
width:20,
align:"left",
sortable:true,
editable:true,
edittype:"select",
editoptions: {value:{1:'Flagged',0:'No Flag'}},
search:true,//
stype:'select',
searchoptions:{value:{'':'All',1:'Flagged',0:'No Flag'}}//{value:":Both;1:Flagged;0:No Flag"}
}, {
name:'description_mdt',
index:'description_mdt',
width:150,
align:"left",
sortable:false,
editable:true,
search:false,
edittype:"textarea",
editoptions:{rows:"3",cols:"30"}
}, {
name:'active_mdt',
index:'active_mdt',
width:20,
align:"left",
sortable:true,
editable:true,
edittype:"select",
editoptions: {value:{1:'Active',0:'Hidden'}},
search:true,//
stype:'select',
searchoptions:{value:{'':'All','1':'Active','0':'Hidden'}} //{value:":Both;1:Active;0:Hidden"}
}], search : {
caption: "Search...",
Find: "Find",
Reset: "Reset",
matchText: " match",
rulesText: " rules"
},
gridComplete: function(){
var ids = jQuery("#rowed2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+cl+"');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc});
}
}
});
jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
{edit:true,add:true,del:true,search:true,refresh:true},
{closeOnEscape:true, recreateForm: true, width:500},
{closeOnEscape:true, recreateForm: true, width:500} // Add options
);
myGrid.jqGrid('filterToolbar',{defaultSearch:'cn',stringResult:true});
