Lancer une fonction dans une tab bootstrap

Bonjour,

Je souhaite lancer une fonction pour initialiser une map : $('#map_canvas').mapit(); quand je suis dans une des Togglable tabs de bootstrap. http://getbootstrap.com/javascript/#tabs

Voici mon code html :

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
<section class="section padding0 padding-low">
	<div class="container">
		<div class=" col-md-10">
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
			  Launch demo modal
			</button>
 
			<div class="modal fade" id="myModal" data-lat="23, 18.33" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
				<div class="modal-content">
				  <div class="modal-body">
 
 
					<ul class="nav nav-pills">
						<li class="active"> <a href="#tab1" data-toggle="tab">théme</a></li>
						<li><a data-toggle="tab" href="#tab2">Activité</a></li>
						<li><a data-toggle="tab" href="#tab3">Informations</a></li>
					</ul>
					<div class="tab-content">
						<div id="tab1" class="tab-pane fade in active">
							gffghgf
						</div><!--END #tab1-->
						<div id="tab2" class="tab-pane fade">
							ghfgh
						</div><!--END #tab2-->
						<div id="tab3" class="tab-pane fade">
							<div id="wrapper">
								<div id="nav_wrapper">
									<nav2>
										<ul class="vertical">
											<li><strong>Points of interest</strong></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('show', '1')">Cinemas</a></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('show', '2')">Museums</a></li>
											<li><strong>Routes</strong></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('route', '0')">Airport to The Hotel</a></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('route', '1')">The Hotel to Center</a></li>
											<li><strong>Controls</strong></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('hide_all')">Hide all markers</a></li>
											<li><a onclick="javascript:$('#map_canvas').trigger('reset')">Reset Map</a></li>
										</ul>
									</nav2>
								</div><!--END nav_wrapper-->
								<div id="map_canvas"></div>
							</div><!--END wrapper-->
						</div><!--END #tab3-->
					</div><!--END tab-content-->
 
 
				  </div><!--END modal-body-->
				</div><!--END modal-content-->
			  </div><!--END modal-dialog-->
			</div><!--END modal-->     
		</div><!-- col-md-10 -->
	</div><!-- end container -->
</section>

Donc lorsque je suis à #tab3, je souhaite exécuter $('#map_canvas').mapit();.

Voici ce que j'ai fait :

Code:

1
2
3
4
5
$(document).ready(function() {
     $("#tab3").on("shown.bs.tab", function () {
         $('#map_canvas').mapit();
    });
})

Mais cela ne fonctionne pas.

Merci par avance.

Edit :

J'ai réussi à trouver cette solution qui fonctionne :

Code:

1
2
3
4
5
$(document).ready(function() {
     $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        $('#map_canvas').mapit();
     });
})

Mais cela exécute la fonction à chaque tab.