Question

I have successfully placed a variable in local storage I am now trying to display that variable as soon as the next page loads, I am unsure of how to get this script to execute as soon as the page transitions.

My code is as follows

      <script type="text/javascript">
  $("#home").on('pageinit ', function() {


            //alert('pageinit');
            document.getElementById("output").innerHTML="Name: " +localStorage.userName;            

      });

  </script>
  </head><!-- Main Page -->

  <div id="home" data-role="page" data-title="home">
    <div data-role="header">
      <h1>Home Page</h1>
    </div>
  <!-- /header -->

  <div data-role="content">

    <div id='customer'> Customer Name </div>
    <p id="output"></p>
    <a href="index.html" data-role="button">Alarm</a> <a href="index.html" data-role="button">Reports</a> <a href="index.html" data-role="button">Summary</a> </div>
  <!-- /content -->

  <div data-role="footer" data-position="fixed" class="ui-bar"> <a href="index.html" data-role="button" >Logout</a> <h4>&copy;Home Page</h4> </div>


  <!-- /footer -->

  </body>
  </html>

Answer 1

You can use the pageChange event, documented here.

This event is triggered after the changePage() request has finished loading the page into the DOM and all page transition animations have completed.