Affichage d'un timer sur 2 pages différentes

Bonjour à tous,
Je vous explique, je suis en train de mettre en place un timer grâce au javascript Flipclock avec la possibilité de le paramétrer/contrôler sur une page admin ici tournoiAdmin.html et je souhaite ensuite l'afficher sur la page tournoi.html. Cependant même avec une fonction load, le timer n'est pas bien chargé sur la page tournoi et n'est pas dynamique...

Voici la page tournoiAdmin :

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
 <div name="minuteur" id="minuteur" class="w3-display-bottomright w3-quarter w3-center w3-container w3-content w3-blue" style="height: 500px;margin-right: 80px; padding-bottom:80px;">
        <h1 class="w3-border" style="margin-bottom: 50px"> TIMER </h1>
        <div class="clock" id="clock" style="margin:2em;"></div>
        <p> Entrez un timer en minutes : </p>
        <input class="timer" type="number" id="timer" min="1" max="99" step="1"/></br></br>
        <button class="start w3-green w3-btn"> Start </button>
        <button class="stop w3-red w3-btn"> Stop </button></br></br>
        <button class="reset w3-amber w3-btn"> Set/Reset </button></br>
    </div> 
<script type="text/javascript" id="script1">
    var clock;
    var clock2;
    $(document).ready(function() {
        clock = $('.clock').FlipClock(60, {
            clockFace: 'MinuteCounter',
            countdown: true,
            autoStart: false,
            language:"french",
            callbacks: {
                start: function() {
                    $('.message').html('The clock has started!');
                },
                stop: function() {
                    $('.message').html('The clock has stopped!');
                },
                reset: function() {
                    $('.message').html('The clock has been set!');
                }
            }
        });
        $('.start').click(function(e) {
            clock.start();
        });
        $('.stop').click(function(e) {
            clock.stop();
        });
        $('.reset').click(function(e) {
            clock.stop();
            clock.reset();
            clock.setTime(document.getElementById("timer").value*60);
        });
    });
</script>

Et ici la page tournoi :

Code:

1
2
3
4
5
6
<div class="w3-display-middle w3-content w3-container w3-white">
<div class="clock" id="clock2">
</div>
</div> <script>
    $('#clock2').load( "tournoiadmin" );
</script>

Est ce que quelqu'un aurait une idée pour résoudre mon problème ? Merci de vos réponses !

Quel FlipClock utilise tu parmi les 110 possibles ?
Sans référence à la librairie JS que tu utilise ça va pas être possible de te répondre

https://github.com/search?utf8=%E2%9...lipClock&type=

Wow j'avais pas vu qu'il y en avais autant. Désolé de pas avoir été plus précis.
J'utilise la librairie FlipClock obtenue sur le site officiel : http://flipclockjs.com/
C'est celle de base il me semble. J'ai repris le code d'un des exemples dans le package et je l'ai adapté à mon utilisation.
Voici les sources pour le javascript du coup :
Code:

1 2 3 4 <link rel="stylesheet" href="compiled/flipclock.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="compiled/flipclock.js"></script>

Déja, le

Citation:

$('#clock2').load( "tournoiadmin" );

ne fait que charger ta page (pourquoi n'a t'elle pas de type ?) et se fiche complètement du code JavaScript qui est dedans, parce que la fonction Load n'est que une fonction Load