I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map.
Here is the code :

Navbar code :

<ul class=nav nav-tabs>

    <li class=active><a data-toggle=tab href=#home>Données principales</a></li>

    <li><a data-toggle=tab href=#carte>Carte</a></li>

</ul>

<div class=tab-content>

    <div id=home class=tab-pane fade in active>Lorem ipsum</div>

    <div id=carte class=tab-pane fade> **//see script below\** </div>

</div>

Script :

<div id=carteBenef></div>

      <script type=text/javascript>

          $(document).ready(function () {

              var map = new L.Map('carteBenef');

              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',

                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],

                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href=http://open.mapquest.co.uk target=_blank>MapQuest</a>, <a href=http://www.openstreetmap.org/ target=_blank>OpenStreetMap</a> and contributors, <a href=http://creativecommons.org/licenses/by-sa/2.0/ target=_blank>CC-BY-SA</a>';

              var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});

              var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)

              map.addLayer(cloudmade).setView(iades, 15);

              var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);

              var benef = new L.Marker(benefLocation);

              map.addLayer(benef);

              benef.bindPopup(<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>).openPopup();

          });

      </script>

The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)