模态窗口在关闭后将表单数据放在查询字符串上

时间:2013-03-11 21:29:46

标签: asp.net-mvc-3 jquery

我有一个MVC3网站,它生成一个带有安全问题的模态窗口。问题是,当ajax调用返回时,无论成功还是错误以及模态窗口是否关闭,所有表单数据都会终止于父窗口的查询字符串

$(this).dialog('destroy');

 $(this).dialog('destroy').remove();

and placing close: function () { $(this).dialog('destroy'); },

在对话框实例化中没有成功。

如何阻止模态窗口将表单值传递给父窗口查询字符串?

出现在模态窗口中的部分视图

   <div id="resetpanel">
    <form name="pwreset" id="pwreset" action="" method="post">
        Account Number: <input type="text" name="acctNumber" id="acctNumber" /><br />
        <button class="btn" name="btnNext" onclick="goResetValidate();return false;">Next</button>
    </form>
</div>
<div id="challengepanel">
    <form name="challenge" id="challenge" style="display:none;" action="" method="post">
        <input type="hidden" name="setNum" id="setNum" value="" />
        Member Number: <input type="text" name="acctNumber2" id="acctNumber2" readonly="true" /><br />
        <label id="Q0"></label>
        Answer: <input type="text" name="answer1" id="answer1" /><br />
        <label id="Q1"></label>
        Answer: <input type="text" name="answer2" id="answer2" /><br />
        <label id="Q2"></label>
        Answer: <input type="text" name="answer3" id="answer3" /><br />
        <button class="btn" name="btnNext" id="challengebutton" onclick="goResetPassword();return false;">Submit</button>
    </form>
</div>

使用Jquery调用AJAX

//function that captures the account number and sends them to the service for processing        
    function goResetValidate() {

        // check that all answers are numbers only on challenge questions
        var ruleset = {
                    required: true,
                    digits: true
                    };
        $('#pwreset').validate({
            rules: {
                qSet0: ruleset,
                qSet1: ruleset,
                qSet2: ruleset
                    }
         });

        // challenge questions for password reset
        var qSet0 = ["Please enter the numeral of the month you were born (i.e. January = 1, February = 2)", "Please enter the last 4 digits of your Social Security number (i.e. 444-55-XXXX)", "Please enter your home zip code - first five digits only (i.e. 22333)."];
        var qSet1 = ["Please enter the day of the month you were born (i.e. 1, 2, 3, etc.).", "Please enter the 2 middle digits of your Social Security number (i.e. 444-XX-6666).", "Please enter the last 4 digits of your home telephone number (i.e. 703-555-XXXX)."];
        var qSet2 = ["Please enter the first 3 digits of your Social Security number (i.e. XXX-55-6666).", "Please enter the 3 middle digits of your home telephone (i.e. 703-XXX-5555).", "Please enter your home zip code - first five digits only (i.e. 22333)."];
        // rand for choice of questions
        var random = (Math.ceil(Math.random() * 3) - 1);
        var jRequest = {};
        var acnum = $("#acctNumber").val();
        jRequest.an = acnum;

        var jData = {};
        jData.request = jRequest;

        $.ajax({
            cache: false,
            type: "POST",
            async: false,
            url: ResetValidateUrl,
            data: JSON.stringify(jData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (splashObj) {
                switch (splashObj.ResetValidateResult.RESPONSE) {
                    case "VALID":
                        var challengequestiondisplayed = splashObj.ResetValidateResult.RESPONSE;
                        var quest = "qSet" + random;
                        // remove reset form
                        $('#resetpanel').fadeOut("slow", function () {
                            $('#resetpanel').remove();
                            $('#acctNumber2').val(acnum);
                            $('#setNum').val(random);
                        });
                        $.each(eval(quest), function (index, item) {
                            $('#Q' + index).text("" + this + "");
                        });
                        $('form#challenge').fadeToggle("slow", "linear");
                        break;
                    // bad member number              
                    case "INVALID":
                        alert("We're sorry; the system did not recognize the Member Number entered. Please try again.");
                        break;
                    // no email on file       
                    case "NO_EMAIL":
                        alert("This feature requires a valid email in the system.  Please contact us to provide a valid email address.");
                        break;
                    // error       
                    case "ERROR":
                        alert("We're sorry; the system was uanble to complete your request. We apologize for the inconvenience.");
                        break;
                    // system is in memo-post mode       
                    case "MEMO_POST":
                        alert("The system is unavailable at this time.  Please try your request again later.");
                        break;
                }
            },
            error: function (xhr) {
                alert("A Password Web Service Error!");
                //$(this).dialog('destroy').remove();
            }
        });
    }

//捕获帐号/ qeustins设置号码/答案的功能,并将其发送给服务进行处理
        函数goResetPassword(){

        var jRequest = {};
        jRequest.an = $("#acctNumber2").val();
        jRequest.setNumber = $("#setNum").val();
        jRequest.answer1 = $("#answer1").val();
        jRequest.answer2 = $("#answer2").val();
        jRequest.answer3 = $("#answer3").val();

        var jData = {};
        jData.request = jRequest;

        $.ajax({
            cache: false,
            type: "POST",
            async: false,
            url: ResetPasswordUrl,
            data: JSON.stringify(jData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (splashObj) {
                switch (splashObj.ResetPasswordResult.RESPONSE) {
                    // error       
                    case "ERROR":
                        alert("We're sorry; the system was uanble to complete your request. We apologize for the inconvenience.");
                        break;
                    // system is in memo-post mode       
                    case "MEMO_POST":
                        alert("The system is unavailable at this time.  Please try your request again later.");
                        break;
                    case "INVALID_RESPONSE":
                        alert("We're sorry; we are unable to validate your status as the NetBranch account holder based upon your answers to the security questions. Note: The information requested is based upon member data currently on file with Apple FCU. If you continue to encounter difficulties with the security questions, please contact.");
                        break;
                    case "PERM_FROZEN":
                        alert("We're sorry; For security reasons, your online account access has been disabled. We apologize for the inconvenience.");
                        break;
                    case "FROZE_NOW":
                        alert("We're sorry; we are unable to validate your status as the NetBranch account holder. For security purposes, your account has been locked. We apologize for the inconvenience. To restore access, please contact ");
                        break;
                    case "SUCCESS":
                        alert("A temporary password has been sent to the email we have on file.");
                        break;
                }
                return false;
                $(this).dialog('close');
            },
            error: function (xhr) {
                alert("Password Web Service Error!");
                $.dialog('close').remove;
            }
        });
    }

模态窗口Jquery

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();
        $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this).attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).dialog('destroy'); },
                    modal: true,
                    width: '530px'
                })
                .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});  

2 个答案:

答案 0 :(得分:0)

听着,我不接受你的问题,但我仍会尝试解决你的问题,

$("#my-form-div").dialog({
  autoOpen: true,
  width: 600,
  height: 600,
  modal: true,
  draggable:true,
  resizable:false,
  title: 'FORM',
  buttons: [
       {
            text: "CLOSE",
            className: 'close-button-class',
            click: function() {
                // do what ever you want on the close event
                $(this).dialog("close");
                location.reload();
            }
        }
    ],
  open: function() {
    //do whatever you want on the open event.
    $("#my-form-div").html("<%= escape_javascript(render('form_view')) %>");
    }
});

请更清楚你想要什么。

答案 1 :(得分:0)

啊,啊,他找到了。我需要在表单上放置一个POST方法以防止它违约。我猜即使我刚刚关闭对话框,表单也将自己提交为默认GET。