Botón jQuery click actualizar de jqGrid solo disparando una vez

Tengo el siguiente código jQuery que estoy usando para llenar un jqGrid. Funciona perfectamente publicar en mi página ASP.NET MVC en el primer clic del button. Mi
El problema es que cualquier otro clic después del primero parece ejecutarse a través del código jquery onclick en el button, pero nunca llega a la página POST. ¿Alguna idea de por qué?

<script type="text/javascript"> $(document).ready(function() { $('#btnSubmit').click(function() { /* Refreshes the grid */ $("#list").jqGrid({ /* The controller action to get the grid data from */ url: '/CRA/AddPart', data: { partNumber: "123"}, datatype: 'json', mtype: 'GET', /* Define the headers on the grid */ colNames: ['col1', 'col2', 'col3', 'col4'], /* Define what fields the row columns come from */ colModel: [ { name: 'col1', index: 'invid', width: 290 }, { name: 'col2', index: 'invdate', width: 290 }, { name: 'col3', index: 'amount', width: 290, align: 'right' }, { name: 'col4', index: 'tax', width: 290, align: 'right'}], height: 'auto', rowNum: 10, rowList: [10, 20, 30], sortname: 'id', sortorder: "desc", viewrecords: true, imgpath: '../../Scripts/jgrid/themes/steel/images', caption: 'Core Return Authorization Contents:', cellEdit: true }); }); }); </script> 

La razón por la cual la grilla no se recarga es porque está llamando al método equivocado. El método jqGrid hace aproximadamente esto:

  1. Examine la tabla para ver si ya es una grilla; si es así, salga.
  2. Convierte la table en una cuadrícula.
  3. Completa la primera página de datos.

Entonces, la segunda vez que llamas al método, no hace nada, como se indica en el paso 1.

En su lugar, debe llamar $("#list").trigger("reloadGrid") en el segundo y todos los clics posteriores.

Ahora, debido a su mtype en las opciones de la grilla, la grilla va a hacer un GET, no un POST. Entonces, si el POST proviene del button mismo (en otras palabras, es una input de tipo submit), debe devolver true para indicar que el envío debe continuar como de costumbre.

Aquí está la solución:

 <script type="text/javascript"> var firstClick = true; $(document).ready(function() { $('#btnSubmit').click(function() { if (!firstClick) { $("#list").trigger("reloadGrid"); } firstClick = false; /* Refreshes the grid */ $("#list").jqGrid({ /* The controller action to get the grid data from */ url: '/CRA/AddPart', data: { partNumber: "123"}, datatype: 'json', mtype: 'GET', /* Define the headers on the grid */ colNames: ['col1', 'col2', 'col3', 'col4'], /* Define what fields the row columns come from */ colModel: [ { name: 'col1', index: 'invid', width: 290 }, { name: 'col2', index: 'invdate', width: 290 }, { name: 'col3', index: 'amount', width: 290, align: 'right' }, { name: 'col4', index: 'tax', width: 290, align: 'right'}], height: 'auto', rowNum: 10, rowList: [10, 20, 30], sortname: 'id', sortorder: "desc", viewrecords: true, imgpath: '../../Scripts/jgrid/themes/steel/images', caption: 'Core Return Authorization Contents:', cellEdit: true }); }); }); </script> 

Debido a que necesito ENVIAR nuevos valores a la Acción para mí, no funciona "reloadGrid".

Simplemente eliminé todo el contenido y volví a crear la tabla vacía.

En el si compruebo si la cuadrícula está allí para ocultar el div "gráfico vacío" (muestra solo un post). En el rest, simplemente limpio el div que rodea la table y luego agrego dentro de la table nuevamente. Cuando el complemento encuentra la tabla vacía, carga la networking completamente otra vez.

LoadTableData es la function que tiene la funcionalidad común para crear y cargar la grilla.

Probablemente esta solución no sea elegante, pero cuando el time se apresura …

 $("#btnDownloadsPerFile").click(function () { if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) { $('#chartContainerDownloadsPerFile .emptyChart').hide(); } else { $('#chartContainerDownloadsPerFile').empty(); $('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>'); } LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val()); });