Fonction perdue après isolation du Javascript dans un fichier

**CinePhil** · 16/10/2011, 10h50

Bonjour,

Je reprends du code dans lequel le PHP, le HTML, le CSS et le Javascript sont mélangés.
Par exemple, extraits de index2.php :

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
<?php
session_start();
 
include("connexion_bdd.php");
include("compteur_connexions.php");
/* du code PHP */
 
// Fonction pour supprimer les accents :
function wd_remove_accents($str, $charset='utf-8')
{
    /* du code PHP */
}
 
/* du code PHP */
 
function redimage($img_src,$dst_w,$dst_h) 
{
    /* du code PHP */
}
 
/* du code PHP */
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?=$le_titre;?></title>
	<meta name="description" content="<?=$la_description;?>"/>
	<meta name="keywords" content="<?=$les_keywords;?>"/>
	<meta http-equiv="Content-Language" content="<?=$la_langue?>" />
	<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
	<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
  <!-- autres fichiers Javascript inclus -->
	<script type="text/javascript" >
		 function afficheMessage(contenuHTML){
                        /* du code Javascript */
                }
 
                /* autres fonctions Javascript */
 
               function afficherPopupLangues(){
			var posX = 20;
			var posY = 40; 
			$("#popLangues").show().css({ 'z-index': '10', 'right':posX+'px', 'top':posY+'px'});
		}
 
                /* autres fonctions Javascript */
 
	</script>
</head>
<body style="background:#FFFFFF; margin:0px; padding:0px; font-family:Arial, Verdana, Helvetica; color:white;">
	<div id="barre_top" style="height:36px; margin:auto; background-image:url('images/fond_barre_top.png'); background-repeat:repeat-x;">
 
<!-- du code HTML -->
 
<a href="javascript:afficherPopupLangues();" class="menuTOP">
  <?=$trad_language?>
</a>
 
<!-- etc. -->

Dans ce code existant, l'appel à la fonction Javascript afficherPopupLangues() fonctionne.

Voulant organiser un peu mieux le code :
- j'ai transféré le code Javascript dans un fichier ew.js ;
- j'ai isolé l'entête HTML, qui resservira plusieurs fois, dans un fichier entete.phtml ;
- j'ai isolé le début du <body> dans un fichier bandeau_haut.phtml pour les mêmes raisons et l'appel à la fonction afficherPopupLangues() se retrouve ainsi dans bandeau_haut.phtml.

Dans entete.phtml, j'ai bien entendu ajouté cette ligne :

Code :

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

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

En remplacement de index2.php, j'ai un fichier formé ainsi :

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
<?php
 
include_once("includes/inc_session_control.php"); // Contrôle de la session utilisateur
include_once("includes/inc_cookie_control.php"); // Contrôle du cookie
include_once("ewtrad.php");
include_once("includes/inc_common_functions.php");
include("compteur_connexions.php");
 
$msg_type = "";
$msg_a_afficher = "";
 
// Identification du membre à partir du formulaire d'identification
if($_POST["ident"])
{
 
  // du code PHP
 
}
 
// Entête de page HTML
require 'entete.phtml';
?>
<body>
<?php 
require 'bandeau_haut.phtml';
?>
</body>
<?php 
// Bas de page HTML
require 'bas_page.phtml';
?>

Et cette fois, lorsque je clique sur l'option de menu qui appelle la fonction Javascript afficherPopupLangues(), rien ne se passe, si ce n'est cette erreur dans Firebug :

afficherPopupLangues is not defined

Quelqu'un saurait me dire pourquoi ?

**SpaceFrog** · 16/10/2011, 15h20

Je vois deux possibilités:

Soit le path de ta balise script n'est pas bon :

Code :

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

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

est tu sur du chemin d'accès au fichier ?
mets cette ligne au debut de ton fichier de script:

Code :

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

alert('je suis bein là')

et celle ci à la fin

Code :

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

alert('j\'ai été chargé')

Puis visualise ta page a nouveau ...

Soit il y a un souci dans le fichier de script, une erreur de recopie...
Tu as laissé les balises script dans le fichier, si oui il faut les retirer.

**CinePhil** · 16/10/2011, 23h09

Le alert ne s'affiche pas.

J'ai testé le chemin en appelant un bête test.js contenant uniquement le alert et il s'affiche donc le chemin est bon.

Firebug me signale cette erreur :

missing } after property list
[Stopper sur une erreur] cp : '<?php echo $_SESSION['coords']['code_photo'] ?>',
ew.js (ligne 68)

Et voici l'extrait de code correspondant :

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
function maj_photo()
{
	contenuHTML = $.ajax
	(
		{
			url: "ajax/maj_photo.php",
			global: false,
			type: "POST",
			data: ({
						cp : '<?php echo $_SESSION['coords']['code_photo'] ?>', 
						idj : '<?php echo base64_encode($_SESSION['coords']['id']); ?>'
					}),
			dataType: "html",
			async:false,
			success: function(msg)
			{
				 //alert(msg);
			}
		}
	).responseText;

cp n'est pas la dernière propriété de la liste, pourquoi s'arrête t-il sur cette ligne ?

À tout hasard, voici l'extrait de code correspondant et qui fonctionne dans l'ancien fichier index2.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function maj_photo(){
			contenuHTML = $.ajax({
				  url: "ajax/maj_photo.php",
				  global: false,
				  type: "POST",
				  data: ({cp : '<?=$_SESSION['coords']['code_photo']?>', idj : '<?=base64_encode($_SESSION['coords']['id'])?>'}),
				  dataType: "html",
				  async:false,
				  success: function(msg){
					 //alert(msg);
				  }
			   }
			).responseText;

Je ne vois pas de différence fondamentale entre les deux, sinon une indentation différente.

**Eric2a** · 16/10/2011, 23h44

Salut,

Le code JS ne se trouvant plus dans un fichier interprété par PHP, le code brut est renvoyé au navigateur. L'interpreteur Javascript se trouvant bien entendu face à un code incorrect.

Code js :

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

1
2
cp : '<?php echo $_SESSION['coords']['code_photo'] ?>', 
idj : '<?php echo base64_encode($_SESSION['coords']['id']); ?>'

Une solution est de renommer le fichier JS en fichier PHP en prenant soin de modifier le type MIME

Code php :

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

header('Content-Type: text/javascript; charset=utf-8');

Nous pouvons quand même appeler le fichier avec l'extension JS graçe à la réecriture d'URL.

Code Apache :

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

RewriteRule ^ew\.js$ /js/ew.php [L]

**CinePhil** · 16/10/2011, 23h53

OK compris ça marche.
J'avais dû faire la même chose pour le CSS à cause d'une background-image relative à une variable PHP.

Merci

**SpaceFrog** · 17/10/2011, 08h34

Une autre possibilité est de rendre les fichiers js interprétables par php dans la config d'apache ...

**CinePhil** · 17/10/2011, 10h12

Envoyé par SpaceFrog

Une autre possibilité est de rendre les fichiers js interprétables par php dans la config d'apache ...

Sauf que je n'ai pas accès à la configuration d'Apache pour ce projet, ou alors éventuellement via un .htaccess.

Mais je retiens l'information pour plus tard car appeler un fichier CSS ou Javascript en .php, ça me choque un peu et ça supprime la coloration syntaxique dans Eclipse.

**SpaceFrog** · 17/10/2011, 10h13

c'est réalisable avec htaccess...

**CinePhil** · 23/10/2011, 16h21

Ça a fonctionné avec le .js mais le .css est récalcitrant !

Le fichier s'appelle /css/ew.css et contient ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
header('content-type: text/css; charset=utf-8');
?>
#background
{
	float: left; 
	min-height: 720px;
	//background-image: url("../images/bg_centre<?php echo ($bFullPage)?"":"2"); ?>.jpg");
	background-image: url("../images/bg_centre<?php echo 2; ?>.jpg");
	background-repeat:repeat-y;
}

Comme vous pouvez le voir, j'ai essayé de simplifier au maximum la syntaxe de la partie PHP pour voir si le problème ne venait pas de là.

Dans .htaccess, j'ai mis ceci :

Code :

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

RewriteRule ^ew\.css$ /css/ew.php [L]

Mais dans Firebug, quand je regarde le CSS "Live", mon code PHP est toujours là au lieu d'avoir été interprété et quand je passe la souris dessus, Firebug dit :

Failed to load given URL

Bien entendu, l'image bg_centre2.jpg existe.

EDIT :
Je viens de découvrir qu'en fait, le PHP n'est pas non plus interprété dans le Javascript avec la méthode "vraie extension de fichier + .htaccess".

**SpaceFrog** · 24/10/2011, 08h25

heu pas un rewrite rule, ça ne sert à rien dans ce cas de figure...

Code :

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

1
2
3
4
5
6
<Files *.css>
    php_value  default_mimetype "text/css"
</Files>
<Files *.js>
    php_value  default_mimetype "application/x-javascript"
</Files>

**CinePhil** · 24/10/2011, 08h46

Envoyé par SpaceFrog

heu pas un rewrite rule, ça ne sert à rien dans ce cas de figure...

Code :

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

1
2
3
4
5
6
<Files *.css>
    php_value  default_mimetype "text/css"
</Files>
<Files *.js>
    php_value  default_mimetype "application/x-javascript"
</Files>

Je mets ce code dans le .htaccess ?

**SpaceFrog** · 24/10/2011, 09h01

Tu peux le mettre ou tu veux ...
Mais ça aura beaucoup moins d'effet que dans le htaccess ...

**CinePhil** · 24/10/2011, 09h32

Apparemment, ça coince toujours !
Ne faudrait-il pas mettre le chemin vers les types de fichiers dans les balises Files ?

**SpaceFrog** · 24/10/2011, 09h35

et niveau allow override tu as quoi ?

**dukej** · 24/10/2011, 09h52

Tout ce qui est resources JS ou CSS, n'a pas a être généré par le serveur, sauf pour des besoins très très particuliers.

Dans ton cas, générer une fonction JS ou même une simple déclaration de CSS peut être largement évité.

Dans le fichier HTML tu peux justement surcharger le background

Dans la CSS tu déclares le background par défaut :
CSS :

Code :

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

1
2
3
4
 
#background {
    background:repeat-y center center;
}

Dans le HTML

Code :

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

1
2
3
4
5
6
 
<style type="text/css">
#background {
   background-image: url("../images/bg_centre<?php echo 2; ?>.jpg");
}
</style>

Autre chose mais vraiment flagrante et surtout très très moche, c'est de générer du JS en PHP et en plus que ce JS fasse un appel à PHP, le code devient une salade.

Part du principe que le PHP te génère une page HTML, et c'est tout, c'est au JS ensuite de lire les informations nécessaire pour fonctionner et faire ce qu'il y a à faire. Dans ton cas ce qui me choque est ta fonction JS qui est générée à coup de JS

JE remplacerai bien ce code moche :

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
 
 
function maj_photo()
{
	contenuHTML = $.ajax
	(
		{
			url: "ajax/maj_photo.php",
			global: false,
			type: "POST",
			data: ({
						cp : '<?php echo $_SESSION['coords']['code_photo'] ?>', 
						idj : '<?php echo base64_encode($_SESSION['coords']['id']); ?>'
					}),
			dataType: "html",
			async:false,
			success: function(msg)
			{
				 //alert(msg);
			}
		}
	).responseText

Par un code qui appellerai la fonction en question, et la fonction majphoto je lui rajotuerai des parametres.

Donc au final ta fonction serait simplement appelée ainsi :

Code :

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

1
2
 
maj_photo('<?php echo $_SESSION['coords']['code_photo'] ?>', '<?php echo base64_encode($_SESSION['coords']['id']); ?>')

Et le code de ta fonction deviendrait :

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
 
function maj_photo(cp,idj)
{
	contenuHTML = $.ajax
	(
		{
			url: "ajax/maj_photo.php",
			global: false,
			type: "POST",
			data: ({
						cp : cp, 
						idj : idj
					}),
			dataType: "html",
			async:false,
			success: function(msg)
			{
				 //alert(msg);
			}
		}
	).responseText

Autre chose, dans ce code, tu fais un appel ajax en mode synchrone, ce qui a pour effet de bloquer le navigateur tant que le chargement ajax ne s'est pas effectué.

Je te conseille de passer ce code en asynchrone.

Bref, tu as beaucoup de boulot devant toi, bonne change

**CinePhil** · 24/10/2011, 09h52

Envoyé par SpaceFrog

et niveau allow override tu as quoi ?

Dans le .htaccess rien mais dans httpd.conf j'ai ceci :

Code :

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

1
2
<Directory "/var/www/html">
AllowOverride All

Et bien sur, l'appli sur laquelle je travaille est dans un sous répertoire de /var/www/html.

**CinePhil** · 24/10/2011, 10h07

Merci de ta réponse.
Avant tout, je rappelle ceci :

Envoyé par CinéPhil

Je reprends du code dans lequel le PHP, le HTML, le CSS et le Javascript sont mélangés.

Et comme j'ai mis plusieurs soirées tardives comment était organisé le code, je suis en train d'essayer de réorganiser la partie sur laquelle je travaille pour y voir plus clair :
- Tout le CSS dans les fichiers CSS ;
- Tout le Javascript dans les fichiers Javascript.

Envoyé par dukej

Tout ce qui est resources JS ou CSS, n'a pas a être généré par le serveur, sauf pour des besoins très très particuliers.

Dans ton cas, générer une fonction JS ou même une simple déclaration de CSS peut être largement évité.

Dans le fichier HTML tu peux justement surcharger le background

Dans la CSS tu déclares le background par défaut :
CSS :

Code :

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

1
2
3
4
 
#background {
    background:repeat-y center center;
}

Dans le HTML

Code :

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

1
2
3
4
5
6
 
<style type="text/css">
#background {
   background-image: url("../images/bg_centre<?php echo 2; ?>.jpg");
}
</style>

C'est justement cette dernière surcharge que je souhaite éviter car ça revient à remettre du CSS et/ou du Javascript dans le PHP.

Autre chose mais vraiment flagrante et surtout très très moche, c'est de générer du JS en PHP et en plus que ce JS fasse un appel à PHP, le code devient une salade.

Part du principe que le PHP te génère une page HTML, et c'est tout, c'est au JS ensuite de lire les informations nécessaire pour fonctionner et faire ce qu'il y a à faire. Dans ton cas ce qui me choque est ta fonction JS qui est générée à coup de JS

Je suis bien d'accord avec ce principe et, bien que noob en Javascript, j'avais justement trouvé un peu bizarre certaines fonctions Javascript/Ajax.

JE remplacerai bien ce code moche :

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
 
 
function maj_photo()
{
	contenuHTML = $.ajax
	(
		{
			url: "ajax/maj_photo.php",
			global: false,
			type: "POST",
			data: ({
						cp : '<?php echo $_SESSION['coords']['code_photo'] ?>', 
						idj : '<?php echo base64_encode($_SESSION['coords']['id']); ?>'
					}),
			dataType: "html",
			async:false,
			success: function(msg)
			{
				 //alert(msg);
			}
		}
	).responseText

Par un code qui appellerai la fonction en question, et la fonction majphoto je lui rajotuerai des parametres.

Donc au final ta fonction serait simplement appelée ainsi :

Code :

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

1
2
 
maj_photo('<?php echo $_SESSION['coords']['code_photo'] ?>', '<?php echo base64_encode($_SESSION['coords']['id']); ?>')

Et le code de ta fonction deviendrait :

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
 
function maj_photo(cp,idj)
{
	contenuHTML = $.ajax
	(
		{
			url: "ajax/maj_photo.php",
			global: false,
			type: "POST",
			data: ({
						cp : cp, 
						idj : idj
					}),
			dataType: "html",
			async:false,
			success: function(msg)
			{
				 //alert(msg);
			}
		}
	).responseText

Je vais étudier ça de plus prêt mais justement hier soir je me demandais pourquoi le PHP ne passait pas directement les variables à la fonction Javascript. Ça confirme ce que je pensais.

Autre chose, dans ce code, tu fais un appel ajax en mode synchrone, ce qui a pour effet de bloquer le navigateur tant que le chargement ajax ne s'est pas effectué.

Je te conseille de passer ce code en asynchrone.

Je vais regarder ça.

Bref, tu as beaucoup de boulot devant toi, bonne change

Merci.
D'ailleurs à mon avis, celui qui a développé ça a mis plus de Javascript que nécessaire dans ce code ; j'ai l'impression qu'il y a beaucoup plus simple en PHP pour certaines parties.
Je ne suis pas sorti de l'auberge !

**CinePhil** · 25/10/2011, 00h52

La seule méthode qui fonctionne chez moi est le renommage des fichiers .css et .js en .php avec le header.

Par contre, je suis confronté à un autre souci. J'ai transporté un bout de code Javascript qui était au milieu du PHP dans le fichier Jaascript :

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
$(document).ready(function() 
{
	$('#file_upload').uploadify(
	{
		'swf' : 'uploadify/uploadify.swf',
		'uploader' : '../ajax/maj_photo.php',  //'../js/uploadify/uploadify.php',
		'cancelImage' : 'uploadify/uploadify-cancel.png',
		'checkExisting': 'uploadify/uploadify-check-exists.php',
		'postData'	: 
		{
			'cp' : '<?php echo $j_code_photo; ?>', 
			'idj' : '<?php echo base64_encode($profil_id);?>'
		},
		'auto' : true,
		//'buttonImage' : 'images/profil/btn_profile_picture.png',
		'buttonText' : '<?php echo $trad_change_image; ?>',
		'width' : '171',
		'multi' : false,
		'button' : false,
		'fileSizeLimit': 2000000,
		'onUploadComplete' : function(fileObj, data) 
		{
			var nom_image = $('#img_profil').attr('src');
			var cachekiller = Math.floor(Math.random()*1001);
			$('#img_profil').attr("src", nom_image.substring(0,nom_image.indexOf("."))+fileObj.type+"?"+cachekiller);
		}
	});
});

Le problème est que les variables en PHP donnent dans Firebug des chaînes vides :

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
$(document).ready(function()
{
 $('#file_upload').uploadify(
 {
 'swf' : 'uploadify/uploadify.swf',
 'uploader' : '../ajax/maj_photo.php', //'../js/uploadify/uploadify.php',
 'cancelImage' : 'uploadify/uploadify-cancel.png',
 'checkExisting': 'uploadify/uploadify-check-exists.php',
 'postData' :
 {
 'cp' : '', // <== Vient d'une variable PHP
 'idj' : '' // <== Vient d'une variable PHP
 },
 'auto' : true,
 //'buttonImage' : 'images/profil/btn_profile_picture.png',
 'buttonText' : '', // <== Vient d'une variable PHP
 'width' : '171',
 'multi' : false,
 'button' : false,
 'fileSizeLimit': 2000000,
 'onUploadComplete' : function(fileObj, data)
 {
 var nom_image = $('#img_profil').attr('src');
 var cachekiller = Math.floor(Math.random()*1001);
 $('#img_profil').attr("src", nom_image.substring(0,nom_image.indexOf("."))+fileObj.type+"?"+cachekiller);
 }
 });
});

Cela serait-il dû au fait que le script Javascript est appelé dans l'entête de la page, avant l'exécution du code PHP qui donne une valeur aux variables ?

Fonction perdue après isolation du Javascript dans un fichier

JavaScript

Discussions similaires

Partager

Partager