Appel d'une fonction JS d'un fichier JS externe

Version imprimable

Bonjour,

Je suis entrain de réaliser un site internet en utilisant du JavaScript (avec la librairie JQuery).

En faite, j'ai un fichier html qui me créé un formulaire pour qu'un membre puisse s'inscrire dans lequel j'appelle 2 fichier JavaScript 'commun.js' et 'M_inscription.js'.
1) 'commun.js' répertorie des fonction dont je vais me servir dans plusieurs page JavaScript.
2) 'M_inscription.js' permet de vérifier les champs du formulaire d'inscription.

Appel des deux fichier JavaScript dans mon fichier 'M_inscription.html' :
Code:

1 2 3 <script type="text/javascript" src="Modules/inscription/M_inscription.js"></script> <script type="text/javascript" src="Communs/commun.js"></script>
Code de la page 'M_inscription.js' :
Code:

1 2 3 4 5 6 jQuery(function($) { $('input[name=mail]').keyup(function() { verifier_mail_inscription(); }); });
Code de la page 'commun.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 jQuery(function($) { /* Fonction permettant de vérifier si l'adresse mail est utilisé ou pas. */ function verifier_mail_inscription() { if(mail != '') { if(texte = file('commun::verif_mail()')) { if(texte == 1){ writediv('<span style="color:red">Le mail est pris</span>'); $('#envoyer').attr("disabled", true); } else{ if(!VerifMail_inscription()) $('#pb_mes').empty().append(''); else{ writediv('<span style="color:#1A7917">Le mail est libre</span>'); $('#envoyer').removeAttr("disabled"); } } } } } });
Lorsque je regarde sur FireBug, j'obtiens le message suivant :

Citation:

verifier_mail_inscription is not defined
verifier_mail_inscription();

Quelqu'un a-t'il une idée de quelle manière je puisse résoudre mon problème ?

Merci d'avance pour votre aide.

P.S. : La librairie JQuery est appelé auparavant.

Cordialement.

24/09/2011, 02h39
MrPringle

Inclus le script "Communs/commun.js" avant l'autre tout simplement. :)
24/09/2011, 03h03
loic20h28

Bonjour,

Même si j'inclue 'commun.js' avant 'M_inscription.js' j'obtiens le même message d'erreur.
Quelqu'un as-t'il une idée ?

Cordialement.

Je n'avais pas fait attention, c'est dans une closure, fais comme cela plutôt:

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
 
var verifier_mail_inscription;
 
jQuery(function($) {
	/* Fonction permettant de vérifier si l'adresse mail est utilisé ou pas. */
	verifier_mail_inscription = function ()
	{
		if(mail != '')
		{
			if(texte = file('commun::verif_mail()'))
			{
				if(texte == 1){
					writediv('<span style="color:red">Le mail est pris</span>');
 
					$('#envoyer').attr("disabled", true);
				}
				else{
					if(!VerifMail_inscription())
						$('#pb_mes').empty().append('');
					else{
						writediv('<span style="color:#1A7917">Le mail est libre</span>');
						$('#envoyer').removeAttr("disabled"); 
					}
				}   
			}
		}
	};
});

24/09/2011, 09h58
SpaceFrog

mets des alerts ou console.log en debut de chaque $ ready
à mon avis y'a un souci de path ?

Bonjour tout le monde,

Merci pour vos réponse.

J'ai modifié mon JavaScript comme tu me l'a conseillé MrPringle et ça fonctionne, je vais bien dans ma fonction.
Ci-dessous le code de 'commun.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
 
var verifier_mail_inscription, file;
 
jQuery(function($) {	
	/* Fonction permet de lire un fichier */
	file = function (fichier)
	{
		 if(window.XMLHttpRequest) // FIREFOX
			  xhr_object = new XMLHttpRequest();
		 else if(window.ActiveXObject) // IE
			  xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		 else
			  return(false);
		 xhr_object.open("GET", fichier, false);
		 xhr_object.send(null);
		 if(xhr_object.readyState == 4) return(xhr_object.responseText);
		 else return(false);
	}
 
	/* Fonction permettant de vérifier si l'adresse mail est utilisé ou pas. */
	verifier_mail_inscription = function (mail)
	{
		if(mail != '')
		{
			if(texte = file('Communs/commun.php'))
			{
				if(texte == 1){
					writediv('<span style="color:red">Le mail est pris</span>');
 
					$('#envoyer').attr("disabled", true);
				}
				else{
					if(!VerifMail_inscription())
						$('#pb_mes').empty().append('');
					else{
						writediv('<span style="color:#1A7917">Le mail est libre</span>');
						$('#envoyer').removeAttr("disabled"); 
					}
				}   
			}
		}
	}
});

Comme vous pouvez voir, je fais appel à la fonction file avec un fichier 'commun.php'. Ci-dessous la composition de ce dernier :

Code:

1
2
3
4
5
6
7
8
9
 
<?php   
        class commun{
                public static function verif_mail() {
                        echo "a";
                }
        
        }
?>

Mais le "echo" ne se fait pas.

Comment puis-je faire pour appeler la fonction 'verif_mail()' soit dans l'appel de la fonction 'file()' soit d'une autre manière ?

Cordialement.

24/09/2011, 15h33
SpaceFrog

heu quand tu fais l'echo tu es encore sur le serveur ...
et quand javascript est interprété tu n'es plus sur le serveur ...
24/09/2011, 18h52
loic20h28

Donc d'après toi, c'est impossible d'appeler une fonction PHP via une page JavaScript ?
Le "echo" c'est juste pour tester car avec FireBug je peux regarder ce que me retourne 'commun.php'.

Cordialement.
24/09/2011, 19h44
SpaceFrog

Avec ajax oui ...

as tu testé ton retour d'ajax ?
avec un alert ou un console log
24/09/2011, 20h03
loic20h28

Désolé mais je voit pas ou tu veux que je mette un console log ou alert ?
24/09/2011, 23h40
MrPringle

Quite à utiliser jQuery, tu devrais utiliser les fonctions Ajax de la librairie, dans ton cas ce serait jQuery.get.

Utilise alert / console.log dans ta fonction callback qui reçoit la réponse du serveur.

Bonjour,

J'ai décidé de refaire le code permettant de vérifier si l'adresse email que l'utilisateur est entrain de saisir existe déjà en utilisant la fonction jQuery '$.GET' comme MrPringle me l'a conseillé.

Ci-dessous, le code de la fonction 'verif_email' de la page 'commun.js' :
Code:

1 2 3 4 5 6 7 8 var verif_email; jQuery(function($) { verif_email = function(mail) { $.get('Communs/commun.php',{ function: "verif_mail"}); } });
Ci-dessous, le code de la page 'commun.php' :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php function verif_mail($email) { $sql = "SELECT U_mail FROM utilisateur WHERE U_mail = '".$email."'"; $Tpl->DoQuery($sql); if($Tpl->DbNumRow()) return(false); else return(true); } ?>
Mon problème est le suivant : comment puis-je appeler la fonction 'verif_mail' qui se trouve dans 'commun.php' via ma fonction 'verif_email' de 'commun.js' ?

Merci d'avance pour votre aide qui me sera précieuse.

Dans ton cas, cela donnerait quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var verif_email;
 
jQuery(function($) {
        verif_email = function(mail) {
		$.get(
		'Communs/commun.php',
		{
			"mail": mail,
			"function": "verif_mail"
		}
		);
	}
});

Tu ne passais pas le mail à php et tu déclarais ta fonction mais ne l'appelait pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
        function verif_mail($email) {
                $sql = "SELECT U_mail FROM utilisateur WHERE U_mail = '".$email."'";
                $Tpl->DoQuery($sql);
                if($Tpl->DbNumRow())
                        return(false);
                else 
                        return(true);
        }
 
        if (isset($_GET['mail']) && isset($_GET['function']) && function_exists($_GET['function'])) {
                $fn = $_GET['function'];
                {$fn}($_GET['mail']);
        }
?>

Tu devrais revoir ton code avec un système de routes pour la partie php je pense. Et surtout pense à sécuriser les données reçues avant de les utiliser.

Bonsoir,

J'ai essayé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var verif_email; jQuery(function($) { verif_email = function(mail) { $.get( 'Communs/commun.php', { "mail": mail, "function": "verif_mail" } ); } });
Mais rien ne fonctionné malheureusement, j'ai l'impression que ça ne va pas dans la fonction 'verif_mail' de 'commun.php'.

Ensuite, peux-tu m'expliquer le code suivant s'il te plais car j'ai du mal à voir ce que cela fait :
Code:

1 2 3 4 5 if (isset($_GET['mail']) && isset($_GET['function']) && function_exists($_GET['function'])) { $fn = $_GET['function']; {$fn}($_GET['mail']); }
Qu'entend-tu par ?
Code:

1 2 Tu devrais revoir ton code avec un système de routes pour la partie php je pense. Et surtout pense à sécuriser les données reçues avant de les utiliser.
Merci d'avance.

26/09/2011, 23h06
MrPringle
Ta fonction verif_mail en php doit afficher quelque chose (echo) car Javascript recevra ce qui est affiché en retour de la requête ajax.

Utilise donc plutôt "echo (bool)true;" que "return true;", idem pour false. :)
Code:

1 2 3 4 5 if (isset($_GET['mail']) && isset($_GET['function']) && function_exists($_GET['function'])) { $fn = $_GET['function']; {$fn}($_GET['mail']); }
La ligne 1 vérifie la présence des deux arguments mail et fonction, elle vérifie également que ce dernier est bien une fonction. On ne fait rien si un de ces conditions n'est pas remplie.

Sinon, la ligne 2 affecte le nom de la fonction à une variable. Ici ce serait "verif_mail".

On appelle cette fonction par son nom ligne 3 en lui passant l'email en argument.

Vu ton script, un système de routage (comme dans les frameworks) serait tout à fait adapté je pense.
En gros, ça fonctionne avec l'url rewiting, tout arrive sur ta page index.php et tu analyses l'url pour "router", tu lances la fonction adéquate, exemple :

http://www.monsite.com/verif_mail?em...ly@the_kid.com

va être analysé par ton script qui appellera la fonction "verif_mail" avec l'argument billy@the_kid.com

Généralement c'est plus utilisé dans un contexte objet mais c'est très facilement adaptable à du code procédural comme ci-dessus.
27/09/2011, 08h36
SpaceFrog

Tu as manifestement un souci de compréhension de l'interprétation de chacun des langages !

Considère php comme une machine à ecrire du code html / js
Php est interprété sur le serveur
Javscript n'est pas interprété sur le serveur et est seulement rédigé par php

Une fois le code html js redigé il est envoyé vers le navigateur du client
coté client c'est html js css qui sont interprétés.
php n'existe plus à ce moment là !!!

Si tu veux faire appel à une fonction php alors que tu es coté client, il te faut retourner sur le serveur soit:
en rechargeant la page (href ou formulaire ou src d'iframe) soit en utilisant une requete XMLhttprequest (ajax).

Tant que tu n'auras pas assimilé cette chronologie et cette séparation d'interprétation entre le coté serveur et le coté client tu n'arriveras pas à tes fins ...

Bonsoir,

Tout d'abord merci pour vos réponse et vos explications qui m'aide énormément à avancer.

Réponse à MrPringle :
Après avoir mieux compris a quoi servait la boucle 'if' la, je l'ai rajouté et ça rentre bien dans ma fonction 'verif_mail' de la page 'commun.php', la voici ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function verif_mail($email) { Global $Tpl; $sql = "SELECT U_mail FROM utilisateur WHERE U_mail = '".$email."'"; $Tpl->DoQuery($sql); if($Tpl->DbNumRows()) return(false); else return(true); } if (isset($_GET['mail']) && isset($_GET['function']) && function_exists($_GET['function'])) { $fn = $_GET['function']; $fn($_GET['mail']); }
Par contre, comment puis-je récupérer ce que me retourne la fonction php dans mon code javascript enfin si c'est possible ?
Ci-dessous le code de la fonction 'verif_email' de la page 'commun.js' :
Code:

1 2 3 4 5 6 7 8 9 10 11 verif_email = function(mail) { // $.get('Communs/commun.php',{"mail": mail,"function": "verif_mail"}); $.get('Index.php', {"action": "verif_email", "mail": mail,"function": "verif_mail"}, function() { } ); }
Réponse à SpaceFrog : Merci beaucoup pour ton explication. Je pense avoir mieux compris le fonctionnement du côté client et du côté serveur. J'ai décidé d'utiliser $.GET de JQuery.

Cordialement.

27/09/2011, 23h13
MrPringle

J'avais mis deux morceaux de code pour les deux pages, essaie avec ça, si tu changes de page, d'arguments passés... à chaque post ça va être compliqué.

Là dans ton dernier code, tu appelles la page "index.php" (donc on change de nom de page) avec deux arguments (action et function) ayant la même valeur donc je dirai qu'il y en a un qui sert à rien. Et tu ne mets rien dans la fonction callback donc tu peux attendre longtemps que ton script fasse quoi que ce soit.

J'ai changé de page et d'argument car j'ai décidé de suivre ton conseil et d'utiliser un système de routage :

Citation:

Vu ton script, un système de routage (comme dans les frameworks) serait tout à fait adapté je pense.
En gros, ça fonctionne avec l'url rewiting, tout arrive sur ta page index.php et tu analyses l'url pour "router", tu lances la fonction adéquate, exemple :

http://www.monsite.com/verif_mail?em...ly@the_kid.com

va être analysé par ton script qui appellera la fonction "verif_mail" avec l'argument billy@the_kid.com

Généralement c'est plus utilisé dans un contexte objet mais c'est très facilement adaptable à du code procédural comme ci-dessus.

Pour cela, j'utilise l'appel de la page "Index.php" dont voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php // Récupération de l'option choix de l'url par la méthode GET si elle existe. // Si aucune option alors on vérifie si le cookie existe. if(isset($_GET["action"])) { switch ($_GET["action"]) { case "inscription": include('Modules/inscription/M_inscription.php'); break; case "verif_email": include_once('Communs/commun.php'); break; // Page par défaut. default: echo "Bienvenue parmis nous!!"; break; } } else { echo "Bienvenue parmis nous!"; } ?>
Après comme tu l'a constaté je fais aussi appel au paramètre 'function=verif_mail' pour pouvoir appeler la fonction dans ma page 'commun.php'.

Ce que je veux faire dans la fonction callback c'est que si la fonction php ('verif_mail' de 'commun.php') me retourne false alors je voudrais afficher à un endroit précis un message du style "L'adresse mail est indisponible" par contre si la fonction php me retourne true je voudrais afficher un message du style "L'adresse mail est libre".
Pour afficher je sais faire via JQuery mais mon problème c'est pour récupérer ce que la fonction php me retourne (true ou false). As-tu une idée s'il te plait ?

Merci d'avance.

28/09/2011, 13h15
MrPringle

C'est mieux comme ça en effet. Dans ce cas utilise l'argument action dans ton include, s'ils sont identiques le second ne sert plus vraiment.

Tout fonctionne maintenant ?

J'ai juste modifier mon code de 'index.php' pour soit prendre le paramètre 'fonction' ou 'action'.
Ci-dessous la modification :

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
 
<?php
        // Récupération de l'option choix de l'url par la méthode GET si elle existe.
        // Si aucune option alors on vérifie si le cookie existe.
        if(isset($_GET["action"])) {
                switch ($_GET["action"])
                {       
                        case "inscription":
                                include('Modules/inscription/M_inscription.php');
                                break;
                        
                        // Page par défaut.
                        default:
                                echo "Bienvenue parmis nous!!";
                                break;
                }
        } else if(isset($_GET["function"])) {
                switch ($_GET["function"])
                {                               
                        case "verif_mail":
                                include_once('Communs/commun.php');
                                break;
                
                        // Page par défaut.
                        default:
                                echo "Bienvenue parmis nous!!";
                                break;
                }
        } else {
                echo "Bienvenue parmis nous!";
        }
?>

et donc modifié ma fonction JavaScript pour juste appeler 2 paramètre :

Code:

1
2
3
4
5
6
7
8
9
10
 
verif_email = function(mail) 
	{
		$.get('Index.php',
				{"function": "verif_mail", "mail": mail}, 
				function() {
					console.log("a");
				}
			  );
	}

Donc mon code fonctionne correctement c'est à dire que je rentre bien dans la fonction 'verif_mail' de ma page 'Commun.php' et j'obtiens à chaque fois un "a".
Par contre je rencontre le problème suivant qui est que je ne voit pas comment faire pour récupérer ce que me retourne la fonction 'verif_mail' de ma page 'Commun.php' dans ma fonction 'verif_mail' de ma page 'Commun.js' pour pouvoir afficher ce que je veux dans le cas ou j'obtiens true ou false.
Quelqu'un aurait-il une idée s'il vous plait ?

Cordialement.

En fait la réponse que tu reçois en JS n'est autre que le code affiché par la page php, essaie comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
verif_email = function(mail) 
	{
		$.get('Index.php',
				{"function": "verif_mail", "mail": mail}, 
				function (response) {
					if (response === "true") {
						// email correct
					} else {
						// email incorrect
					}
				}
			  );
	}

Merci pour ta réponse, elle m'a permis de résoudre mon problème.
Voici le code de la page 'commun.php' :

Code:

1
2
3
4
5
6
7
8
9
10
 
function verif_mail($email) {
		Global $Tpl;
		$sql = "SELECT U_mail FROM utilisateur WHERE U_mail = '".$email."'";
		$Tpl->DoQuery($sql);
		if($Tpl->DbNumRows())
			echo "true";
		else 
			echo "false";
	}

Voici le code de la page 'commun.js' :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
verif_email = function(mail) 
	{
		// $.get('Communs/commun.php',{"mail": mail,"function": "verif_mail"});
		$.get('Index.php',
				{"function": "verif_mail", "mail": mail}, 
				function(response) {
					if (response.substring(0,4) == "true") {
						$('span[name=mes_email]').html('mail utilisé');
					} else {
						$('span[name=mes_email]').html('mail libre');
					}
				}
			  );
	}

Cela fonctionne parfaitement.
Je te remercie vraiment beaucoup pour ton aide ainsi qu'à SpaceFrog qui m'a aidé aussi à comprendre le fonctionnement.

Cordialement.