Appeler une fonction js d'un fichier externe (js)

**thomas_legrand** · 08/07/2011, 11h00

Bonjour,

Cette question est surement naive, car c'est vraiment le B.A.-BA du js, mais ... Je ne parviens pas à lier mon fichier js à ma page php.

En résumé, j'ai 4 fonctions appelées sur des événements onclick sur des input. Les fonctions ne sont pas très compliquées, je les ai testées en les écrivant dans le fichier php (entre les balises <script>), tout fonctionnait à merveille.

Je souhaite désormais les enregistrer dans un fichier .js, mais cela ne fonctionne plus. J'ai pourtant lu des dizaines de tutoriaux sur divers sites, et je ne comprends pas ce que j'ai fait de travers.

Voici le head de ma page php qui appèle les fonctions :

Code xhtml :

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
 
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>IODE Ing&eacute;nierie : Aperçu avant Impression</title>
	<link rel="shortcut icon" href="/design/images/favicon_iode.png" />
	<link rel=stylesheet media="screen,print" type="text/css" title="Design" href="/design/filtres.css" />
 
	<script language=javascript type="text/javascript" src="fonctions_javascript.js"></script>
 
	<!--[if IE]>
		<link rel=stylesheet media="screen,print" type="text/css" title="Design" href="/design/design_ie.css" />
	<![endif]-->
 
 
 
</head>

Voici ensuite mon fichier fonctions_javascript.js :

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
29
30
31
32
33
34
35
36
37
38
39
 
/* ************************************************* */
/* ************ Fonctions Javascript *************** */
/* ************************************************* */
 
 
 
function maj_colonnes()
//appelée par filtre_attributs.php lors de la validation du formulaire, pour actualiser la page apercu.php
{
	alert('lancement de la fonction maj_colonnes()');
	setTimeout("window.opener.location.replace('http://localhost/apercu.php')", 200);
	setTimeout('self.close()',800);
	return(false);
}
 
function retour_rech()
//appelée par filtre_attributs.php sous le formulaire, pour revenir à la page d'accueil
{
	setTimeout("window.opener.location.replace('http://localhost/accueil.php?o=2')", 200);
	setTimeout('self.close()',500);
	return(false);	
}
 
function afficher_tout()
//pour afficher apercu.php avec toutes les colones visibles
{
	setTimeout("window.opener.location.replace('http://localhost/apercu.php?cocher=afficher_tout')", 200);
	setTimeout('self.close()',500);
	return(false);	
}
 
function afficher_rien()
//pour afficher apercu.php avec aucune des colones visibles
{
	setTimeout("window.opener.location.replace('http://localhost/apercu.php?cocher=afficher_rien')", 200);
	setTimeout('self.close()',500);
	return(false);	
}

Et enfin, voici un endroit où j'appèle la première fonction (maj_colonnes() ):

Code html :

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

1
2
3
4
5
6
7
 
	<td	colspan="2">
		<INPUT 	type="submit" 
				value="Mettre &agrave; jour les colonnes" 
				class="bouton_simple not_print" 
				onclick="javascript:maj_colonnes();" />
	</td>

Je suppose que c'est une erreur stupide, mais j'ai passé tellement de temps à la chercher que je suis condamné à ne plus la voir. Merci d'avance si l'un d'entre vous prenait le temps de m'éclairer.

**Bovino** · 08/07/2011, 11h37

Lorsque tu cliques sur un input de type submit, la fonction est lancée puis le formulaire est soumis immédiatement, tu n'as donc pas le temps de voir les modifications avant que la page soit rechargée.
Change ton input en type button et ça arrangera les choses (sauf que tu n'auras plus de submit

)

**thomas_legrand** · 08/07/2011, 11h40

Hum ... Je vais peut-être dire une connerie (parce que je suis novice), mais c'est à ca que sert la fonction setTimeout(), non?

Parce que, comme je le disais, mes fonctions fonctionnent parfaitement si j'écris leur définition dans mon fichier php.

**Sharcoux** · 08/07/2011, 13h24

Première question : est-ce que ton fichier js est bien chargé ?
Deuxième question : est-ce que ta fonction est bien exécutée ?

30 façon de trouver la réponse à ces questions. Je te laisse trouver celle qui te convient et nous donner les réponses

**thomas_legrand** · 11/07/2011, 10h32

Bonjour,

C'est mon fichier qui semble ne pas se charger du tout (un petit alert en haut du fichier qui ne s'execute même pas me permet d'arriver à cette conclusion).

**sekaijin** · 11/07/2011, 13h45

où as-tu mis ton fichier js et ton fichier php sur ton disque
car tel que tu l'as écrit les deux doivent être au même endroit

A+JYT

**thomas_legrand** · 11/07/2011, 14h36

Les deux fichiers sont à la racine, donc dans le même répertoire.

**nadox** · 12/07/2011, 21h55

Bonsoir,

Si les fichiers Javascript sont à la racine, où est la page html générée en php ?
Tu utilise un chemin relatif puisque tu mets le nom du fichier seul (il faut donc que les fichiers soient au même endroit que la page), si la page est dans un sous-dossier, il faut utiliser un chemin absolu (qui commence par / qui représente la racine) ou alors adapter le chemin relatif ( quelque chose comme ../monfichier.js pour "remonter" d'un dossier.)

**thomas_legrand** · 13/07/2011, 12h49

Bonjour,

La tu me poses une colle. Mon fichier php et mon fichier js sont dans le même repertoire, mais j'avoue ne pas savoir où se trouve la page html générée (bêtement, j'aurais cru qu'elle se trouvait au même endroit que le php).

Comment savoir où est ma page html?

Autre question, si mon chemin commence par "/", c'est un chemin absolu? (ce que tu viens de m'écrire). J'aurai cru le contraire, et qu'il fallait entre www.truc.com/etc pour avoir l'adresse absolue.

**sekaijin** · 13/07/2011, 15h43

il ne faut pas confondre CHEMIN et URL

/toto/tata/monfichier est un chemin absolut
ton navigateur va utiliser le serveur de la page courante pour lui demander le fichier
ton serveur va ignorer le dossier de la page courante, partir de la racine et suivre ton chemin pour trouver le fichier.

http://servertoto/tata/monfichier est une url absolue
ton navigateur va ignoré le nom du serveur de la page courante et envoyer la demande (/toto/tata/monfichier) au serveur sépcifié dans l'url)
le serveur en question va alors suivre le chemin depuis sa racine pour trouver le fichier

un chemin relatif
tata/monfichier
ton Navigateur va cherche le chemin de la page courante (/app/dir/mapage.html) il va déterminé le dossier de la page (/app/dir/)
il va constituer un nouveau chemin (/app/dir/tata/monfichier) qu'il va demander au serveur de la page courante.
ton serveur va alors parcourir ce nouveau chemin pour trouver le fichier.

A+JYT

**thomas_legrand** · 13/07/2011, 15h52

Merci pour ces éclaircissements.

Je vais faire quelques essais, peut-être qu'en ayant mieux compris ce détail, je retrouverai mon erreur.

En général, vaut-il mieux utiliser un chemin relatif ou absolu (dans mon cas par exemple, où je suis sensé connaître les deux)?

**thomas_legrand** · 13/07/2011, 16h03

J'ai essayé plusieurs variantes (chemin relatif, chemin absolu, url), mais ça ne fonctionne toujours pas.

Comme je travaille sur un serveur local (WAMP), pensez-vous que ca puisse venir de là? (genre Apache ne peut pas lier de fichier js aux fichiers php... Mais je ne vois pas trop pourquoi).

**sekaijin** · 13/07/2011, 16h16

tu ouvre les fichier de log de ton serveur
fichiers apache/logs/access.log
tu vas trouver des choses comme

Code :

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

1
2
3
4
5
6
127.0.0.1 - - [20/Jun/2011:08:55:39 +0200] "GET /phpmyadmin/themes/original/img/s_notice.png HTTP/1.1" 200 247 "http://localhost/phpmyadmin/import.php" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"
127.0.0.1 - - [20/Jun/2011:08:56:20 +0200] "GET /phpmyadmin/index.php?db=mysql&token=7e184f8135ead34c3792c026293197ff HTTP/1.1" 200 2468 "http://localhost/phpmyadmin/navigation.php?lang=fr-utf-8&convcharset=utf-8&collation_connection=utf8_general_ci&token=7e184f8135ead34c3792c026293197ff&phpMyAdmin=cabqd7gqk2el6nopc4d050787dm3mhdj" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"
127.0.0.1 - - [20/Jun/2011:08:56:20 +0200] "GET /phpmyadmin/navigation.php?db=mysql&token=7e184f8135ead34c3792c026293197ff HTTP/1.1" 200 2739 "http://localhost/phpmyadmin/index.php?db=mysql&token=7e184f8135ead34c3792c026293197ff" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"
127.0.0.1 - - [20/Jun/2011:08:56:21 +0200] "GET /phpmyadmin/themes/original/img/b_sbrowse.png HTTP/1.1" 200 197 "http://localhost/phpmyadmin/navigation.php?db=mysql&token=7e184f8135ead34c3792c026293197ff" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"
127.0.0.1 - - [20/Jun/2011:08:56:20 +0200] "GET /phpmyadmin/db_structure.php?db=mysql&token=7e184f8135ead34c3792c026293197ff HTTP/1.1" 200 6169 "http://localhost/phpmyadmin/index.php?db=mysql&token=7e184f8135ead34c3792c026293197ff" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"
127.0.0.1 - - [20/Jun/2011:08:56:21 +0200] "GET /phpmyadmin/themes/original/img/b_props.png HTTP/1.1" 200 294 "http://localhost/phpmyadmin/db_structure.php?db=mysql&token=7e184f8135ead34c3792c026293197ff" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24"

tu cherche là dedans le nom de ton fichier tu dois surement avoir
HTTP/1.1" 404
mais surtout sur la ligne en question tu va trouver le chemin que tu demande réellement à ton serveur

si tu as mis

Code :

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

<script language=javascript type="text/javascript" src="fonctions_javascript.js"></script>

dans ta page et que ton url de consultation est
http://localhost/monappli/dossier1/dossier2/mapage.html
normalement tu dois voir
GET /dossier1/dossier2/fonctions_javascript.js dans tes logs

A+JYT

**thomas_legrand** · 13/07/2011, 16h35

Voici les dernières lignes du fichier :

Code :

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

1
2
3
4
5
 
127.0.0.1 - - [13/Jul/2011:16:23:03 +0200] "GET /filtre_attributs.php HTTP/1.1" 200 6750
127.0.0.1 - - [13/Jul/2011:16:24:31 +0200] "GET /filtre_attributs.php HTTP/1.1" 200 6750
127.0.0.1 - - [13/Jul/2011:16:24:40 +0200] "GET /filtre_attributs.php HTTP/1.1" 200 6750
127.0.0.1 - - [13/Jul/2011:16:30:22 +0200] "GET /filtre_attributs.php HTTP/1.1" 200 6751

Est-ce que ca signifie que le chargement du fichier a échoué, ou bien que la ligne <script ...></script> n'a pas été interprétée?

EDIT : filtre_attributs.php est le fichier appelant mon fichier javascript. L'appel se fait entre les balises <head>

**sekaijin** · 13/07/2011, 16h54

tu n'as pas de ligne contenant
fonctions_javascript.js ??

**nadox** · 14/07/2011, 00h43

Effectivement seikajin a bien fait de préciser ce que j'avais un peu trop vaguement essayer de définir...

Par contre, je ne vois pas l'intérêt d'aller voir dans les logs du serveur quelque chose qui semble plutôt coincer du côté client... Je ne sais pas quel navigateur tu utilise, mais il existe des outils de développement qui permettent de voir les ressources demandées par le navigateur et surtout de voir celles qui ne sont pas atteintes... (onglet réseau de firebug par exemple)

Une petite remarque(piste?) aussi : dans ton premier post, tu donne un code soit-disant xhtml alors qu'il n'est pas valide (attribut language de ta balise script par exemple). Selon le doctype utilisé et surtout selon le navigateur utilisé, ça pourrait peut-être donner un mauvais résultat...

**sekaijin** · 14/07/2011, 15h26

aller voir côté serveur sert à voir exactement ce que le client demande
s'il y a une erreur de path on voit de suite le chemin que le serveur cherche

de même si le navigateur ne demande pas le fichier il n'apparaît jamais dans les log du serveur
dans ce cas c'est un erreur dans le code html

et ça marche quelque soit le navigateur la plateforme
de plus avec un serveur WAMP il sont directement lisible il suffit d'ouvrir le fichier

avec Chrome safari et tout les navigateur webkit il suffit de faire un clic-droit et ouvrir inspecter l'élément pour voir apparaître les outils.

dans safari le menu outil propose l'entrée activité qui trace l'activité réseau

dans fire fox il faut installer un add-on (fire bug ou équivalent)

dans IE la développer tool bar propose la même chose.

quid des navigateur de portable de tablette en mode texte pour les mal voyants etc. ?

savoir ce qu'on peut trouver dans les log ça aide
A+JYT

**Watilin** · 14/07/2011, 15h43

À tout hasard…

Envoyé par thomas_legrand

Code xhtml :

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

<script language=javascript type="text/javascript" src="fonctions_javascript.js"></script>

Retire l'attribut language, on sait jamais

**andry.aime** · 14/07/2011, 16h34

Envoyé par Watilin

À tout hasard…

Retire l'attribut language, on sait jamais

Sinon il doit mettre la valeur javascript dans des quotes.

A+.

Appeler une fonction js d'un fichier externe (js)

JavaScript

Discussions similaires

Partager

Partager