Foros del Web » Programando para Internet » Jquery »

Problema con Flexigrid de jQuery

Estas en el tema de Problema con Flexigrid de jQuery en el foro de Jquery en Foros del Web. Hola, tengo el siguiente html: <!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>Flexigrid</title> <link rel="stylesheet" type="text/css" ...
  #1 (permalink)  
Antiguo 29/07/2009, 13:31
 
Fecha de Ingreso: abril-2008
Mensajes: 87
Antigüedad: 16 años, 8 meses
Puntos: 0
Problema con Flexigrid de jQuery

Hola,

tengo el siguiente html:

<!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>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<style>

body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.flexigrid div.fbutton .add
{
background: url(css/images/add.png) no-repeat center left;
}

.flexigrid div.fbutton .delete
{
background: url(css/images/close.png) no-repeat center left;
}


</style>
</head>

<body>

<b>This is a sample implementation attached to a form, to add additional parameters</b>

<form id="sform">
<p>
The values you entered will be place in name column for demo's sake.<br />
Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
Value 3 :
<select name="val3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select><br />
Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
</p>
<p>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</p>

</form>

<table id="flex1" style="display:none"></table>

<script type="text/javascript">

$("#flex1").flexigrid
(
{
url: "/Ejemplo_jQuery_Grid/States",
dataType: 'json',
colModel : [
{display: 'Name', name : 'name', width : 40, sortable : true, align: 'center'}/*,
{display: 'Label', name : 'label', width : 180, sortable : true, align: 'left'},
{display: 'Abbreviation', name : 'abbreviation', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}*/
],
searchitems : [
{display: 'ISO', name : 'name'}/*,
{display: 'Name', name : 'name', isdefault: true}*/
],
sortname: "name",
sortorder: "asc",
nowrap:false,
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
method:"get",
showTableToggleBtn: true,
width: 700,
onSubmit: addFormData,
height: 200
}
);




//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData()
{

//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});
return true;
}

$('#sform').submit
(
function ()
{
$('#flex1').flexOptions({newp: 1}).flexReload();
return false;
}
);


</script>

</body>
</html>

Y el servlet es:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("entra");// TODO Auto-generated method stub
response.setContentType("text/json");
List objs = new ArrayList();
Objeto objeto = new Objeto();
objeto.setName("jose");
objs.add(objeto);
JSONArray ja = new JSONArray();
ja.put(objs);
response.getWriter().write("({\"listaObjetos\":" + ja.toString() + "})");
//response.addHeader("X-JSON", "{identifier:\"abbreviation\",items: [{name:\"Alabama\", label:\"Alabama\",abbreviation:\"AL\"},{name:\"Ala ska\", label:\"Alaska\",abbreviation:\"AK\"},{name:\"Barc elona\", label:\"Barcelona\",abbreviation:\"BCN\"}]}");
//response.getWriter().write("{identifier:\"abbrevia tion\",items: [{name:\"Alabama\", label:\"Alabama\",abbreviation:\"AL\"},{name:\"Ala ska\", label:\"Alaska\",abbreviation:\"AK\"},{name:\"Barc elona\", label:\"Barcelona\",abbreviation:\"BCN\"}]}");
//response.getWriter().println("{\"identifier\": \"abbreviation\",\"items\": [{\"name\": \"Alabama\",\"label\": \"Alabama\",\"abbreviation\": \"AL\"}]}");

}

El problema está en que no me muestra los datos en el grid y en la información de página me da el siguiente error:
--> Displaying NaN to NaN of undefined items

Alguien podría ayudarme, por favor?.

Saludos!!
  #2 (permalink)  
Antiguo 02/08/2010, 15:35
 
Fecha de Ingreso: febrero-2010
Ubicación: Porlamar
Mensajes: 1
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Problema con Flexigrid de jQuery

Cita:
Iniciado por prosi Ver Mensaje
Hola,

tengo el siguiente html:

<!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>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<style>

body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.flexigrid div.fbutton .add
{
background: url(css/images/add.png) no-repeat center left;
}

.flexigrid div.fbutton .delete
{
background: url(css/images/close.png) no-repeat center left;
}


</style>
</head>

<body>

<b>This is a sample implementation attached to a form, to add additional parameters</b>

<form id="sform">
<p>
The values you entered will be place in name column for demo's sake.<br />
Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
Value 3 :
<select name="val3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select><br />
Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
</p>
<p>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</p>

</form>

<table id="flex1" style="display:none"></table>

<script type="text/javascript">

$("#flex1").flexigrid
(
{
url: "/Ejemplo_jQuery_Grid/States",
dataType: 'json',
colModel : [
{display: 'Name', name : 'name', width : 40, sortable : true, align: 'center'}/*,
{display: 'Label', name : 'label', width : 180, sortable : true, align: 'left'},
{display: 'Abbreviation', name : 'abbreviation', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}*/
],
searchitems : [
{display: 'ISO', name : 'name'}/*,
{display: 'Name', name : 'name', isdefault: true}*/
],
sortname: "name",
sortorder: "asc",
nowrap:false,
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
method:"get",
showTableToggleBtn: true,
width: 700,
onSubmit: addFormData,
height: 200
}
);




//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData()
{

//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});
return true;
}

$('#sform').submit
(
function ()
{
$('#flex1').flexOptions({newp: 1}).flexReload();
return false;
}
);


</script>

</body>
</html>

Y el servlet es:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("entra");// TODO Auto-generated method stub
response.setContentType("text/json");
List objs = new ArrayList();
Objeto objeto = new Objeto();
objeto.setName("jose");
objs.add(objeto);
JSONArray ja = new JSONArray();
ja.put(objs);
response.getWriter().write("({\"listaObjetos\":" + ja.toString() + "})");
//response.addHeader("X-JSON", "{identifier:\"abbreviation\",items: [{name:\"Alabama\", label:\"Alabama\",abbreviation:\"AL\"},{name:\"Ala ska\", label:\"Alaska\",abbreviation:\"AK\"},{name:\"Barc elona\", label:\"Barcelona\",abbreviation:\"BCN\"}]}");
//response.getWriter().write("{identifier:\"abbrevia tion\",items: [{name:\"Alabama\", label:\"Alabama\",abbreviation:\"AL\"},{name:\"Ala ska\", label:\"Alaska\",abbreviation:\"AK\"},{name:\"Barc elona\", label:\"Barcelona\",abbreviation:\"BCN\"}]}");
//response.getWriter().println("{\"identifier\": \"abbreviation\",\"items\": [{\"name\": \"Alabama\",\"label\": \"Alabama\",\"abbreviation\": \"AL\"}]}");

}

El problema está en que no me muestra los datos en el grid y en la información de página me da el siguiente error:
--> Displaying NaN to NaN of undefined items

Alguien podría ayudarme, por favor?.

Saludos!!

Buenas tardes amigo ya solucionaste el problema, pues te puedo ayudar si posteas el codigo del post2.php que trae consigo el flexigrid


Jose Luis Oronoz Troconis
Director Ejecutivo Openidea
---

http://www.openidea.com.ve
  #3 (permalink)  
Antiguo 29/04/2011, 11:44
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Problema con Flexigrid de jQuery

Estimado tengo un problema con flexigrid de jquery el boton buscar no me funciona, ¿hay alguien que me pueda ayudar?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:06.