Discussion :

[Kaamo]

Précise sur quel div tu travailles. Sinon toutes les div initialisées exécuteront le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[KibitO]

Ok merci. J'essaie.

[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.

[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.

[Kaamo]

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

[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 :/

[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.

[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..

[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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Kaamo]

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 :

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.

[KibitO]

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 :

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
$(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'}
                                           }
                            });
 
                                               }
                           }
                   }
        });
     });
});

[Kaamo]

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

c'est ce que je dis depuis le début !!

[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.

[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

[KibitO]

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

Merci pour ton aide en tout cas !

[KibitO]

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 :

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
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("");
 
        }
 
 
//        });
//});