Question

我一直在遇到这个问题。这是我的第一个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>&nbsp;</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（），它只在第二次推送后才触发。

Answer 1

您正在提交整个表单。所以它正在重新加载你不想要的整个dom。

所以你应该使用简单的按钮并使用Onclick函数。

喜欢这个 -

<input type='button' value='Search' onclick="app.searchByTracking()" />

Answer 2

不要提交表单，而是更改：

<input type='submit' value='Search' />

为：

<input type='button' value='Search' onclick="app.searchByTracking()" />

由于您停留在同一页面上，您实际上并不想提交表单，您只想调用从表单收集数据的函数并从searchByTracking函数执行您自己的提交

Phonegap Jquery Mobile表单提交刷新

2 个答案: