jqGrid - edit function never getting called

Question

I'm having a problem with JQGrid using ASP.NET MVC. I'm trying to follow this example (after you go to that link, over on the left side of the page please click Live Data Manipulation, then Edit Row), but my edit function is never getting called (i.e. it's never getting into the $("#bedata").click(function(). Does anyone know what could be the problem?

    <script type="text/javascript">
        var lastsel2;

        jQuery(document).ready(function() {
            jQuery("#editgrid").jqGrid({
                url: '/Home/GetMovieData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                  { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                ],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20],
                sortname: 'id',
                sortorder: "desc",
                height: '100%',
                width: '100%',
                viewrecords: true,
                imgpath: '/Content/jqGridCss/redmond/images',
                caption: 'Movies from 2008',
                editurl: '/Home/EditMovieData/',
                caption: 'Movie List'
            });
        });

        $("#bedata").click(function() {
            var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
            if (gr != null)
                jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
            else
                alert("Hey dork, please select a row");
        });            
    </script>

The relevant HTML is here:

<table id="editgrid">
</table>
<div id="pager" style="text-align: center;">
</div>
<input type="button" id="bedata" value="Edit Selected" />

Answer 1

Since I do not see it in your example code, you need to call all of this from within the jQuery ready event:

jQuery(document).ready(function($) {

    var lastsel2;

    jQuery(document).ready(function() {
    ...
});

Otherwise your code may be executed before the DOM is ready, which may explain why your click handler never gets set up.