0

昨天我开始研究一个 Jquery 对话框来替换 jquery 的默认确认框......我遇到了一个问题，我看到的所有教程都告诉我在我的表单上使用 .submit() 但这似乎并不想要玩得好（或完全玩）

这是JSFIDDLE

现在这是我的 javascript 对我不起作用：

<script>

$(document).ready(function() {
        $(function() {
            var currentForm;
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: false,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        currentForm.submit();
                    }
                }
            });
        });

    $("#signinform").submit(function() {
        currentForm = this;
        $('#dialog-confirm').dialog('open');
        return false;
    });
});

</script>

问题发生在“进入队列”按钮上。几乎场景（如 jsfiddle 所示）是我需要用户确认办公室的规则，如果他们这样做，他们点击一个复选框，一旦他们这样做，然后他们点击提交，然后发送一个对话框，向用户解释他们正在进入什么。但是由于某种原因，“进入队列”按钮什么也没做。我很困惑。任何帮助都会很棒。

谢谢

4

3 回答 3

4

这是因为您在$(document).on('submit', "#signinform", function(e)调用.e.preventDefault();$('#signinform').submit();

您需要设置一个临时变量来查看您来自代码还是提交按钮。

这是一个带有工作测试的 JSFiddle，但你应该做一些更好的事情 =)

编辑： Javascript 是一种异步语言，这意味着您$('#dialog-confirm').dialog('open');不会阻止并仅修改 html，因此提交事件总是会返回 false -> 它永远不会被发送。

所以我得到了JSFiddle，它并没有真正像你想要的那样工作，但是如果你在单击 Enter Queue 按钮后再次触发提交按钮，它将起作用，所以我想知道为什么 submit() 方法在调用时不起作用这里。

您可以使用的一种方法是使用 ajax 发送表单（查看 jquery 中的post()），然后使用 window.location = "yourpage" 之类的内容重定向您的用户。

于 2013-05-13T11:40:53.397 回答
2

试试这种方式（jsFiddle）：

$(document).ready(function() {
    window.enterQueue=false;
    $("#signinform input:submit").on('click',function() {
        return getDialog(window.enterQueue);            
    });

    function getDialog(enterQueue){
        if(!enterQueue){
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: true,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        window.enterQueue=true;
                        $(this).dialog("close");
                        $("#signinform input:submit").trigger('click');
                    }
                }
            });
            return false;
        } else 
            return true;
    }

});

于 2013-05-14T07:25:31.610 回答
-1

我昨晚在 jquery 网站和大量 google-ing 的帮助下弄明白了。感谢你们俩的帮助以及为答案花费的时间。+ 1

这是我的解决方案：

<script type="text/javascript">

    $(document).ready(function() 
    {
        var Form = $("#signinform");
        $(function() 
        {
            $("#dialog-confirm").dialog(
            {
                resizable: false,
                autoOpen: false,
                dialogClass: "no-close",
                draggable: false,
                height: 320,
                width: 500,
                modal: true,
                buttons: 
                {
                    'Cancel': function() 
                    {
                        $(this).dialog("close");
                        Form.data("confirmProgress", false);
                    },
                    'Submit Information': function() 
                    {
                        Form.submit();
                        Form.data("confirmProgress", false);
                    }
                }
            });
        });
        Form.submit(function() 
        {
            if (!$(this).data("confirmProgress")) 
            {
                $(this).data("confirmProgress", true);
                $('#dialog-confirm').dialog('open');
                return false;
            } else {
                return true;
            }

        });
    });
    // Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
 $(document).on('click', "#Cancel", function(e)
    {
        e.preventDefault();
        var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
        $("#dialog-noconfirm").dialog(
        {
            resizable: false,
            dialogClass: "no-close",
            draggable: false,
            height: 320,
            width: 500,
            modal: true,
            buttons: 
            {
                "Cancel": function() 
                {
                    $(this).dialog("close");
                },
                "Go Back": function() 
                {
                    window.location.href = href;
                },
            }
        });
    });

</script>
于 2013-05-14T11:31:29.730 回答