个人中心
gpt4 book ai didi

javascript - 表单提交给自身后如何处理jQuery错误

转载 作者：行者123 更新时间：2023-11-30 05:33:41 24 4
gpt4 key购买 nike

我有一个使用 jQuery 1.11.1、jQuery 验证插件 1.12.1、jQuery Mobile 1.4.2 和 ColdFusion 9.0.1 的页面。 (虽然我认为 ColdFusion 部分与我的问题无关。)在这个页面上，我有一个提交给自身以进行服务器端验证的表单。最初，在第一次加载页面时，表单和验证都按我预期的方式工作。如果提交的表单带有有效输入，它也会按我的预期工作。但是，如果表单提交时输入无效，那么我会尝试展开折叠的可折叠项以显示验证错误消息。这部分不起作用 - 可折叠物未展开并抛出以下 JavaScript 错误:

cannot call methods on collapsible prior to initialization; attempted to call method 'expand'

一旦我收到此错误，其他功能也会停止工作。例如，取消按钮不能再折叠可折叠项。验证消息不再有我的自定义 UI 和回退到默认值等。我假设我需要以某种方式绑定(bind)/延迟我尝试在页面重新加载时将可折叠内容扩展到某些东西，但是什么？

下面是我的问题的一个独立示例(用 CFML 编写)。请注意，在第一次加载时，您可以使用取消按钮展开可折叠项和折叠可折叠项。如果您尝试在不输入任何文本的情况下提交表单，还要注意 UI。然后输入一些文本并提交表单。重新加载后，您会看到可折叠项最初并未展开。您还将看到“取消”按钮不再折叠可折叠项，并且验证消息的 UI 已恢复为默认值。

<cftry>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    </head>
    <body>
        <div id="example" data-role="page" data-theme="b">
            <div id="head" data-role="header" data-position="fixed">
                <h1 align="center">Example Header</h1>
            </div>
            <div role="main" class="ui-content">
                <div data-role="collapsible" data-content-theme="c" data-collapsed="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
                    <h3>Show Info Here</h3>
                    <p>Some additional information here...</p>
                    <cfif IsDefined("form.subcc")>
                        <p>CC form submitted. Form text = [<cfoutput>#form.ccname#</cfoutput>]</p>
                    </cfif>
                    <cfif IsDefined("form.subeft")>
                        <p>EFT form submitted. Form text = [<cfoutput>#form.eftname#</cfoutput>]</p>
                    </cfif>
                    <p>Choose one of the payment methods below.</p>
                </div>
                <div data-role="collapsible-set" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
                    <div id="cc-payment" data-role="collapsible">
                        <h3>Credit Card Payment</h3>
                        <p>cc info here</p>
                        <div class="payment-form">
                            <form data-ajax="false" id="frmpaycc" method="post" action="">
                                <div class="ui-field-contain"><label for="ccname" class="ui-hidden-accessible">Text: </label> <input class="txtdata" type="text" id="ccname" name="ccname" size="20" maxlength="60" alphanumericwithbasicpunc="true" required="required" placeholder="Enter Text for CC" /></div>
                                <p align="center">
                                    <input type="submit" id="subcc" name="subcc" value="Make Payment" data-inline="true" data-mini="true" data-theme="b" />
                                    <a id="cancc" href="#" data-role="button" data-inline="true" data-mini="true">Cancel</a>
                                </p>
                            </form>
                        </div>
                    </div>
                    <div id="eft-payment" data-role="collapsible">
                        <h3>EFT Payment</h3>
                        <p>eft info here</p>
                        <div class="payment-form">
                            <form data-ajax="false" id="frmpayeft" method="post" action="">
                                <div class="ui-field-contain"><label for="eftname" class="ui-hidden-accessible">Text: </label> <input class="txtdata" type="text" id="eftname" name="eftname" size="20" maxlength="60" alphanumericwithbasicpunc="true" required="required" placeholder="Enter Text for EFT" /></div>
                                <p align="center">
                                    <input type="submit" id="subeft" name="subeft" value="Make Payment" data-inline="true" data-mini="true" data-theme="b" />
                                    <a id="caneft" href="#" data-role="button" data-inline="true" data-mini="true">Cancel</a>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    <cfif IsDefined("form.subcc")>
                        $("#cc-payment").collapsible("expand");
                    </cfif>
                    $("#cancc").click(function(){
                        $("#cc-payment").collapsible("collapse");
                    });
                    $("#frmpaycc").validate({
                        errorElement: "div",
                        submitHandler: function(form) {
                            $('#subcc').attr('disabled', 'disabled');
                            $('#frmpaycc,#frmpayeft').hide();
                            $("#msg-pay-proc").popup("open");
                            form.submit();
                        }
                    });

                    <cfif IsDefined("form.subeft")>
                        $("#eft-payment").collapsible("expand");
                    </cfif>
                    $("#caneft").click(function(){
                        $("#eft-payment").collapsible("collapse");
                    });
                    $("#frmpayeft").validate({
                        errorElement: "div",
                        submitHandler: function(form) {
                            $('#subeft').attr('disabled', 'disabled');
                            $('#frmpaycc,#frmpayeft').hide();
                            $("#msg-pay-proc").popup("open");
                            form.submit();
                        }
                    });
                </script>
                <div id="msg-pay-proc" class="ui-content" data-role="popup" data-theme="e">
                    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                    <p>Processing your payment. Please be patient and do not navigate away from this page until a message is returned.</p>
                </div>
            </div>
            <div id="foot" data-role="footer" data-position="fixed" data-mini="true">
                <h1 align="center">Example Footer</h1>
            </div>
        </div>
    </body>
</html>
<cfcatch type="any">
    <cfdump var="#cfcatch#" />
</cfcatch>
</cftry>

我认为问题在于页面正在通过 jQuery Mobile 自行重新加载，并且现有 ID 可能在 DOM 中相互冲突。错误消息是明确的，但我不确定如何延迟或绑定(bind)我扩展可折叠对象的尝试以使其通过。

最佳答案

任何 JS/jQuery 代码都应该包含在 pagecreate 事件中。它等同于 .ready()，但是，它在创建页面片段时在页面片段上发出，并且每页仅一次。

此外，此事件可以委托(delegate)绑定(bind)到基于其id 或任何其他选择器 的特定页面。

$(document).on("pagecreate", ".selector", function () {
  /* code */
});

关于javascript - 表单提交给自身后如何处理jQuery错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25311856/

24 4 0
文章推荐： javascript - 在 Controller 中调用父操作
文章推荐： c++ - OpenMP - 二叉树
文章推荐： c++ - 在释放互斥锁之前或之后通知消费者线程？
文章推荐： javascript - Adobe DPS Web 查看器身份验证
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com