jqgrid custom edit function undefined

Question

Ive just started playing with jqgrid and am experiencing a strange problem?

ive copied the custom edit example from the jqgrid demo's site and have added an extra button

my code:

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' onclick=\"jQuery('#rowed2').editRow('"+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+"');\" />";
                gc = "<input style='height:22px;width:20px;' type='button' value='G' onclick=\"geocodeMe("+cl+");\" />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:be+se+ce+gc}); 
            } 
        }

when i click the button labeled G it should i thoughr call my function

but i get a js error that geocodeMe is undefined its in my code so dont know why it cant find it am guessing its a scope problem, any ideas how to fix it???

the geocodeMe function:

function geocodeMe(myID) {
        // set default region
        region = 'uk';
        // address not empty
        removemarkers();
        $('#geo_detail').html('<label>Geocoding address...</label>');
        // lookup the address
        var myData = $("#rowed2").getRowData(myID);
        address = myData.geoaddr_mdt;
        geocoder.geocode( {'address':address,'region':region}, function(results, status) {
            // if the address was found
            if(status == google.maps.GeocoderStatus.OK) {
                $str = '<label>Geocode Successful<br> Lattitude: '+results[0].geometry.location.lat()+' Longitude: '+results[0].geometry.location.lng()+'<br> The address is displayed below and will be stored in the database.<br> If the address is incorrect you may edit it before saving the location to the database.<br>If the marker is in the wrong location you may drag it to where you  believe it should be.</label>';
                $('#geo_detail').html($str);
                // insert lat/long into form
                $('#lat').val(results[0].geometry.location.lat());
                $('#lng').val(results[0].geometry.location.lng());
                // create new lat/long object
                latlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
                $('#disp_addr').val(address);
                $('#form_buttons').show();
                $('#detail_address').show();
                //reverselookup(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                // set zoom option
                map.setZoom(15);
                // center the map on the new location
                map.setCenter(results[0].geometry.location);
                createMarker(map, latlng, true, false);

                if(savetype ='update'){
                    savedata('update');
                };
                if(savedata='save'){
                    savedata('save');
                };
            } else {
                // display error
                $('#geo_detail').append('<label>Geocoder failed to retrieve address: '+status+'</label>');
                $('#disp_addr').val($('#geo_addr').val());
            };
        });
    };

Answer 1

If you use onclick=\"geocodeMe("+cl+"), the function geocodeMe must be defined as global, so on the top level like jQuery.

I recommend you to look other possibilities to implement the same behaviors: here and here.

Moreover you should be clear that enumeration through all items of jqGrid('getDataIDs') in for loop could be very slow in case of large number of items in the grid (about 100 or more). Much more effective way is to use jQuery selection described here. Even more effective way is the usage of rows array of the table element and cells property inside of any rows element. See here one more answer which also includes corresponding demo.

Answer 2

found the answer in this thread Answer here

i craeted a class for the button called geocode me,

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' onclick=\"jQuery('#rowed2').editRow('"+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+"');\" />";
                gc = "<input style='height:22px;width:20px;' type='button' value='G' class='geocodeMe' rel='"+cl+"' />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:be+se+ce+gc}); 
            } 

then created a click function for that class which reads in the rel attribute holding the correct id:

$('body').delegate('.geocodeMe', 'click', function() {
        var myID = $(this).attr('rel');
        var myData = $("#rowed2").getRowData(myID);
        rest of function code.............

    });