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

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

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, 20h47

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, 21h36

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, 20h11

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, 16h16

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, 16h51

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>

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager