title: Phonegap Jquery Mobile Form Submit Refresh
body: <p>I keep running into this issue. This is my first phonegap application, and really my first time utilizing jQuery and jQuery mobile.</p>
  
  <p>I've created a simple app that I just want to get a "Tracking Number" from the user, then submit it to a server side script on a different server, and show the results on the same page.</p>
  
  <p>I've tried lots of different ways and contiune to run into the issue of everything works, but only if you submit the form once (it seems to reload) and then submit it again.</p>
  
  <p>main.js:</p>
  
  <pre><code>var app = {
  
      initialize: function() {        
  
          $('#tracking-form').on('submit', function(e){       
              e.preventDefault();
              e.stopPropagation();
              e.stopImmediatePropagation();
  
              app.searchByTracking();
  
              return false;
          });
      },
  
      searchByTracking: function() {
          var formData = $("#tracking-form").serialize(); 
  
          $.ajax({
              type: "POST",
              url: "http://newepicweb.com/bodypros/search.php",
              cache: false,
              data: formData,
              success: function (result) {
                  $("#search-results").html(result);
              },
              error: function (request,error) {
                  console.log("Error " + error);
              }        
  
          });
      }   
  };    
  
  app.initialize();
  </code></pre>
  
  <p>search.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet"  href="css/jquery.mobile-1.4.1.css"&gt;
  &lt;link rel="stylesheet"  href="css/styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Start of first page: #one --&gt;
  &lt;div data-role="page" id="search"  data-theme="b"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Search by Tracking Number&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content" &gt;  
          &lt;h2&gt;Instructions&lt;/h2&gt;
  
          &lt;p&gt;Click below to enter your tracking number, then press search to view the status of your vehicle.&lt;/p&gt; 
          &lt;div id="form"&gt;
              &lt;form id="tracking-form" data-ajax='false'&gt;
                  &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
                      &lt;label for="username"&gt;Tracking Number:&lt;/label&gt;
                      &lt;input type="text" name="tracking-number" id="tracking-number" value="" placeholder="Tracking Number" data-theme='a' /&gt;
                  &lt;/div&gt;
                  &lt;input type='submit' value='Search' /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div id="search-results"&gt;
          &lt;/div&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&lt;a href="menu.html" data-direction="reverse" data-role="button" data-theme="b"&gt;Back to Menu&lt;/a&gt;&lt;/p&gt;  
      &lt;/div&gt;&lt;!-- /content --&gt;
  &lt;/div&gt;&lt;!-- /page one --&gt;
  
  
  &lt;!-- Start of second page: #two --&gt;
  &lt;div data-role="page" id="results" data-theme="a"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Body Pro's&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content" data-theme="a"&gt;    
          &lt;h2&gt;Vehicle Status&lt;/h2&gt;
          &lt;p&gt;&lt;a href="#search" data-role="button" data-theme="b"&gt;Search Again&lt;/a&gt;&lt;/p&gt; 
  
      &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;/div&gt;&lt;!-- /page two --&gt;
  
  
  &lt;script src="lib/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/jquery.mobile-1.4.1.js"&gt;&lt;/script&gt;
  &lt;script src="lib/handlebars-v1.3.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/storage/memory-store.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically, I'm trying to get input from the user, fetch the content using the input, then display the input to the user...</p>
  
  <p>Any suggestions or info will help. Thanks!</p>
  
  <p>-- Also, maybe it has something with.. </p>
  
  <pre><code>$('#tracking-form').on('submit', function(e){ } )
  </code></pre>
  
  <p>It doesn't seem to register until the form was submitted once. I added console.log() and it only fired after the second time i pushed it.</p>