HTML/JavaScript et Prime UI (PrimeFaces) : utilisation impossible

Version imprimable

Bonjour,

Je souhaite utiliser un Datatable du framework PrimeUI (PrimeFaces), mais aucun résultat ne s'affiche !

J'ai pourtant copié/collé le code à partir d'une démo du site.

Note : j'utilise netBeans pour IDE. Je n'ai pas déclaré PrimeFaces dans mon projet. J'ai téléchargé la version (dernière) 4.1.15 de PrimeUI et déclaré le .jar comme librairie du projet.

MERCI POUR VOTRE AIDE... si indispensable !!!

Voici mon code HTML, puis JavaScript :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <link rel="stylesheet" href="%PATH%/theme.css" />
        <link rel="stylesheet" type="text/css" href="%PATH%/font-awesome.css" />
        <link rel="stylesheet" href="%PATH%/jquery-ui.css" />
        <link rel="stylesheet" href="%PATH%/primeui.min.css" />
        <link href="monstyle.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="%PATH%/jquery.js"></script>
        <script type="text/javascript" src="%PATH%/jquery-ui.js"></script>
        <script type="text/javascript" src="%PATH%/primeui.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <title>Projet Jen-Ol-D</title>
    </h:head>

    <h:form>
        <h:body>
            <a href="#" onclick="tbllocal"> this is a link! </a>
        </h:body>        
    </h:form>
</html>

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
<script type="text/javascript">
    $(function() {
        var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
            {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
            {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
            {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
            {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
            {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
            {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
            {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
            {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
            {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
        ];
 
        $('#tbllocal').puidatatable({
                caption: 'Local Datasource',
                columns: [
                {field: 'vin', headerText: 'Vin'},
                {field: 'brand', headerText: 'Brand'},
                {field: 'year', headerText: 'Year'},
                {field: 'color', headerText: 'Color'}
            ],
            datasource: localData
        });
 
        $('#tblremoteeager').puidatatable({
         ...
         ...

30/11/2016, 19h47
NoSmoking

Bonjour,
je ne connais pas Prim...es mais on peut noter que dans ton code

Code:

<a href="#" onclick="tbllocal"> this is a link! </a>

ne veux pas dire grand chose et que

Code:

$('#tbllocal').puidatatable({

attend un élément ayant comme id tbllocal.
30/11/2016, 20h36
denisduval75

Bonjour et merci pour ta réponse ; en fait j'ai copié/collé la dernière chose que j'ai essayé (j'ai essayé tellement de choses !).

Le code dans ma page HTML est : <div id="tbllocal"> </div>

Mais toujours sans succès : rien ne s'affiche ! :(

La première chose à faire est de regarder le code HTML généré, tu y verras peut être des erreurs, chemin d'accès au fichier incorrect. Dans un deuxième temps un petit coup d'oeil à la console, F12, peut être riche d'enseignement.

Un exemple sur base du tiens, et de leur site, qui fonctionne parfaitement, un peu épuré quand même

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="fr">
<head>
<base href="http://www.primefaces.org/primeui/showcase/">
<meta charset="UTF-8">
<title>PrimeUI - Datatable</title>
 
<link rel="stylesheet" type="text/css" href="themes/bootstrap/theme.css">
<!-- jQuery -->
<script src="resources/js/jquery.js"></script>
<script src="resources/js/jquery-ui.js"></script>
<!-- PrimeUI -->
<link rel="stylesheet" href="../build/primeui.css">
<script src="../build/primeui.js"></script>
<style>
html, body{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  max-width: 60em;
  margin: auto;
}
h1 {
  color: #069;
}
#tbllocal {
  width: 50em;
  margin: auto;
}
</style>
<script>
$(function() {
    var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
        {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
        {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
        {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
        {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
        {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
        {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
        {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
        {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
        {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
    ];
 
    $('#tbllocal').puidatatable({
            caption: 'Local Datasource',
            columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: localData
    });
 
});
</script>
</head>
<body>
  <div id="main">
    <h1>PrimeUI - Datatable</h1>
    <div id="tbllocal"></div>
  </div>
</body>
</html>

03/12/2016, 15h16
NoSmoking

:koi:
Je vois que tu as mis cette discussion en résolue, quel était donc le problème que tu as rencontré ?

En fait il me manquait certaines déclarations en début de page.

Voici ce qui est correct :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="fr">
<head>
<base href="http://www.primefaces.org/primeui/showcase/">
<meta charset="UTF-8">
<title>PrimeUI - Datatable</title>
 
<link rel="stylesheet" type="text/css" href="themes/bootstrap/theme.css">
<!-- jQuery -->
<script src="resources/js/jquery.js"></script>
<script src="resources/js/jquery-ui.js"></script>
<!-- PrimeUI -->
<link rel="stylesheet" href="../build/primeui.css">
<script src="../build/primeui.js"></script>

03/12/2016, 16h11
NoSmoking

Ok merci, en ce qui concerne cette ligne

Code:

<base href="http://www.primefaces.org/primeui/showcase/">

je ne l'ai mise que pour le test et ne pas me compliquer la tâche, dans ton cas il vaut mieux télécharger les sources ou faire un appel vers un CDN (Content Delivery Network), par exemple https://cdnjs.com/libraries/primeui
03/12/2016, 16h27
denisduval75

MERCI pour l'info mais je ne sais pas quoi faire avec ça : télécharger et/ou installer mais où et comment ?