[英]Phonegap Jquery Mobile Form Submit Refresh
我一直在遇到这个问题。 这是我的第一个phonegap应用程序,我第一次使用jQuery和jQuery mobile。
我创建了一个简单的应用程序,我只想从用户那里获得“跟踪号”,然后将其提交到不同服务器上的服务器端脚本,并在同一页面上显示结果。
我已经尝试了很多不同的方法并且继续遇到一切都有效的问题,但是只有你提交表单一次(似乎重新加载)然后再次提交它。
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>
基本上,我正在尝试从用户那里获取输入,使用输入获取内容,然后向用户显示输入...
任何建议或信息都会有所帮助。 谢谢!
- 此外,也许它有...
$('#tracking-form').on('submit', function(e){ } )
在表单提交一次之前似乎没有注册。 我添加了console.log(),它只在第二次推送后才触发。
您正在提交整个表单。 所以它正在重新加载你不想要的整个dom。
所以你应该使用简单的按钮并使用Onclick
功能。
像这样-
<input type='button' value='Search' onclick="app.searchByTracking()" />
不要提交表单,请更改:
<input type='submit' value='Search' />
至:
<input type='button' value='Search' onclick="app.searchByTracking()" />
由于您停留在同一页面上,您实际上并不想提交表单,您只想调用从表单收集数据的函数,并从searchByTracking
函数执行您自己的提交。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.