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?

Dana Benson · Accepted Answer · 2012-04-02 21:51:34Z

4

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:

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);
return false from the delete event handler
wrap "$('.lauchdelete').click()" in a setTimeout of 0:

setTimeout(function(){ $('.lauchdelete').click(); }, 0);
instead of calling .click(); call __doPostBack directly:

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

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

__doPostBack(delBtnUniqueName);

edited Apr 2, 2012 at 21:51

answered Apr 2, 2012 at 21:46

Dana Benson

9647 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kamui Over a year ago

Thank you, the wrap "$('.lauchdelete').click()" in a setTimeout of 0 got it working in the end.

Community · Accepted Answer · 2017-05-23 12:27:49Z

1

You can get help from here after using appendto

Example code

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

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Apr 2, 2012 at 17:48

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

Comments

Dennis Rongo · Accepted Answer · 2012-04-02 17:48:10Z

0

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'));
    }
}

answered Apr 2, 2012 at 17:48

Dennis Rongo

4,6111 gold badge28 silver badges26 bronze badges

1 Comment

kamui Over a year ago

the output is [input#ctl00_ContentPlaceHolder1_lauchdelete.lauchdelete]

Collectives™ on Stack Overflow

JQuery UI Modal Dialog triggering ASP.Net updatepanel control

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related