传单地图需要刷新页面才能在Jquery Mobile应用中显示

Question

I'm currently in the middle of a project and have stumbled across a problem. 我目前在一个项目的中间，偶然发现了一个问题。 I have one HTML file called index.html that holds the base functionality pages of my app(welcome page, login and register) and a second HTML page called home.html that you reach after successful login which is suppose to display a leaflet map with user location. 我有一个名为index.html的HTML文件，该文件包含应用程序的基本功能页面（欢迎页面，登录和注册），以及另一个在成功登录后到达的名为home.html的HTML页面，该页面假定与用户位置。 Problem is when I successfully login the map does not show unless I refresh the page and this is undesirable. 问题是，当我成功登录时，除非刷新页面，否则地图不会显示，这是不可取的。

For the past few days I have tried every combination of where to put the map JS on the second HTML page. 在过去的几天中，我尝试了将地图JS放置在第二个HTML页面上的各种组合。 I have tried putting the code inside script tags inside the div data-role section and I still need to refresh to see the map. 我尝试将代码放在div数据角色部分的script标签内，但仍然需要刷新才能查看地图。 I understand that JQM only calls the div data-role. 我了解JQM仅调用div数据角色。 The code is being called because I am prompted to allow location and if I log to the console the JS is being called but still no map. 之所以调用该代码，是因为系统提示我允许位置，并且如果我登录到控制台，则正在调用JS，但仍然没有地图。

Index.html 的index.html

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- JQuery and JQuery mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Bootstrap -->
<!--<link rel="stylesheet" href="../resources/bootstrap/dist/css/bootstrap.min.css">
<script src="../resources/bootstrap/dist/js/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- LeafletJS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<!-- CSS & Scripts -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/header.css">
</head>

<body>    
<!-- Login Page Begin -->
<div data-role="page" id="loginPage">

    <div data-role="main" class="ui-content">
        <h2 class="text-center"><strong>Login to GeoBus</strong></h2>
        <div class="loginForm">
            <form method="post">
                <fieldset data-role="controlgroup">
                    <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input class="form-control" type="email" id="email" placeholder="user@user.com" required="required">
                    </div>

                    <div class="form-group">
                        <label for="password" class="control-label">Password</label>
                        <input class="form-control" type="password" id="password" placeholder="Enter a Password" required="required">
                        <br>
                    </div>

                    <div class="form-group">
                        <button type="submit" id="loginButton" value="Login">Login</button>
                    </div>
                </fieldset>
            </form>
            <div class="alert alert-danger" id="failAlert">

            </div>
        </div>
    </div>
</div>
<script src="./js/index.js"></script>
</body>
</html>

index.js index.js

  $('#loginButton').click(function () {
    var passwordStrengthRegex = /((?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,12})/gm;
    var email = $("#email").val();
    var pword = $("#password").val();

    if(!pword.match(passwordStrengthRegex) && pword.length != 0){
        $('#failAlert').html("<center>Password Rules: 6-12 Characters & At Least 1 Uppercase, 1 Lowercase, 1 Number.</center>");
        hideShowAlert($('#failAlert'));
    }
    else if (email.length != 0 && pword.length != 0) {
        var data = {
            email: email,
            password: pword
        };

        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            url: "https://www.geobus.co.uk/api/v1/login",
            success: function (data) {
                if (data.error == false) {
                    sessionStorage.user = data.user;
                    sessionStorage.token = data.token;
                    $.mobile.pageContainer.pagecontainer("change", "home.html");
                    //$.mobile.changePage("home.html"); //,{reloadPage: true});
                } else if (data.error == true) {
                    $('#failAlert').html("<center>Invalid Login Credentials!</center>");
                    hideShowAlert($('#failAlert'));
                }
            },
            error: function (data) {
                $('#failAlert').html("<center>Whoops Something Has Gone Wrong!</center>");
            }
        });

        return false;
    }
});

home.html home.html的

<body>
<div data-role="page" id="home">

    <div data-role="panel" id="menu" data-swipe-close="true" data-display="overlay">
        <ul class="nav navbar-nav" id="slideMenu">
            <center>
            <label class="menuLabel">Swipe to Close</label><span id="slideGlyph" class="glyphicon glyphicon-chevron-left"></span></center>
            <li><a href="#home" class="menuOption">Home</a></li>
            <li><a href="#" class="menuOption">Track</a></li>
            <li><a href="#" class="menuOption">Timetables</a></li>
            <li><a href="#routes" class="menuOption">Routes</a></li>
            <li><a href="index.html" class="menuOption">Log Out</a></li>
        </ul>
    </div>

    <div data-role="header" class="ui-header">
        <a href="#menu" class="navbar-toggle" role="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <img src="../images/logo.png" id="logo" alt="GeoBus Logo">
    </div>

    <div data-role="main" class="ui-content">
        <div class="alert alert-success" id="successAlert">
            Successfull Login!
        </div>
        <div id="map"></div>
        <script>
            map = L.map('map');

            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            var userIcon = L.icon({
                iconUrl: '../images/userMapPin.png',
                iconSize: [38, 85],
                iconAnchor: [22, 94]
            });

            map.locate({
                setView: true,
                maxZoom: 18,
                enableHighAccuracy: true
            });

            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            function onLocationFound(e) {
                var radius = e.accuracy / 2;

                L.marker(e.latlng, {
                    icon: userIcon
                }).addTo(map)
                    .bindPopup("You are within " + radius + " meters of this point.").openPop$
            }

            function onLocationError(e) {
                alert(e.message);
            }
        </script>
    </div>
</div>
</body>
</html>

Sorry for the mess of code I have shortened it as much as possible. 对不起，我已经尽可能缩短了代码的混乱程度。 I did have the script tag code in home.html separated out into it's own file but I still needed a refresh. 我确实将home.html中的脚本标签代码分离到了自己的文件中，但仍然需要刷新。 Has anybody got any idea where my problem is? 有人知道我的问题在哪里吗？ I'm loosing my mind. 我正在失去理智。 Any help would be greatly appreciated. 任何帮助将不胜感激。

Answer 1

I had this: 我有这个：

<div data-role="main" class="ui-content">
    <div id="map"></div>
</div>

This was the fix. 这就是解决方法。

<div id="map" data-role="main" class="ui-content">

Thanks for the help Omar. 感谢您对Omar的帮助。

传单地图需要刷新页面才能在Jquery Mobile应用中显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-03 19:45:27

传单地图需要刷新页面才能在Jquery Mobile应用中显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-03 19:45:27

解决方案1
1 已采纳 2016-03-03 19:45:27