title: how to use jquery mobile to update the index.html from function called from secondpage.html
body: <p>I am building a phonegap app using the new cordova.js, jquery mobile and my own custom.js</p>
  
  <p>On the main page  index.html is a list of values which initially is blank</p>
  
  <p>When you click the set up link on the index.html page, you are taken to secondpage.html in which you enter some values.  When you click the submit button on secondpage.html I call a function called updatevalues() in my custom.js, which is to update the values in the list on index.html.  This does not happen.  Help me understand why?  Here is the index.html, secondpage.html and custom.js files</p>
  
  <p>---------------- index.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;PhoneGap&lt;/title&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.1.0.css" /&gt;
  &lt;script type="text/javascript" src="jquery/custom.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery/jquery_1_7_2.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery/jquery.mobile-1.1.0.js"&gt;&lt;/script&gt; 
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-role="page" id="mainpage"&gt; 
            &lt;div data-role="header" id="hdrMain"&gt; 
                 &lt;h1&gt;mainpage&lt;/h1&gt;
            &lt;/div&gt;
  
            &lt;div data-role="content" id="contentMain"&gt; 
                 &lt;p&gt; Main Menu&lt;/p&gt;
                 &lt;ul data-role="listview" data-inset="true" data-theme="b" &gt;
                      &lt;li&gt;&lt;a href="secondpage.html"&gt;Setup&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/div&gt;
  
            &lt;div data-role="content" id="contentInfo"&gt; 
                 &lt;p&gt;
            &lt;ul data-role="listview" data-theme="g" id="contentlist"&gt;
                 &lt;li&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;/li&gt;
            &lt;/ul&gt;
       &lt;p&gt;
            &lt;/div&gt;
  
           &lt;script type="text/javascript" &gt;  
            $( document ).delegate("#mainpage", "pageinit", function() {
                alert('A page with an ID of "mainpage" is about to be created by jQuery Mobile!');
                updatevalues();
              });
      &lt;/script&gt;  
       &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>----------------------  secondpage.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Setup&lt;/title&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css"
      href="jquery/jquery.mobile-1.1.0.css" /&gt;
  &lt;script type="text/javascript" src="jquery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript" src="jquery/custom.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="jquery/jquery.mobile-1.1.0.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div data-role="page"&gt;
  &lt;div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true"&gt;
          &lt;h1&gt; Setup&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="maindivs"  data-role="content" id="contentMain" name="contentMain"&gt; 
      &lt;form id="main" name="main"&gt;
  &lt;p&gt;Your Starting Profile&lt;/p&gt;
  &lt;p&gt;* = REQUIRED&lt;/p&gt;
  
  &lt;div class="maindivs"  id="ageDiv" data-role="fieldcontain"&gt;
  &lt;label for="yourage"&gt;Enter Your Age *&lt;/label&gt; 
  &lt;input id="yourage" name="yourage" type="number" /&gt;
  &lt;/div&gt;
  
  &lt;div class="maindivs"  id="weighttDiv" data-role="fieldcontain"&gt;
  &lt;label for="startingweight"&gt;Weight in lbs *&lt;/label&gt; 
  &lt;input id="startingweight" name="startingweight" type="number" /&gt;
  &lt;/div&gt;
  
  &lt;div class="maindivs"  id="submitDiv" data-role="fieldcontain"&gt;   
  &lt;a href="#" data-role="button" onClick=profilebuttonformbutton()&gt; Submit &lt;/a&gt; 
      &lt;/div&gt;
     &lt;/form&gt;
  &lt;/div&gt; 
  
  &lt;div class="requireddivs"  id="requiredDiv" data-role="fieldcontain"&gt;
  Please fill in all required fields
  &lt;a href="#" data-role="button" onClick=showmainpagebutton()&gt; OK &lt;/a&gt; 
  &lt;/div&gt;
  
  &lt;div class="updateddivs"  id="updateDiv" data-role="fieldcontain"&gt;
  Your values have been set.&lt;br&gt;&lt;/br&gt;
  &lt;a href="#" data-role="button" onClick=showindexpagebutton()&gt; OK &lt;/a&gt; 
  &lt;/div&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
      // Assign global variables
        //hdrMainVar = $('#hdrMain');
          $('.maindivs').show();
          $('.requireddivs').hide();
          $('.updateddivs').hide();
      }); 
      &lt;/script&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>-----------------------------  custom.js</p>
  
  <pre class="lang-js prettyprint-override"><code>function updatevalues() 
  {
      alert("checkvalues");
      var yourageVar = window.localStorage.getItem("yourageLocal");
      var weightVar = window.localStorage.getItem("weightLocal");
      alert("yourageVar = " + yourageVar);
      alert("weightVar = " + weightVar);
  
      if (!yourageVar || !weightVar)
      {
          $("#contentlist").empty(); //empty the list elements we've placed in the html
          //repopulate the list with data from phonegap's device api
          $("#contentlist").append("&lt;li&gt;Your age: 0&lt;/li&gt;");
          $("#contentlist").append("&lt;li&gt;Your weight: 0&lt;/li&gt;");
          $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
      }
      else
      {
          alert("main");
          alert("your age = " + yourageVar);
          alert("your weight = " + weightVar);
          $("#contentlist").empty(); //empty the list elements we've placed in the html
  
          //repopulate the list with data from phonegap's device api
          $("#contentlist").append("&lt;li&gt;Your Age: " + yourageVar + "&lt;/li&gt;");
          $("#contentlist").append("&lt;li&gt;Your Weight: " + weightVar + "&lt;/li&gt;");
          $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
      }
      $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
  }
  
  function showmainpagebutton( event ) 
  {
      $('.maindivs').show();
      $('.requireddivs').hide();
      $('.updateddivs').hide();
  }
  
  function showindexpagebutton( event ) 
  {
      $.mobile.changePage( "index.html", { transition: "slideup"} );  
  }
  </code></pre>