Javascript perso non interprété au premier lancement d'une page

Version imprimable

Voir 40 message(s) de cette discussion en une page

11/10/2013, 14h42
Kaamo
Précise sur quel div tu travailles. Sinon toutes les div initialisées exécuteront le code.
Code:

1 2 3 $(document).on('pageinit', '#accueil', function(){ // le code });
Je ne vois pas de problème dans ce que tu montres. JSFiddle

Check ta console web, vérifie les paramètres gmaps, met tout en commentaire et n'exécute qu'un simple alert. Bref, debug quoi ;)
11/10/2013, 14h51
KibitO

Ok merci. J'essaie.
12/10/2013, 12h26
KibitO

ça ne marche toujours pas alors j'essaie de débugger le reste ça ne devrait pas prendre trop de temps il n'y a pas beaucoup de code.
14/10/2013, 13h54
KibitO

Franchement, rien n'y faisait. Du coup, j'ai répercuté le code dans le head de chaque page et ça a l'air de fonctionner. C'est vraiment pas une bonne méthode.
14/10/2013, 15h08
Kaamo

Citation:

dans le head de chaque page

Il faut que le code soit dans le head du html qui contient les divs en question. JE vois pas où est le problème en fait
14/10/2013, 15h13
KibitO

En fait, si je mets le code dans le head seulement, ça ne marche pas. Si le mets en bas de page seulement, ça ne marche pas non plus par contre si je le mets à ces deux endroits et ce sur toutes les pages de l'appli même celles qui ne s'en servent pas, ça fonctionne... c'est super crade :/
14/10/2013, 15h18
Kaamo

Oula .... comportement ds plus étranges.

Normalement,
- Soit tu le mets en bas, et donc pas la peine de le mettre dans le document ready.
- Soit tu les mets en haut dans le head, et de le document ready.

Vu le JSFiddle que je t'ai montré plus haut, ça fonctionne bien en ne le mettant qu'à un seul endroit du moment que les contraintes liées au chargement du document et de la page sont bien respectées.
14/10/2013, 15h23
KibitO

Oui très étrange en effet... Parce que si je dois inclure un .js qui contient mes javascript perso sur toutes les pages même celles qui n'en ont pas besoin, je ne suis pas sorti de l'auberge.

Je vais voir ce que dit jQueryMobile à ce sujet..
14/10/2013, 16h19
KibitO
Bon, maintenant j'ai la map qui se charge bien la première fois mais pas les suivantes !! Ca me rend fou.

Je lis une chose intéressante dans la doc :
Citation:
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

Code:

1 2 3 <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
http://jquerymobile.com/demos/1.2.0/...balconfig.html
14/10/2013, 16h53
Kaamo

Citation:

Bon, maintenant j'ai la map qui se charge bien la première fois mais pas les suivantes !! Ca me rend fou.

Sur quel événement as tu chargé la map ?

Comme j'ai mis plus haut :

Citation:

pagebeforeshow si tu veux que le code JS s'exécute à chaque fois que tu appelles la div.
pageinit si tu veux que le code JS s'exécute une seule fois, au chargement de la div.

Donc si tu as pageinit au lieu de pagebeforeshow, le comportement est normal. Si tu veux que cela charge à chaque fois que tu affiche la div, alors utilise pagebeforeshow.

1 pièce(s) jointe(s)

J'appelle la fonction sur l'évènement pageinit. Je vais essayer avec pagebeforeshow.

Voici le code JS du fichier appelé dans le head :

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
$(document).ready(function()
{ /* code */
    $(document).on('pageinit',function(event)
    {
        $('#map_canvas').gmap3(
        {
            map:{
                    options:{
                     center:[-26.878287,150.294144],
                     zoom:8
                    }
                },
            marker:{
                    latLng:[-26.878287,150.294144],
                    events:{
                        click: function(marker){
                            $(this).gmap3(
                            {
                                infowindow:{
                                    anchor: marker,
                                    options: {content: 'Kogan condamine Road Nangram QLD 4416 Australia, 243m'}
                                           }
                            });
 
                                               }
                           }
                   }
        });
     });
});

15/10/2013, 09h29
Kaamo

Citation:

J'appelle la fonction sur l'évènement pageinit. Je vais essayer avec pagebeforeshow.

:cry: c'est ce que je dis depuis le début !!
15/10/2013, 10h44
KibitO

Ca ne marche pas non plus. La seule solution est de copier/coller les appels aux fichiers .js dans tous les head de toutes les pages ! Adhérant !! Ça ne donne plus envie de faire du jQueryMobile.
15/10/2013, 11h00
Kaamo

Dans les head des pages qui en ont besoin quoi, non ?? Je comprends pas ton problème ... Check leur doc, elle est très complète. Il y a plein d'astuce et des boilerplate pour créer des pages rapidement et simplement. Et surtout, sans prise de tête :ccool:
15/10/2013, 11h03
KibitO

Non c'est ça le pire, même les pages qui n'en ont pas besoin.

Merci pour ton aide en tout cas !

J'ai enlevé la gestion des évènements ready et pagebeforeshow et ça marche... J'ai laissé l'appel au javascript sur toutes les pages.

Mon fichier 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
alert("avant");
//$(document).ready(function()
//{ /* code */
//    
//    
//    
//    $(document).on('pagebeforeshow', '#accueil', function(event)
//    {
        alert("après");
 
 
 
        function addQty(qte)
        {
            var qtemin = 25;        
            var qtepick = $('#txtQtePick').val();
            if (qtepick != "")
                qtepick = parseInt(qtepick);
            qtepick += qte;
            if (qtepick < 0)
                qtepick = 0;
            else if (qtepick > qtemin)
                qtepick = qtemin;
 
            $('#txtQtePick').val(qtepick);
        }
 
        function updateQty()
        {
            var qtepick = $('#txtQtePick').val();
            if (qtepick != "")
            {
                qtepick = parseInt(qtepick);
                if (qtepick < 0)
                    alert("Quantity must be upper than 0.");
                else
                {
                    var qtestock = parseInt($('#txtQteStock').text());
                    var qtediff = qtestock - qtepick;
                    if (qtediff < 0)
                        qtediff = 0;
                    $('#txtQteStock').text(qtediff);
                    $('#txtQtePick').val(0);
                }
            }
            else
                alert("Please enter a quantity.")
        }
 
        function resetQty()
        {
            $('#txtQtePick').val(0);
            $('#workerId').val("");
 
        }
 
 
//        });
//});

Voir 40 message(s) de cette discussion en une page