Plugin jqGrid, il ne m'affiche rien ! [Débutant(e)] [Résolu]

[FrankOVD]

Bonjour,

Je n'ai jamais dans ma vie réussi à partir une liste JQGrid fonctionnelle de zéro même si j'ai déjà travaillé sur des intégrations existantes. Encore cette fois, rien ne se passe et je fait pourtant à la lettre ce qui se retrouve sur la doc en ligne que j'ai trouvé. Quelqu'un peut me dire ce qui ne fonctionne pas?

Version JQuery : 1.5.2
Version JQgrid : 4.0.0
Code JQuery

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//Liste JQGrid
var JQGlist = $("<table>");
$(JQGlist).addClass(".JQGlist");
$(".module").append(JQGlist);
var JQGpager = $("<div>");
$(JQGpager).addClass(".JQGpager");
$(".module").append(JQGpager);
 
$(JQGlist).jqGrid({
  url:"jx.php?vmod="+nom_module+"&vfunc=get_JQGlist&page=1&rows=100&sidx=id_production&sord=asc",
  datatype: "json",
  colNames:['Production','Début production', 'Client', 'Amount','Tax','Total','Notes'],
  colModel:[
    {name:'id_production',index:'id_production', width:110},
    {name:'debut_production',index:'debut_production', width:140},
    {name:'name',index:'name asc, invdate', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right"},		
    {name:'total',index:'total', width:80,align:"right"},		
    {name:'note',index:'note', width:150, sortable:false}		
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '.JQGpager',
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"JSON Example"
});
jQuery(JQGlist).jqGrid("navGrid",".JQGpager",{edit:false,add:false,del:false});

String JSon retournée par mon script PHP

Code :

{"page":"1","total":1,"records":13,"rows":[{"id":"VP11030015","cell":["VP11030015","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030018","cell":["VP11030018","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030025","cell":["VP11030025","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040001","cell":["VP11040001","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040004","cell":["VP11040004","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040005","cell":["VP11040005","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040008","cell":["VP11040008","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040009","cell":["VP11040009","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040010","cell":["VP11040010","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040012","cell":["VP11040012","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040013","cell":["VP11040013","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040014","cell":["VP11040014","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040015","cell":["VP11040015","0000-00-00 00:00:00",0,0,0,0,0]}]}

[danielhagnoul]

Bonsoir

Après un coup d'oeil très rapide sur le code je vois des points inutiles ! addClass() attend simplement le nom de la classe. Quel est le résultat avec les modifications ci-dessous.

Code :

1
2
$(JQGlist).addClass("JQGlist");
$(JQGpager).addClass("JQGpager");

[FrankOVD]

C'est une remarque pertinente mais ça n'a malheureusement pas aidé. Jusqu'à maintenant, en utilisant IE9 sur Windows 7 (au cas ou ca pourrait vous aider à m'aider), je n'obtiens toujours que deux résultats:

1. La grille s'affiche mais reste vide
2. J'ai une erreur javascript qui se réfère au code de jquery (tant v1.5.1 que v1.5.2)

Code :

1
2
3
4
5
Ligne: 16
Caractère: 40246
Code: 0
Message d'erreur: Syntax error, unrecognized expression: #
URL: http://127.0.0.1/dev/lib/jquery-1.5.2.min.js

[danielhagnoul]

Bonjour

Je ne connais pas ce plugin, je viens de faire une première page de test, mais le résultat ne me plaît pas. Je préfère ma première page de test avec Datatable que je ne connais pas mieux.

Je ne peux donc pas vous être d'une grande aide, mais à toutes fins utiles, vérifier que vous avez bien téléchargé tous les éléments nécessaires. Dans mon test :

Code :

1
2
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
<link rel="stylesheet" media="screen" href="../jqGrid4/css/ui.jqgrid.css" />

Code :

1
2
3
4
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="../jqGrid4/js/i18n/grid.locale-en.js"></script>
<script src="../jqGrid4/js/jquery.jqGrid.min.js"></script>

[FrankOVD]

Voici le CSS et les scripts JS généraux qui sont associés à mon source. J'ai fait un test en éliminant YUI3 de l'équation mais ça ne change rien.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/css/smoothness/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/thickboxify/jquery.thickboxify.css" />
<script type="text/javascript" src="lib/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-json.js"></script>
<script type="text/javascript" src="lib/jq_plugins/sort.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery.rightClick.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="lib/jq_plugins/thickboxify/jquery.thickboxify.js"></script>
<script type="text/javascript" src="lib/jq_plugins/grid.locale-fr.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery.jqGrid.min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

[FrankOVD]

Pour vous aider à m'aider. Voici un code source résuit à sa plus simple expression. Je vous serai éternellement reconnaissant de m'aider.

index.php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.11.custom.css" />
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
		<script type="text/javascript" src="includes/jquery-1.5.2.min.js"></script>
		<script type="text/javascript" src="includes/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript" src="includes/grid.locale-fr.js"></script>
    <script type="text/javascript" src="includes/jquery.jqGrid.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(e) {
				$("#JQlist").jqGrid({
					url:"ajax.php",
					datatype: "json",
					colNames:['Production','Début production', 'Client', 'Amount','Tax','Total','Notes'],
					colModel:[
						{name:'id_production',index:'id_production', width:110},
						{name:'debut_production',index:'debut_production', width:140},
						{name:'name',index:'name asc, invdate', width:100},
						{name:'amount',index:'amount', width:80, align:"right"},
						{name:'tax',index:'tax', width:80, align:"right"},		
						{name:'total',index:'total', width:80,align:"right"},		
						{name:'note',index:'note', width:150, sortable:false}		
					],
					rowNum:10,
					rowList:[10,20,30],
					pager: '#JQGpager',
					sortname: 'id',
					viewrecords: true,
					sortorder: "desc",
					caption:"JSON Example"
				});
				jQuery("#JQlist").jqGrid("navGrid","#JQGpager",{edit:false,add:false,del:false});
			});
		</script>
	</head>
	<body>
		<table id="JQlist"></table>
		<div id="JQGpager"></div>
	</body>
</html>

ajax.php

Code :

1
2
3
4
5
6
<?php
$str = <<<JQGRID
{"page":"1","total":1,"records":13,"rows":[{"id":"VP11030015","cell":["VP11030015","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030018","cell":["VP11030018","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030025","cell":["VP11030025","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040001","cell":["VP11040001","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040004","cell":["VP11040004","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040005","cell":["VP11040005","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040008","cell":["VP11040008","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040009","cell":["VP11040009","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040010","cell":["VP11040010","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040012","cell":["VP11040012","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040013","cell":["VP11040013","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040014","cell":["VP11040014","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040015","cell":["VP11040015","0000-00-00 00:00:00",0,0,0,0,0]}]}
JQGRID;
echo($str);
?>

Voilà! Ne vous reste qu'à lier correctement index.php aux librairies et feuilles de style standard. Dans mon test à moi, une grille s'affiche mais elle est vide !? Merci d'avance!

EDIT : Lorsque je clique sur les flèches de la colonne "Production" les résultats apparaissent!?

[FrankOVD]

SOLUTION : Erreur trouvée à la ligne 27 de index.php, "sortname: 'id'" alors que mon réel index se nomme id_production.

CE QUE J'AI APPRIS :

1. jqGrid ne fonctionne pas si les sélecteurs font appel à autre chose qu'un id.
2. jqGrid génère lui-même les paramètres qui sont envoyés lors de la requête Ajax, ces paramètres sont générés à partir des données fournies. Il faut donc bien s'assurer que ce qui est envoyé dans la requête est exact.