Phonegap Jquery Mobile Form Submit Refresh
Question
I keep running into this issue. This is my first phonegap application, and really my first time utilizing jQuery and jQuery mobile.
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.
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.
main.js:
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();
search.html
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.1.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="search" data-theme="b">
<div data-role="header">
<h1>Search by Tracking Number</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Instructions</h2>
<p>Click below to enter your tracking number, then press search to view the status of your vehicle.</p>
<div id="form">
<form id="tracking-form" data-ajax='false'>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Tracking Number:</label>
<input type="text" name="tracking-number" id="tracking-number" value="" placeholder="Tracking Number" data-theme='a' />
</div>
<input type='submit' value='Search' />
</form>
</div>
<div id="search-results">
</div>
<p> </p>
<p><a href="menu.html" data-direction="reverse" data-role="button" data-theme="b">Back to Menu</a></p>
</div><!-- /content -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="results" data-theme="a">
<div data-role="header">
<h1>Body Pro's</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Vehicle Status</h2>
<p><a href="#search" data-role="button" data-theme="b">Search Again</a></p>
</div><!-- /content -->
</div><!-- /page two -->
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/jquery.mobile-1.4.1.js"></script>
<script src="lib/handlebars-v1.3.0.js"></script>
<script src="js/storage/memory-store.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Basically, I'm trying to get input from the user, fetch the content using the input, then display the input to the user...
Any suggestions or info will help. Thanks!
-- Also, maybe it has something with..
$('#tracking-form').on('submit', function(e){ } )
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.
2 answers
solution1
3 2014-02-24 10:39:13
You are submitting the whole form. So it's reloading the whole dom which you dont want.
So you should use simple button and use Onclick function.
Like this-
<input type='button' value='Search' onclick="app.searchByTracking()" />
solution2
0 2014-02-24 01:09:46
Instead of submitting the form, change this:
<input type='submit' value='Search' />
to:
<input type='button' value='Search' onclick="app.searchByTracking()" />
Since you are staying on the same page, you don't actually want to submit the form, you just want to call the function that collects the data from the form and do your own submit from the searchByTracking function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.