Leaflet map requires page refresh to display in Jquery Mobile app
<p>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. Problem is when I successfully login the map does not show unless I refresh the page and this is undesirable.</p>

<p>For the past few days I have tried every combination of where to put the map JS on the second HTML page. 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. I understand that JQM only calls the div data-role. 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.</p>

<p>Index.html</p>

<pre><code>&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

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

&lt;body&gt;    
&lt;!-- Login Page Begin --&gt;
&lt;div data-role="page" id="loginPage"&gt;

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

                    &lt;div class="form-group"&gt;
                        &lt;label for="password" class="control-label"&gt;Password&lt;/label&gt;
                        &lt;input class="form-control" type="password" id="password" placeholder="Enter a Password" required="required"&gt;
                        &lt;br&gt;
                    &lt;/div&gt;

                    &lt;div class="form-group"&gt;
                        &lt;button type="submit" id="loginButton" value="Login"&gt;Login&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/fieldset&gt;
            &lt;/form&gt;
            &lt;div class="alert alert-danger" id="failAlert"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="./js/index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>index.js</p>

<pre><code>  $('#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) &amp;&amp; pword.length != 0){
        $('#failAlert').html("&lt;center&gt;Password Rules: 6-12 Characters &amp; At Least 1 Uppercase, 1 Lowercase, 1 Number.&lt;/center&gt;");
        hideShowAlert($('#failAlert'));
    }
    else if (email.length != 0 &amp;&amp; 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("&lt;center&gt;Invalid Login Credentials!&lt;/center&gt;");
                    hideShowAlert($('#failAlert'));
                }
            },
            error: function (data) {
                $('#failAlert').html("&lt;center&gt;Whoops Something Has Gone Wrong!&lt;/center&gt;");
            }
        });

        return false;
    }
});
</code></pre>

<p>home.html</p>

<pre><code>&lt;body&gt;
&lt;div data-role="page" id="home"&gt;

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

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

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

            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; 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);
            }
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>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. Has anybody got any idea where my problem is? I'm loosing my mind. Any help would be greatly appreciated.</p>