title: JQuery UI Modal Dialog triggering ASP.Net updatepanel control
body: <p>I have a number of serverside generated HyperLinks</p>
  
  <pre><code> &lt;a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_1" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"&gt;&lt;/a&gt;
   &lt;a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_2" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"&gt;&lt;/a&gt;
   &lt;a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"&gt;&lt;/a&gt;
   &lt;a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2424_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>A section to trigger the update </p>
  
  <pre><code> &lt;asp:HiddenField ID="delhiddenfield" runat="server" /&gt;
   &lt;asp:Button ID="lauchdelete" runat="server" Text="" OnClick="removeLink" CssClass="lauchdelete" style="display:none;" /&gt;
   &lt;div id="deleteconfirm" title="Are you sure?" style="display:none;"&gt;Are you sure you want to remove this image from this application?&lt;/div&gt;
  </code></pre>
  
  <p>A tiny bit of JQuery which call another function when any are clicked</p>
  
  <pre><code> var del = '&lt;%=delhiddenfield.ClientID %&gt;';
   $(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 &gt; 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");
                      }
                  }
              });
          }
      }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>    function triggerdel(event) {
          var caller = event.target || event.srcElement;
          // get the id vals
          var idsplit = caller.id.split("_");
          if (idsplit.length &gt; 2) {
              $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
              $('.lauchdelete').click();
              $('#' + del).val('');
          }
      }
  </code></pre>
  
  <p>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?</p>