Tengo un jqGrid, en el cual carga los datos. Al entrar en la pagina, lo primero que me aparece es un pequeño dialogo que me pide un mes y el año. Cuando le das ha aceptar carga el dialogo. Me gustaría saber cómo puedo pasar estas variables al archivo de carga, para poder filtrar la consulta por ese mes y ese año.
Muchas gracias y un saludo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CTA - Cuotas</title>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../js/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/trirand/jquery.jqGrid.min.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/trirand/i18n/grid.locale-es.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/cuotas.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
<script type="text/ecmascript" src="../js/codetabs.js"></script>
<script type="text/ecmascript" src="../js/themeswitchertool.js"></script>
<script>
$(document).ready(function () {
$('.menuContainer').load('../menu.html');
});
function cargaForm(){
$( function() {
$( "#dialog" ).dialog({id:"dialog", closeText: "" });
} );
}
function load(){
var nMes = document.getElementById("mes").value; // formulario.mes.value;
var nAnno = document.getElementById("anno").value; // formulario.mes.value;
$("#dialog").dialog('close');
jQuery("#tblCuotas").jqGrid({
url:'cargaCuotas.php',
datatype: 'json',
mtype: 'POST',
mes: nMes,
anno: nAnno,
colModel:[
{
label: 'ID Cuota',
name: 'idCuota',
index:'idCuota',
width: 50,
key: true,
hidden: true
},
{
label: 'Num. Cuota',
name: 'NumCuota',
index:'NumCuota',
width: 50
},
{
label: 'id. Afiliado',
name: 'idAfiliado',
index:'idAfiliado',
width: 30,
align: 'right'
},
{
label: 'Nombre',
name: 'NOMBRE',
index:'NOMBRE',
width: 300
},
{
label: 'Cuota',
name: 'cuota',
index:'cuota',
width: 50,
align: 'right'
},
{
label: 'Mes',
name: 'nMes',
index:'nMes',
width: 30,
align: 'right'
},
{
label: 'Mes',
name: 'mes',
index:'mes',
width: 80
},
{
label: 'Año',
name: 'anno',
index:'anno',
width: 50,
align: 'center'
},
{
label: 'Pagado',
name: 'pagado',
index:'pagado',
width: 50,
align: 'center'
},
{
label: 'Forma Pago',
name: 'FormaPago',
index:'FormaPago',
width: 100
}
],
loadonce: false,
width: window.innerWidth-20,
height: window.innerHeight-200,
pager: '#paginacion',
multiselect: true,
rowNum: 50,
rowList:[50,100,150],
sortname: 'Custom',
//sortorder: 'desc',
viewrecords: true,
caption: 'CUOTAS'
});
jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
{edit:false,add:false,del:false,view:true,search:false});
}
function getSelectedRows() {
var grid = $("#tblCuotas");
var rowKey = grid.getGridParam("selrow");
if (!rowKey)
alert("No ha seleccionado ninguna linea.");
else {
var selectedIDs = grid.getGridParam("selarrrow");
var result = "";
for (var i = 0; i < selectedIDs.length; i++) {
result += selectedIDs[i] + ",";
}
alert(result);
}
}
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function openForm() {
$( function() {
$( "#dialog" ).dialog({id:"dialog", closeText: "" });
} );
}
</script>
</head>
<body id="cuerpo" onLoad="openForm()">
<div class="menuContainer"></div>
<header id="submenu">
<nav id="enlaces">
<ul>
<li>
<a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a>
</li>
<li>
<a href="javascript:openForm()" >LOAD</a>
</li>
</ul>
</nav>
</header>
<table id="tblCuotas"></table>
<div id="paginacion"> </div>
<div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
<div class="group">
<table id="formulario">
<thead>
<tr style="height: 35px;">
<th colspan="2"><label><span>Elige el mes y el año</span></label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
<td><?php include("../recursos/mesSelect.php"); ?></td>
</tr>
<tr>
<td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
<td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
</tr>
<tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>