Discussion :

[sylflo]

Bonjour,

Je suis en train d'effectuer un site en one page. Le problème est que j'utilise différent plugin jquery, je souhaite donc charger les différents fichiers js quand je suis sur la section concernée à ce que l'utilisateur veut afficher.

Pour charger dynamiquement mes fichiers j'ai effectué la méthode suivante:
http://bootply.com/84076#.

Les fichiers js se chargent, mais ils fonctionne très mal et je ne comprend pas pourquoi.

Lorsque je teste le site en chargeant au préalable tous les fichier js, cela fonctionne parfaitement. Mais lorsque j'essaye de les charger dynamiquement cela bug, les plugins ne deviennent qu'en partie fonctionnelle.

Voilà le code

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
61
62
63
 
$(document).ready(function() {
    main_carousel();
    go_to_page();
});
 
 
function main_carousel()
{
 
    $('#main_carousel').carousel({
        interval: false
    });
 
 
    // when the carousel slides, load the ajax content
    $('#main_carousel').on('slid', function(e) {
 
        // get index of currently active item
        var idx = $('#main_carousel .item.active').index();
        var url = $('.item.active').data('url');
 
 
        // ajax load from data-url
        $('#main_carousel').carousel(idx);
 
        $('.item').load(url, function() {
 
            load_javascript(idx);
 
 
        });
 
    });
 
// load first slide
    $('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'), function(result) {
        $('#main_carousel').carousel(0);
    });
 
}
 
function load_javascript(index)
{
 
     if (index === 1)
    {
        $('head').append('<link rel="stylesheet" type="text/css" href="http://localhost/one_page/css/team.css"/>');
        $('head').append('<link rel="stylesheet" type="text/css" link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Happy+Monkey">');
 
/*C'est ici que je charge mes fichiers js correspondant à la section que je souhaite afficher*/
        $.getScript("js/jquery.cycle2.min.js");
        $.getScript("js/jquery.cycle2.tile.min.js");
        //$.getScript("js/jquery.cycle2.caption2.min.js");
         go_to_person();
 
 
 
    }
 
 
}

Je vous remercie d'avance de votre aide.

[lemirandais]

Voici quelques pistes à suivre pour peut-être t'aider:

Vérifie bien l'ordre de chargement de tes fichiers js (avec webdeveloppeur par exemple). En effet, certains plugins jquery doivent être chargé d'un l'ordre, en gros, charger la librairy jquery, puis le premier plugin, puis le second. De plus si les plugins sont entrelié, il faudra faire attention, car si pas exemple ton plugin 2 necessite une fonctionnalité du plugin 5, tu as un soucis.

As tu testé avec firebug ou autre pour voir s'il te retournait une erreur ou warning?

Je dois avoué que je n'ai jamais le chargement dynamique de fichier js.

Idée à la con, pourquoi ne pas mettre tous les plugins dans un seul fichier afin de charger tout correctement en une seul fois, un peu comme sur le site http://alex-d.fr/ (regarde le code source).

N'hésite pas à revenir pour répondre à mes quelques questions.
lemirandais