Page with Navbar gives "Error Loading Page" when it is loaded from a form on the previous page

Page with Navbar gives "Error Loading Page" when it is loaded from a form on the previous page

Are you able to have a form <form action="search.html" method="post"> load the next page (search.html) which will have a navbar with pages embed within it (data-role="page")? Let me give an example of the page:

  1. <!-- index.html -->
  2. <div data-role="page">
  3.     <form action="search.html" method="post">
  4.         <input type="submit" value="Submit" />
  5.     </form>
  6. </div>
  7. <!-- search.html -->
  8. <div data-role="page" id="search">
  9.     <div data-role="header"><h1>My Application</h1></div>
  10.     <div data-role="content"></div>
  11.     <div data-role="footer">
  12.         <div data-role="navbar">
  13.             <ul>
  14.                 <li><a href="#search" class="ui-btn-active">Search</a><li>
  15.                 <li><a href="#location">My Location</a><li>
  16.                 <li><a href="#favorites">Favorites</a><li>
  17.             </ul>
  18.         </div>
  19.     </div>
  20. </div>
  21. <div data-role="page" id="location">
  22.     <div data-role="header"><h1>My Application</h1></div>
  23.     <div data-role="content"></div>
  24.     <div data-role="footer">
  25.         <div data-role="navbar">
  26.             <ul>
  27.                 <li><a href="#search">Search</a><li>
  28.                 <li><a href="#location" class="ui-btn-active">My Location</a><li>
  29.                 <li><a href="#favorites">Favorites</a><li>
  30.             </ul>
  31.         </div>
  32.     </div>
  33. </div>
  34. <div data-role="page" id="favorites">
  35.     <div data-role="header"><h1>My Application</h1></div>
  36.     <div data-role="content"></div>
  37.     <div data-role="footer">
  38.         <div data-role="navbar">
  39.             <ul>
  40.                 <li><a href="#search">Search</a><li>
  41.                 <li><a href="#location">My Location</a><li>
  42.                 <li><a href="#favorites" class="ui-btn-active">Favorites</a><li>
  43.             </ul>
  44.         </div>
  45.     </div>
  46. </div>
So, my landing page submits a form and the search.html page is parsed. When I click on an item in the navbar, jQuery displays the dialog "Error Loading Page". I noticed, when I place data-ajax="false" on the form, the navbar works. Is this the only way to do this?

Any help is much appreciated!

Regards,
Ben