Inclure fichier js dans un autre fichier js

**hannibal974** · 23/05/2014, 17h28

Bonjour, voil� je suis d�butant en js et j'ai besoin de votre aider.
Je poss�de un fichier select.js dans lequel je souhaiterais utiliser une fonction d�finis dans un autre fichier appel� Post.js.
J'ai essay� plusieurs m�thodes que j'ai trouv� sur le net mais je ne comprends pas pk je n'y arrives pas.
Dans mon fichier Select.js je voudrais pouvoir utiliser la fonction EnvoiePost de mon fichier Post.js.
Comment pourrais-je faire cela ?

**Bovino** · 23/05/2014, 17h52

Bah... il suffit d'inclure les deux fichiers dans la page qui en a besoin.

O� est le probl�me ?

**hannibal974** · 23/05/2014, 18h03

En faite j'appel mon js sur un onclick. Du coup je voudrais appeler la fonction Envoiepost dans plusieurs fichiers du coup je l'ai mis dans un fichier � part.
Mon souci est de r�alis� un include comme on le fait en php mais en js

**Bovino** · 23/05/2014, 18h17

Ca n'existe pas. La solution "bancale" est d'ajouter une balise script dans ta page, mais encore une fois, pourquoi ne pas inclure le fichier directement � la cr�ation de la page ?

**hannibal974** · 23/05/2014, 18h22

Je voudrais bien mais je ne vois pas comment faire.
J'ai un <td> dans le j'appelle ma fonction SelectPlage(a) sur le onclick.
A l'int�rieur de cette fonction js, j'utilise une fonction EnvoiePost (x,y,z) qui va me renvoy� sur une autre page en envoyant des donn�es en post sans cr�er de formulaire.
Peux-tu m'expliquer comment utiliser la fonction EnvoiePost dans SelectPlage parce que je ne vois vraiment pas comment r�aliser cela.

**Bovino** · 23/05/2014, 18h28

Mais une fonction JavaScript est accessible depuis n'importe o� dans la page...

Les fonctions n'ont pas besoin d'�tre dans le m�me fichier pour pouvoir �tre appel�es.
Sinon, comment pourrait-on utiliser des librairies type jQuery ?

**iakou** · 23/05/2014, 18h28

Bonsoir.

- Vous devez cr�er un dossier "jvs" qui contiendra les routines javascript qui sont appel�es par plusieurs pages.
- puis dans les pages appelantes mettre dans le <head> :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Vous pourrez ainsi faire appel � votre fontion "Envoiepost()"

Si vous utilisez un frameset il y a aussi une autre possibilit�, mais cela est une autre histoire...

**hannibal974** · 23/05/2014, 18h35

J'ai l'impression que l'on ne se comprend pas tr�s bien ou alors c'est juste moi qui ne comprends pas et c'est bien possible.
Je r�explique mon probl�me en mettant mon code �a sera surement mieux.
Voil� le tableau que je poss�de dans ma page (j'utilise Symfony2) avec l'appel � mon fichier SelectPlage.js :

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
<table class="cal_calendrier">
    <tr>
        <th class="cal_calendrier_th">L</th>
        <th class="cal_calendrier_th">M</th>
        <th class="cal_calendrier_th">M</th>
        <th class="cal_calendrier_th">J</th>
        <th class="cal_calendrier_th">V</th>
        <th class="cal_calendrier_th">S</th>
        <th class="cal_calendrier_th">D</th>
    </tr>
    {% for a in 0..5 %}
        <tr>
        {% for b in 0..6 %}
            <td class="cal_calendrier_td">
            {% if tab[a][b] is defined %}
                    <p onclick="SelectPlage('{{tab[a][b]}}', '{{chaine}}', '{{date}}')">{{tab[a][b]}}</p>
            {% endif %}
            </td>
        {% endfor %}
        </tr>
        </br>
    {% endfor %}
</table>

Mon fichier SelectPlage.js est le suivant :

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
function SelectPlage(jour, chelem, date)
{   
    /*var filename = './Post.js';
    document.write("<script type='text/javascript' src='"+filename+"'></script>" );*/
    var zero = "0";
    var lp = date.split('/');
    if(jour.length == 1){
        jour = zero.concat(jour);}
    var date = jour.concat('/');
    date = date.concat(lp[1].concat('/'));
    date = date.concat(lp[2]);
    var tab = new Array();
    tab[0] = chelem;
    tab[1] = date;
    post('./recapitulatif', tab, "post");
}

Je poss�de un autre fichier nomm� Post.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
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.
 
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
 
    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
 
            form.appendChild(hiddenField);
         }
    }
 
    document.body.appendChild(form);
    form.submit();
}

Comme on peux le remarquer je veux utiliser la fonction post dans ma fonction SelectPlage.
En php j'aurai fait un simple include pour pouvoir l'utiliser mais je ne sais pas comment faire en js.
Pouvez-vous m'expliquer ce que je dois faire � mon code pour pouvoir faire cela ?

**Bovino** · 23/05/2014, 18h40

je veux utiliser la fonction post dans ma fonction SelectPlage

Dans ce cas, et comme d�j� dit d�s le premier message, il suffit d'ajouter Post.js dans la page !

**Watilin** · 24/05/2014, 16h27

Je n'interviens pas pour donner une solution : Bovino et Iakou s'en sont charg�s.

Mais j'ai remarqu� quelque chose.

Envoy� par hannibal974

Voil� le tableau que je poss�de dans ma page (j'utilise Symfony2) avec l'appel � mon fichier SelectPlage.js :

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
<table class="cal_calendrier">
    <tr>
        ...
    </tr>
    {% for a in 0..5 %}
        <tr>
        {% for b in 0..6 %}
            <td class="cal_calendrier_td">
            {% if tab[a][b] is defined %}
                    <p onclick="SelectPlage('{{tab[a][b]}}', '{{chaine}}', '{{date}}')">{{tab[a][b]}}</p>
            {% endif %}
            </td>
        {% endfor %}
        </tr>
        </br>
    {% endfor %}
</table>

Symfony c'est du code serveur. Tes variables serveur {{chaine}} et {{date}} sont-elles correctes au moment o� tu les utilises ? Montre-nous un extrait du code HTML g�n�r� s'il-te-pla�t (Ctrl+U dans ton navigateur). �a va peut-�tre r�v�ler un probl�me avec le onclick qu'on n'avait pas encore rep�r�.

Tiens d'ailleurs, petit conseil pour l'ergonomie :

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

p[onclick] { cursor: pointer; }

Autre chose : ce </br> qui est � la fois syntaxiquement incorrect (c'est <br />) et incongru ici : tu n'as pas besoin de faire un saut de ligne entre deux rangs de tableau.

Une remarque � propos de la tentative d'include que tu as mise en commentaire. �a ne peut pas marcher avec document.write : �a va juste vider ta page et tu seras bien emb�t�.

Voici la version non destructrice de ce que tu voulais faire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var $script = document.createElement("script");
$script.src = './Post.js';
document.head.appendChild($script);

(Note : document.head est relativement r�cent, j'aurais pu �crire document.getElementsByTagName("head")[0] mais je ne voulais pas surcharger mon exemple.)

Si tu mets ces trois lignes de code au d�but de ta fonction SelectPlage, voil� ce qui va se passer :

L'ex�cution de SelectPlage est interrompue ;
Le fichier "Post.js" est recherch�, puis �ventuellement t�l�charg� s'il est sur un serveur distant, en tout cas il est charg� en m�moire ;
Quand le chargement du fichier se termine, il est pass� � l'interpr�teur qui va l'interpr�ter de mani�re asynchrone pour permettre � SelectPage de reprendre son ex�cution ;
Par cons�quent, quand l'ex�cution de SelectPage reprend, la fonction post n'est pas encore disponible car le fichier est en cours d'interpr�tation.

Bien entendu, la solution propos�e par Bovino et Iakou est la meilleure, car de loin la plus simple. Cependant, si un jour tu as besoin de charger dynamiquement un script, la solution est de surveiller l'�v�nement load que le script doit lancer quand il est pr�t, c'est-�-dire quand il a �t� charg� et interpr�t� et ex�cut�. Voici un exemple :

Le fichier HTML, nomm� test.html :

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
<script>
 
function test( ){
   var $script = document.createElement("script");
   $script.addEventListener("load", function( ){
      console.log("externe.js a lance son load"); // 3
   });
 
   $script.src = 'externe.js';
   document.head.appendChild($script);
 
   console.log("fin de l'execution de test"); // 1
}
 
</script>
 
<input type=button value=test onclick="test()">

Le fichier JavaScript � charger, nomm� externe.js :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

console.log("externe.js a ete execute"); // 2

Quand tu charges la page HTML et que tu cliques sur le bouton de test, la console affiche ceci :

Code console :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
"fin de l'execution de test"                    test.html:12
"externe.js a ete execute"                      externe.js:1
"externe.js a lance son load"                    test.html:6

Ce qui montre bien dans quel ordre les choses se sont d�roul�es.

Inclure fichier js dans un autre fichier js

JavaScript

Vue hybride

Discussions similaires

Partager

Partager