jQuery Mobile在提交表单时保持在多页文档中加载第一页

时间:2014-04-15 16:41:11

标签: javascript jquery html jquery-mobile cordova

我一直在寻找data-ajax="false"以外的解决方案,因为这对我不起作用。

无论如何,在我的Phonegap应用程序中,当我使用jquery mobile提交表单时,我需要通过jquery中的常规提交函数来运行它,以便在它进入服务器之前对其进行操作。

我首次在手机上对它进行加密,然后再转到数据库以保证更安全。

无论如何,在我需要使用JQM切换到多页面方法之前,我可以提交一个表单,它不会提交任何问题。

但是,当我只将HTML更改为多页面设置时,我得到的只是刷新登录屏幕,第一页,无论我是在那还是注册。

此外,在测试中,如果我尝试提醒任何内容,在功能内部或否,则不会出现任何内容,因此测试路径对我不起作用。

最重要的是让我提交表格。

还有一件事,当我把代码放在jsfiddle中时,所有内容,警报和所有内容都完美无缺。

所以我不知道是不是手机带。

JS小提琴链接 - http://jsfiddle.net/copilot0910/mVgLJ/

代码

HTML                                                                 

<h1>Login</h1>

                    <label for="uname">Username:</label>
                    <input type="text" name="uname" id="uname" value="" autocomplete="off" autocapitalize="off" />
                    <label for="pword">Password:</label>
                    <input type="password" name="pword" id="pword" value="" />
                    <input type="submit" value="Login" name="login_submit_btn" id="login_submit_btn" />
                </form>
<a href="#register" class="ui-btn ui-shadow ui-corner-all ui-mini">Go Register</a>

            </div>
        </div>
        <div id="register" data-role="page">
            <div data-role="content">
                <form id="register_form">

<h1>Register</h1>

                    <label for="uname_reg">Wanted Username:</label>
                    <input type="text" name="uname_reg" id="uname_reg" value="" autocomplete="off" autocapitalize="off" />
                    <label for="pword_reg">Password:</label>
                    <input type="password" name="pword_reg" id="pword_reg" value="" />
                    <label for="email_reg">Email:</label>
                    <input type="email" name="email_reg" id="email_reg" value="" autocomplete="off" autocapitalize="off" />
                    <label for="fname_reg">First Name:</label>
                    <input type="text" name="fname_reg" id="fname_reg" value="" autocomplete="off" autocapitalize="off" />
                    <label for="lname_reg">Last Name:</label>
                    <input type="text" name="lname_reg" id="lname_reg" value="" autocomplete="off" autocapitalize="off" />
                    <input type="submit" value="Register" />
<a href="#login" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline">Go Login</a>

<a href="#tac" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-mini" data-transition="pop">You Accept our Terms</a>

                </form>
            </div>
        </div>
    </div>
</body>

的jQuery

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $(document).ready(function () {
        $("#login_form").submit(function () {
            event.preventDefault();

            alert("Login Alert");

            $("#uname").blur();
            $("#pword").blur();
            $("#uname_reg").blur();
            $("#pword_reg").blur();
            $("#email_reg").blur();
            $("#fname_reg").blur();
            $("#lname_reg").blur();

            var NoHashPwd = $("#pword").val();
            var pwd = hex_sha512(NoHashPwd);
            var usrname = $("#uname").val();

            var loginData = {
                "uname": usrname,
                    "p": pwd
            };

            $.ajax({
                type: "POST",
                url: "Not Telling",
                data: loginData,
                cache: false,
                async: false,
                dataType: "json",
                success: function (resp) {
                    if (resp.msg === "good") {
                        doGeolocate();
                    } else {
                        alert(resp.msg);
                    }

                    $("#uname").val("");
                    $("#pword").val("");
                    $("#uname_reg").val("");
                    $("#pword_reg").val("");
                    $("#email_reg").val("");
                    $("#fname_reg").val("");
                    $("#lname_reg").val("");

                    return false;
                }
            });
        });

        $("#register_form").submit(function () {
            event.preventDefault();

            alert("Login Alert");

            $("#uname").blur();
            $("#pword").blur();
            $("#uname_reg").blur();
            $("#pword_reg").blur();
            $("#email_reg").blur();
            $("#fname_reg").blur();
            $("#lname_reg").blur();

            var NoHashPwd = $("#pword_reg").val();
            var p = hex_sha512(NoHashPwd);
            var uname = $("#uname_reg").val();
            var fname = $("#fname_reg").val();
            var lname = $("#lname_reg").val();
            var email = $("#email_reg").val();

            var regData = {
                "uname": uname,
                    "p": p,
                    "fname": fname,
                    "lname": lname,
                    "email": email
            };

            $.ajax({
                type: "POST",
                url: "Not Telling",
                data: regData,
                cache: false,
                async: false,
                dataType: "json",
                success: function (resp) {
                    if (resp.flag === "good") {
                        doGeolocate();
                    } else {
                        alert(resp.flag);
                    }

                    $("#uname").val("");
                    $("#pword").val("");
                    $("#uname_reg").val("");
                    $("#pword_reg").val("");
                    $("#email_reg").val("");
                    $("#fname_reg").val("");
                    $("#lname_reg").val("");

                    return false;
                }
            });
        });
    });
}

顺便说一下,额外的deviceready函数是针对phonegap的,所以请保留。没有造成任何问题。

2 个答案:

答案 0 :(得分:0)

你忘记了返回错误;在你的提交();功能

您已将其置于Ajax回调中,您需要将其放在提交代码的末尾,如下所示:

$("#login_form").submit(function () {
            event.preventDefault();

            alert("Login Alert");

            $("#uname").blur();
            $("#pword").blur();
            $("#uname_reg").blur();
            $("#pword_reg").blur();
            $("#email_reg").blur();
            $("#fname_reg").blur();
            $("#lname_reg").blur();

            var NoHashPwd = $("#pword").val();
            var pwd = hex_sha512(NoHashPwd);
            var usrname = $("#uname").val();

            var loginData = {
                "uname": usrname,
                    "p": pwd
            };

            $.ajax({
                type: "POST",
                url: "Not Telling",
                data: loginData,
                cache: false,
                async: false,
                dataType: "json",
                success: function (resp) {
                    if (resp.msg === "good") {
                        doGeolocate();
                    } else {
                        alert(resp.msg);
                    }

                    $("#uname").val("");
                    $("#pword").val("");
                    $("#uname_reg").val("");
                    $("#pword_reg").val("");
                    $("#email_reg").val("");
                    $("#fname_reg").val("");
                    $("#lname_reg").val("");

                    return false;
                }
            });
            return false; // avoid to execute the actual submit of the form.
        });

答案 1 :(得分:0)

您的代码没有任何问题,&#34; deviceready&#34;事件仅在DEVICE准备就绪时触发。 警报现在正在运行。测试使用以下内容:

$(document).ready(function () {
"use strict";
onDeviceReady();

});

我冒昧地检查你的代码并使其得到Lint恭维。 请在调用它们之前找到完整的代码P.S声明函数&#34; deviceready&#34;电话就在最后。

/*jslint browser: true*/
/*global $, jQuery, alert, hex_sha512 */

function onDeviceReady() {
"use strict";
$(document).ready(function () {
    $("#login_form").submit(function () {
        event.preventDefault();

        alert("Login Alert");

        $("#uname").blur();
        $("#pword").blur();
        $("#uname_reg").blur();
        $("#pword_reg").blur();
        $("#email_reg").blur();
        $("#fname_reg").blur();
        $("#lname_reg").blur();

        var NoHashPwd = $("#pword").val(),
            pwd = hex_sha512(NoHashPwd),
            usrname = $("#uname").val(),
            loginData = {
                "uname": usrname,
                "p": pwd
            };

        $.ajax({
            type: "POST",
            url: "Not Telling",
            data: loginData,
            cache: false,
            async: false,
            dataType: "json",
            success: function (resp) {
                if (resp.msg === "good") {
                    alert("good");
                    //doGeolocate();
                } else {
                    alert(resp.msg);
                }

                $("#uname").val("");
                $("#pword").val("");
                $("#uname_reg").val("");
                $("#pword_reg").val("");
                $("#email_reg").val("");
                $("#fname_reg").val("");
                $("#lname_reg").val("");

                return false;
            }
        });
    });

    $("#register_form").submit(function () {
        event.preventDefault();

        alert("Login Alert");

        $("#uname").blur();
        $("#pword").blur();
        $("#uname_reg").blur();
        $("#pword_reg").blur();
        $("#email_reg").blur();
        $("#fname_reg").blur();
        $("#lname_reg").blur();

        var NoHashPwd = $("#pword_reg").val(),
            p = hex_sha512(NoHashPwd),
            uname = $("#uname_reg").val(),
            fname = $("#fname_reg").val(),
            lname = $("#lname_reg").val(),
            email = $("#email_reg").val(),
            regData = {
                "uname": uname,
                "p": p,
                "fname": fname,
                "lname": lname,
                "email": email
            };

        $.ajax({
            type: "POST",
            url: "Not Telling",
            data: regData,
            cache: false,
            async: false,
            dataType: "json",
            success: function (resp) {
                if (resp.flag === "good") {
                    //doGeolocate();
                    alert("success");
                } else {
                    alert(resp.flag);
                }

                $("#uname").val("");
                $("#pword").val("");
                $("#uname_reg").val("");
                $("#pword_reg").val("");
                $("#email_reg").val("");
                $("#fname_reg").val("");
                $("#lname_reg").val("");

                return false;
            }
        });
    });
});
}

$(document).ready(function () {
"use strict";
onDeviceReady();

});

document.addEventListener("deviceready", onDeviceReady, false);