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

**KibitO** · 10/10/2013, 09h49

Bonjour,

J'ai développé une petite interface en jquery mobile avec cette structure :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>App title</title>
        <link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css">
        <link rel="stylesheet" href="./css/styles.css">
        <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="./js/jquery.ui.map.full.min.js"></script>
        <script type="text/javascript" src="./js/jquery.ui.map.js"></script>
 
 
    </head>
    <body>
 
<!--        Je ne mets pas cette fonction spécialement dans le head car jQuery ne l'interprète pas au premier lancement de la page-->
        <script type="text/javascript">
 
            function loadMap()
            {
 
                // Coordonnées Australie
                var mobileDemo = { 'center': '-26.884067,150.288971', 'zoom': 8 };
 
                $('#map_canvas').gmap(
                {
                    'center': mobileDemo.center,
                    'zoom': mobileDemo.zoom,
                    'disableDefaultUI':false, // affiche les boutons +/- pour le zoom et le choix Plan/Satellite
                    'callback': function()
                    {
                        var self = this;
                        self.addMarker({'position': this.get('map').getCenter() }).click(function()
                        {                                                                                        
                            self.openInfoWindow({ 'content': 'Adresse' }, this);
                        });
                    }
                }); 
 
 
 
 
 
 
            }
 
        </script>
 
 
        <!-- Home -->
        <div data-role="page" id="accueil">
            <div data-theme="c" data-role="header">
                <a href="index.php" data-role="button" data-icon="home" data-iconpos="notext"></a>   
                <div align="center" class="logo">
                    <img src="./images_app/Logo-transparent.png" width="75%" />
                </div>                
            </div>
            <div data-role="content">
 
                <table border="0" bordercolor="#000" width="100%">
                    <tr>
                        <td align="center">
                            <table border="0" bordercolor="#FF0000" width="100%">
                                <tr>
                                    <td align="center" width="30%">
                                        <img src="./images_app/Icone.png" class="imgproduct" />
                                    </td>
                                    <td align="left" width="70%">
                                        <span id="desc1" class="number">000000000</span><br />
                                        <span id="desc2" class="number">Number</span><br />
                                        <span id="desc3" class="number">Desc</span><br />
                                        <span id="desc4" class="number">Long desc</span>
                                    </td>        
                                </tr>
                            </table>                            
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table border="0" bordercolor="#FF0000" width="100%">
                                <tr>
                                    <td>
                                        Identification
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <div data-role="collapsible-set" data-theme="c">
                                            <div data-role="collapsible">
                                                <h3>
                                                    General info
                                                </h3>
                                                blablabla
                                            </div>
                                            <div data-role="collapsible">
                                                <h3>
                                                    3e menu
                                                </h3>   
                                                <ul>
                                                    <li>el1</li>
                                                    <li>el2</li>
                                                    <li>el3</li>
                                                    <li>el4</li>
                                                    <li>el5</li>
                                                    <li>el6</li>
                                                </ul>
 
 
                                            </div>
                                            <div data-role="collapsible">
                                                <h3>
                                                    Custom
                                                </h3>
                                            </div>
                                            <div data-role="collapsible">                                                
                                                <h3 onclick="loadMap()">
                                                    Map
                                                </h3>                                                
                                                <div id="map_canvas"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>               
            </div>
            <div data-theme="c" data-role="footer" class="bienvu"> 
                <span>
                    footer
                </span>
            </div>
        </div>
    </body>
</html>

Le problème c'est que j'aimerais que la map google s'affiche au premier chargement de la page. Là il faut que je charge la page une première fois puis que je la recharge pour que la map s'affiche sinon mon div est vide... J'ai l'impression que jQuery mobile squeeze mon code javascript au premier chargement, que je mette mon code dans le head ou dans le body, ça ne change rien. Alors j'ai tenté de jouer sur le clic du h3 mais ça ne marche pas non plus. Comment faire ?

Merci par avance.

**SpaceFrog** · 10/10/2013, 10h35

http://javascript.developpez.com/faq...oduction#Ready

**KibitO** · 10/10/2013, 14h30

Cela signifie que chaque code javascript personnalisé doit se trouver dans cette fonction ready ?

**SpaceFrog** · 10/10/2013, 14h32

non ...
tu n'as pas du lire la FAQ ...
ready = pret

**KibitO** · 10/10/2013, 15h02

J'ai très bien lu j'ai même modifié mon code en conséquence et ça ne marche toujours pas :

Script inséré dans le head :

Code :

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

1
2
3
4
5
6
$(document).ready( function()
{
    alert('Dom est prêt!');
    //$("#hmap").click(loadMap);
    loadMap();
});

Portion HTML où la map doit être chargée :

Code html :

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

1
2
3
4
<div data-role="collapsible">                                                
    <h3 id="hmap">MAP</h3>                                                
    <div id="map_canvas"></div>
</div>

Il faut que je rafraîchisse la page pour que ça fonctionne.

**SpaceFrog** · 10/10/2013, 15h10

ha en mobile ...
j'avais raté ce point de détail ...

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager