Question

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

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

代码在非模态对话框中正常工作。我假设添加模态属性取消链接表单中的对话框，所以我搜索了这个网站并添加了一行来将对话框附加到表单 - 这没有任何效果。会爱一些帮助！

完全披露，我不是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>

Answer 1

jQuery模式是通过克隆DOM元素并将它们放在body标签上创建的。这创建了有效的DOM元素，它在客户端工作正常。

然而，对于asp.net控件发送事件，它们必须位于表单标记内（asp.net只创建一个表单标记）。

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

更改您的

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

要

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

此后，您的服务器事件应该完全启动。

jQuery模态对话框不支持回发

1 个答案: