jqgrid saveRow not making ajax call

Question

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});

Answer 1

I tried your test URL and traced with respect of Fiddler the results of the editing of the first row.

If I edit the first row of your grid and type 'test' text in the 'Name' field I could see that the jqGrid send to the server the HTTP POST request having the data

id_mdt=1343&id_etp=0&Name_mdt=test&geoaddr_mdt=n11hl&displayaddr_mdt=&telephone_mdt=&email_mdt=&website_mdt=&lat_mdt=&lng_mdt=&flag_mdt=0&description_mdt=&active_mdt=0&oper=edit&id=1343

The data contain the contain of all editable filelds and two additional parameters oper=edit and id=1343 (the same as id_mdt=1343). Your server should just make the modifications and response with any successful HTTP code in case of success and with an error HTTP code in case of failed data update. You server response has as the header which start with

HTTP/1.1 200 OK
Content-Type: text/html

and in the body having

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<br />
<b>Notice</b>:  Undefined variable: growthConn in <b>E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php</b> on line <b>137</b><br />
<br />
<b>Warning</b>:  mysql_query(): supplied argument is not a valid MySQL-Link resource in <b>E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php</b> on line <b>137</b><br />

So one can see many problems:

1. The text "Number of keys: 4 matches" in the response can be interpret as if the id_mdt is not a primary key in the corresponding database table because more as one data item exist having the id_mdt. You should verify design of you database.
2. The strange error messages shows that the update failed. You should examine the line 137 of the E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php server code.
3. You should change your code so, that on error any error HTTP code should be placed in the server response.

I don't use PHP myself so I can't gives you more exact recommendation, but it is clear for me that first of all you should search for the error in your server code.

One more remark. From the server headers one can see that you use Microsoft IIS 7.0 as the web server. Why you don't use WFC, ASMX web services of ASP.NET MVC of your site? In any way I should switch on the compression of both dynamic and static contain on the web server. This will improve the performance of the site. Additionally you should consider to change the code which you currently use in gridComplete to improve the performance. There are many alternatives. Take a look here. here and here for example (in the last answer the performance and event binding part is important; the custom formatter can be replaced from links to buttons).

UPDATED: It seems to me that your next problem is that you try to use saveRow just to post information about the row to the server. The saveRow post the information about the row which is in the inline editing mode so after the call of editRow. Together with other things the editRow add the editable="1" attribute to the row (to the <tr> element) with the code like:

$("#"+rowid).attr("editable","1");

Close to the begining the saveRow test wether the row which one try to save has the attribute. It not it return and do nothing.