jquery - JavaScript code runs once at the start than it stop -
i using jvectormap library display world-wide map. have followed tutorial official site getting started tutorial include map in html view file follows:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="assets/ico/favicon.png"> <title>al andulas</title> <!-- bootstrap core css --> <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <!-- custom styles template --> <link href="assets/css/main.css" rel="stylesheet"> <!-- custom styles victormap --> <link href="assets/css/jquery-jvectormap-2.0.3" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">sp<i class="fa fa-circle"></i>t</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="index.html">main</a></li> <li><a data-toggle="modal" data-target="#mymodal" href="#mymodal"><i class="fa fa-envelope-o"></i></a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container-fluid"> <div class="row centered"> <br><br> <div class="col-lg-12"> <div id="world-map" style="width: 100%; height: 100%"> <!-- script works once --> <script> $(function(){ $('#world-map').vectormap({map: 'world_mill'}); }); </script> </div> </div> </div> </div> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery-3.1.1.min.js"></script> <script src="assets/js/jquery-jvectormap-2.0.3.min.js"></script> <script src="assets/js/jquery-jvectormap-world-mill.js"></script> </body> </html> first time paste code editor , view via browser map appears when refresh page map not showing anymore on site , therefore, have delete javascript code , re paste again:
<script> $(function(){ $('#world-map').vectormap({map: 'world_mill'}); }); </script> what correct way display map permanently on site.
the script placed wrong.
- you shouldn't put
<script>inside<div>tag your script throws error because try use jquery before include it.
2.1. bootstrap requires jquery run. need include jquery before bootstrap.
the correct order be
<script src="assets/js/jquery-3.1.1.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery-jvectormap-2.0.3.min.js"></script> <script src="assets/js/jquery-jvectormap-world-mill.js"></script> <script> $(function(){ $('#world-map').vectormap({map: 'world_mill'}); }); </script> now remains ask why including 2 versions of jquery... end in problems - i've thrown older version out here.
Comments
Post a Comment