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

**denisduval75** · 29/11/2016, 09h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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({
         ...
         ...

**NoSmoking** · 30/11/2016, 19h47

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ne veux pas dire grand chose et que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#tbllocal').puidatatable({

attend un élément ayant comme id tbllocal.

**denisduval75** · 30/11/2016, 20h36

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 !

**NoSmoking** · 01/12/2016, 19h11

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 03/12/2016, 15h16

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

**denisduval75** · 03/12/2016, 15h51

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

Voici ce qui est correct :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 03/12/2016, 16h11

Ok merci, en ce qui concerne cette ligne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**denisduval75** · 03/12/2016, 16h27

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

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

JavaScript

Discussions similaires

Partager

Partager