Appel fonction d'un fichier JS

Version imprimable

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:

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:

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 :

Citation:

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 ?

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:

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.

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:

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:

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);
	}
}

19/01/2018, 00h09
headmax

Pourrais tu en dire plus sur :

Citation:

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.
19/01/2018, 08h01
Mizar_Alcor

Bonjour,

j'ai enlevé l'alert

Code:

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 ?