Question

I’m trying to call a function in the onclick event of the button that is created during the gridComplete event..Loads OK…here’s what the rendered html looks like for the button in the first row

<input type="button" onclick="deleteRow(9197113);" value="Delete" style="height: 22px; width: 70px;">

but when i click the button…the function is not called and firebug says….

deleteRow is not defined

How can I call a function, rather than having inline javascript,,,(which does work BTW, but I would like to call the function for readability and maintainability). I’ve included the working inline javascript…it’s commented out in the below snippet…

Below is the grid Complete portion of the jqGrid settings.

jQuery("#list").jqGrid({

   ........................

    gridComplete: function() {
        var ids = jQuery("#list").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i];
            de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick='deleteRow('" + cl + "' );' />";   
            //de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick=\"jQuery('#list').jqGrid('delGridRow', '" + cl + "', {msg: 'Delete this entry?'});\" />"; 
            jQuery("#list").jqGrid('setRowData', ids[i], { Delete: de });
        }
    }

   ........................

 });

Here’s the deleteRow() function…

function deleteRow() {
    alert("hit delete button");
    // jQuery("#grid_id").jqGrid('delGridRow', row_id_s,options );
}

Answer 1

I would change your grid complete function so that it gives the imput a class of say “delete” and then in my document ready function setup a live click event for that class selector.

something like this

gridComplete: function() {
    var ids = jQuery("#list").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var cl = ids[i];
        de = '<input style="height:22px;width:70px;" type="button" class="delete" value="Delete" />';
        $("#list").jqGrid('setRowData', ids[i], { Delete: de });
    }
}

$('#list .delete').live('click',function(){
    var id = $(this).parent().attr('id');
});