3

我在使用 jQuery 模式对话框时遇到问题。在下面的代码中，我打开一个对话框，然后使用按钮将值返回到父窗口中表单 (id="form1") 中的字段。然后单击 ASP 按钮，最后关闭对话框。结果是用户可以选择优惠券代码并通过在父窗口上提交应用优惠券代码的表单来自动应用它。

我无法通过提交功能提交表单，我需要单击按钮才能完成这项工作。

该代码在非模态对话框中运行良好。我假设添加 modal 属性会取消对话框与表单的链接，所以我搜索了这个站点并添加了一行以将对话框附加到表单 - 这没有任何效果。希望得到一些帮助！

完全披露，我不是 ASP 人 - ASP 由我们的供应商控制。我只能访问这个网站的前端。

<script>
    $(document).ready(function() {
        $("#couponDialog" ).dialog({
            autoOpen: false,
            modal: true,
            width: 600,
            height: 400,
            show: 'drop',
            hide: 'drop'
        });

        $("#couponDialog").parent().appendTo($("form#form1"))

        // Open the dialog on click
        $('#lnk_needCoupon').click(function() {
            $('#couponDialog').dialog('open');
        });

        // Apply coupon code to form field(s), submit form, close dialog
        $('#apply_1').click(function() {
            $('#mainSiteContent_MainContent_basketForm_discount_code').val("code1234");
            $('#mainSiteContent_MainContent_basketForm_ApplyDiscountButton').click();
            $('#couponDialog').dialog('close');
        });

        $('#apply_2').click(function() {
            $('#mainSiteContent_MainContent_basketForm_discount_code').val("code5678");
            $('#mainSiteContent_MainContent_basketForm_ApplyDiscountButton').click();
            $('#couponDialog').dialog('close');
        });
    });
</script>

<p><a href="#" id="lnk_needCoupon"><i>Need a coupon?</i></a></p>

<div id="couponDialog" title="Need a Coupon?">
    <h3 style="margin: 8px">Please choose from one of the coupon codes below:</h3>

    <div style="background-color:#e9e9e9; margin: 10px; padding: 5px;"><b>Take 10% off of your entire order of $50 or more!</b> <a href="#" id="apply_1"><em class="btn"><em><i>Apply This Coupon</i><span class="btn-shop">&nbsp;</span></em></em></a></div>

    <div style="background-color:#e9e9e9; margin: 10px; padding: 5px;"><b>Save 10% off all apparel!</b> <a href="#" id="apply_2"><em class="btn"><em><i>Apply This Coupon</i><span class="btn-shop">&nbsp;</span></em></em></a></div>
</div>
4

1 回答 1

0

jQuery modals 是通过克隆 DOM 元素并将它们放置在 body 标记处来创建的。这会创建有效的 DOM 元素，并且在客户端可以正常工作。

然而，asp.net 控件要发送事件，它们必须在表单标签内（asp.net 只创建一个表单标签）。

解决方案是创建对话框，然后将元素放回表单标签中。

改变你的

$("#couponDialog").parent().appendTo($("form#form1"))

至

$('#couponDialog').parent().appendTo(jQuery("form:first"));

之后，您的服务器事件现在应该会完美触发。

于 2012-09-06T17:43:18.413 回答