title: Using Multi-page template by jquery mobile to display search result
body: <p>Here is my Html code. What I am trying sounds simple but I am not able to do so. I am trying to use Multi page template as suggest by jquery mobile. First page I have a text box and button. User enters a value in text box and then clicks the button which should take the user to "page2" and show the search details. </p>
  
  <p>My code below is taking me to "page2" but I am not able to see any search results. I inserted an alert in between and that pops up with the data. Also the back button on page2 doesn't take me to page1?</p>
  
  <p>Any pointers are greatly appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Employee Finder&lt;/title&gt;
  
      &lt;script src="jquery-mobile/jquery-1.7.2.min.js"/&gt;
      &lt;script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/&gt;
      &lt;script src="phonegap-1.3.0.js"/&gt; 
      &lt;script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/&gt;
      &lt;link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/&gt;
  
      &lt;script&gt; 
  
      $(document).ready(function() {
          $('#findemplyoee').click(function() {
  
            $.mobile.changePage('#page2', { transition: "slide", changeHash: true, reverse: true });
  
               var employeeNumber = $("#employeeNumber").val();
               var employeedetail = JSON.parse(... call a function here);
  
               if(employeedetail.found)
               {
                       $('#employeefirstName').text(employeedetail.firstName);
                       $('#employeelastName').text(employeedetail.lastName);
               }
               else
               {
                       $('#employeeDetails').html("&lt;p&gt;Sorry the employee Number you entered was not found!&lt;/p&gt;");
               }
  
          });
      });
  
      &lt;/script&gt;
  
      &lt;/head&gt; 
      &lt;body&gt; 
  
      &lt;div data-role="page" id="page1"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Find Employee Data&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content" id="searchDetails"&gt;    
             &lt;input name="employeeNumber" type="text" id="employeeNumber"/&gt;
             &lt;input type="button" id="findemplyoee" data-theme="b" value="Find Employee"/&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer"&gt;
              &lt;h4&gt;Page Footer&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="page" data-add-back-btn="true" id="page2"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Page Two&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="employeeDetails"&gt;
             &lt;p id="employeefirstName"&gt;&lt;/p&gt;
             &lt;p id="employeelastName"&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;h4&gt;Page Footer&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>