jQuery Modal Dialog is not working with postback

Question

I'm having issues with the jQuery modal dialog. In the code below, I'm opening a dialog, and then using the buttons to return a value to a field in the form (id="form1") in the parent window. Then I perform a click on the ASP button, and finally I close the dialog. The result is that a user can choose a coupon code and have it automatically applied by submitting the form that applies the coupon code on the parent window.

I can't submit the form through the submit function, I need to click the button to make this work.

The code works fine in non-modal dialogs. Adding the modal attribute unlinks the dialog from the form, I assume, so I've searched this site and added a line to append the dialog to the form - this didn't have any effect. Would love some help!

Full disclosure, I'm not an ASP guy - and the ASP is controlled by our vendor. I can only access the front end of this site.

<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 modals are created by cloning the DOM elements and placing them at the of the body tag. This create valid DOM elements and it works fine on the client side.

However for asp.net controls to send events, they must be inside the form tag(asp.net creates only one form tag).

The solution is to create the dialog and then place the elements back into the form tag.

Change your

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

To

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

Your server events should now fire perfectly after that.