3

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>
4

1 に答える 1

0

jQuery モーダルは、DOM 要素を複製して body タグの に配置することによって作成されます。これにより、有効な DOM 要素が作成され、クライアント側で正常に機能します。

ただし、asp.net コントロールがイベントを送信するには、フォーム タグ内にある必要があります (asp.net はフォーム タグを 1 つだけ作成します)。

解決策は、ダイアログを作成してから、要素をフォーム タグに戻すことです。

あなたの

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

に

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

その後、サーバーイベントは完全に発生するはずです。

于 2012-09-06T17:43:18.413 に答える