JQuery UI Modal Dialog triggering ASP.Net updatepanel control

Question

I have a number of serverside generated HyperLinks

 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_1" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_2" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2424_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>

A section to trigger the update

 <asp:HiddenField ID="delhiddenfield" runat="server" />
 <asp:Button ID="lauchdelete" runat="server" Text="" OnClick="removeLink" CssClass="lauchdelete" style="display:none;" />
 <div id="deleteconfirm" title="Are you sure?" style="display:none;">Are you sure you want to remove this image from this application?</div>

A tiny bit of JQuery which call another function when any are clicked

 var del = '<%=delhiddenfield.ClientID %>';
 $(function(){
     $('.APMySlides_unlinkImage').click(function (event) { triggerdel(event); });
 });
 function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $("#deleteconfirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete": function () {
                        // this section is supposed to trigger the update
                        $('.lauchdelete').click();
                        $('#' + del).val('');
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }

If I put a OnClientClick="alert('woo lauchdelete clicked')" into the launchdelete button it does trigger but my code behind does not call. However if I take out the modal dialog like so:

    function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $('.lauchdelete').click();
            $('#' + del).val('');
        }
    }

The code functions correctly, and triggers the code behind. The only difference I can see is the dialog control, but why? Is there any way to get the control to trigger as expected, with the modal dialog delete button being pressed?

Answer 1

You should make sure the delete button is within the form tag after the dialog is opened. jQuery UI likes to dump dialog content at the end of the body tag, which would put it's content outside of the form tag. As a result if click is called on an element outside of the form tag it won't trigger a postback event.

some things you could try:

1. inspected the dom after the dialog is opened. Is the delete button inside or outisde the form tag? if it is outside that is your problem. detach and then re-attach the dialog to be inside the form tag:

   var $d = $('#deleteconfirm').detach();

   $('form').append($d);

2. return false from the delete event handler

3. wrap "$('.lauchdelete').click()" in a setTimeout of 0:

   setTimeout(function(){ $('.lauchdelete').click(); }, 0);

4. instead of calling .click(); call __doPostBack directly:

   var $deleteButton = $('.launchDelete');

   var delBtnUniqueName = $deleteButton.attr('name');

   __doPostBack(delBtnUniqueName);

Answer 2

You can get help from here after using appendto

Example code

$("#deleteconfirm").parent().appendTo($("form:first")); 

Answer 3

Everything looks OK. Can you console out the object to see if it's finding it when you hit the button?

buttons: {
    "Delete": function () {
        // What's the output here?
        console.log($('.lauchdelete'));
    }
}