jQuery botón haga clic en actualizar de jqGrid solo disparando una vez

Question

Tengo el siguiente código jQuery que estoy utilizando para llenar un jqGrid. Funciona perfectamente publicar en mi página ASP.NET MVC en el primer clic del botón. Mi problema
es, cualquier otro clic más allá del primero parece ejecutar el código jquery al hacer clic en el botón, 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> 

Answer 1

El motivo por el que 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 cuadrícula; si es así, salga.
2. Convierta la tabla en una cuadrícula.
3. Complete la primera página de datos.

Así que la segunda vez que se llama al método, no hace nada, como en el paso 1.

su lugar, debería estar llamando $("#list").trigger("reloadGrid") en el segundo y todos los clics posteriores.

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

Answer 2

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> 

Answer 3

Porque necesito crear nuevos valores a la Acción para mí que no funciona "reloadGrid".

Acabo de eliminar todo el contenido y crear la tabla vacía de nuevo.

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

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

Probablemente esta solución no es elegante, pero cuando el tiempo está corriendo ...

$("#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()); 
     });