Appel fonction d'un fichier JS

**Mizar_Alcor** · 12/01/2018, 10h30

Bonjour,

j'ai une fonction dans un fichier JS qui me permet d'effectuer un select sur une base de données Web SQL de mon navigateur.
Lorsque j'affiche ma page la console du navigateur me dit que la fonction n'existe pas. Je vous avoue que je ne comprend pas
car elle y est bien présente. J'ai d'autres fonctions auxquelles je fait appel dans ce même fichiers et qui fonctionne correctement.

Voici l'appel dans le html :

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
<!DOCTYPE html>
<html>
	<head>
		<!--<meta charset="UTF-8">-->
		<title>Affichage données base Web SQL.</title>
		<script language="javascript" type="text/javascript" src="js/sql.js">
		</script>
		<script language="javascript" type="text/javascript" src="js/dom.js">
		</script>
	</head>
 
	<body>
		<script type="text/javascript">
                        EcrireHeader("Lecture des données Web SQL.");
                        EcrireMenu();
                </script>
 
		<main>
			<script language="javascript" type="text/javascript">
                                getUser();
                                /*try
                                {
                                        window.onload = function()
                                        {
                                                var db = openDatabase(dbName, version, dbDisplayName, dbSize);
                                                db.transaction(function(e)
                                                {
                                                        e.executeSql("SELECT * FROM User",[],function(e,results)
                                                        {
                                                                var nbRec = results.rows.length;
                                                                var i,usr;
                                                                for (i=0;i<nbRec;i++)
                                                                {
                                                                        usr = results.rows.item(i);
                                                                        alert(usr.Nom + " " + usr.prenom);
                                                                }
                                                        });
                                                });
                                        }
                                }
                                catch(err)
                                {
                                        alert(err.message)
                                }*/
                        </script>
		</main>
 
		<script  type="text/javascript">
                        EcrireFooter();
                </script>
	</body>
</html>

Voici le fichier JS :

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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var version = 1.0;
var dbName = "mydb";
var dbDisplayName = "mydb";
var dbSize = 5 * 1024 * 1024;
/*Si la base n'existe pas, celle-ci est créée et la connexion ouverte et créé les tables si elles n'existent pas dans la base.
Sinon, ouvre simplement la connexion à la base.*/		
function InitialiseBase()
{
	var db;
 
	try 
	{
		db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database) 
			{
				alert("database creation callback");
			});
 
			db.transaction(function(t)
			{
				/* Place SQL statements here */
				t.executeSql("CREATE TABLE IF NOT EXISTS User(Nom varchar(50), prenom varchar(50))", [], function(sqlTransaction, sqlResultSet) 
				{
 
				}, function(sqlTransaction, sqlError) 
				{
					alert(sqlError.message)
				});
			}, function() 
				{
					alert("SQL statements were executed successfully.");
				});
	}
	catch(err)
	{
		alert(err.message)
	}
}
 
function onSuccess(e) { }
function onError(e) { }
 
function insertData(nom, prenom) 
{
	var db = openDatabase(dbName, version, dbDisplayName, dbSize);
	db.transaction(function (e) 
	{
		e.executeSql("INSERT INTO User(Nom, Prenom) VALUES (?, ?)", [nom, prenom]);//, onSuccess, onError);
	});
}
 
function deleteUser(nom)
{
	try
	{
		var db = openDatabase(dbName, version, dbDisplayName, dbSize);
		db.transaction(function (e) 
		{
			e.executeSql("DELETE FROM User WHERE Nom = ?", [nom]);//, onSuccess, onError);
		});
	}
	catch(err)
	{
		alert(err.message);
	}
}
 
function getUser()
{
	try
	{
		var db = openDatabase(dbName, version, dbDisplayName, dbSize);
		db.transaction(function(e)
		{
			e.executeSql("SELECT * FROM User",[],function(e,results)
			{
				var nbRec = results.rows.length;
				var i,usr;
				for (i=0;i<nbRec;i++)
				{
					usr = results.rows.item(i);
					alert(usr.Nom + " " + usr.prenom);
				}
			});
		});
	}
	catch(err)
	{
		alert(err.message);
	}
}

voici l'erreur qui est affichée dans la console de mon navigateur :

Uncaught ReferenceError: getUser is not defined
at affichage_web_sql.html:20
(anonymous) @ affichage_web_sql.html:20

Auriez-vous une idée de la cause de ceci ?

**headmax** · 12/01/2018, 20h20

Salut ce genre d'erreur pourrait arrivé si l'appel getUser(); est exécuté avant le chargement de la page, pour être sur il suffit d'englober ton script dans une fonction de chargement du DOM soit la balise qui nous intéresse est notre "BODY".

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 language="javascript" type="text/javascript">
     document.body.onload = function(){
				getUser();
				/*try
				{
					window.onload = function()
					{
						var db = openDatabase(dbName, version, dbDisplayName, dbSize);
						db.transaction(function(e)
						{
							e.executeSql("SELECT * FROM User",[],function(e,results)
							{
								var nbRec = results.rows.length;
								var i,usr;
								for (i=0;i<nbRec;i++)
								{
									usr = results.rows.item(i);
									alert(usr.Nom + " " + usr.prenom);
								}
							});
						});
					}
				}
				catch(err)
				{
					alert(err.message)
				}*/
    };
			</script>

A tester.

**Mizar_Alcor** · 18/01/2018, 11h34

Bonjour,

merci à toi pour ta réponse.
J'ai adapté mon code en me basant sur ton exemple. J'arrive bien à afficher les éléments dans mon alert.
Par contre lorsque je souhaite afficher sous forme de tableau dans mon html, la fonction termine son execution
après le chargement de la page. De ce fait, aucun des éléments n'est affiché.

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
 
<main>
			<section id="listUser">
				<script language="javascript" type="text/javascript">
                                document.body.onload = function(){
                                        try
                                        {
                                                var i,nbRec,usr,txt;
                                                usr = new Array();
                                                usr = getUser();
                                                nbRec = usr.length;
                                                txt += "<table border='1px' width='300px' bordercolor='lightgrey' cellspacing='0'>";
                                                txt += "<caption>Liste de personnes.</cpation>";
                                                txt += "<thead><tr><th>Nom</th><th>Prénom</th></tr></thead>";
                                                txt += "<tfoot><tr><th>Nom</th><th>Prénom</th></tr></tfoot>";
                                                txt += "<tbody>";
                                                        
                                                for (i=0;i<nbRec;i++)
                                                {
                                                        txt += "<tr><td>" + usr[i].Nom + "</td><td>" + usr[i].prenom + "</td></tr>";
                                                }
                                                        
                                                txt += "</tbody>";
                                                txt += "</table>";
                                                document.getElementById('listUser').innerHTML = txt;                            
                                                alert(listUser.innerHTML);
                                        }       
                                        catch(err)
                                        {
                                                alert(err.message);
                                        }
                                }
                                </script>
			</section>
		</main>

Code javascript :

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
function getUser()
{
	try
	{
		var nbRec,i,usr;
		usr = new Array();
		var db = openDatabase(dbName, version, dbDisplayName, dbSize);
		db.transaction(function(e)
		{
			e.executeSql("SELECT * FROM User",[],function(e,results)
			{
				nbRec = results.rows.length;
 
				for (i=0;i<nbRec;i++)
				{
					usr.push(results.rows.item(i)); //= results.rows.item(i);
					alert(usr[i].Nom + " " + usr[i].prenom);
				}
			});
		});
 
		return usr;
	}
	catch(err)
	{
		alert(err.message);
	}
}

**headmax** · 19/01/2018, 00h09

Pourrais tu en dire plus sur :

J'ai adapté mon code en me basant sur ton exemple. J'arrive bien à afficher les éléments dans mon alert.

La ou lesquels alert?Les deux exemples de js sont deux js distinct?
As tu essayé en otant l'alert alert(usr[i].Nom + " " + usr[i].prenom); car elle pourrait empêcher le bon déroulement du script.

**Mizar_Alcor** · 19/01/2018, 08h01

Bonjour,

j'ai enlevé l'alert

Code javascript :

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

alert(usr[i].Nom + " " + usr[i].prenom);

et aussi celle qui affiche mon innerHtml mais le résultat reste le même.
Est-ce du au fait que ma query sur la base websql soit asynchrone ?

Appel fonction d'un fichier JS

JavaScript

Discussions similaires

Partager

Partager