jQuery-UI confirmation dialog in an ASP.NET DataList control

Question

I'm trying to get a jQuery-UI confirmation dialog to work when clicking a LinkButton in a DataList control, but nothing I've tried seems to work. The DataList is a list of file attachments to a database entry.

Here's the relevant section of the original .aspx file:

<ul id="attachmentList">
  <asp:DataList ID="dlAttachments" runat="server" DataKeyField="AttachID" RepeatLayout="Flow">
    <ItemTemplate>
      <li>
        <asp:HyperLink ID="hlViewAttach" runat="server" NavigateUrl='<%# CreateAttachURL(Convert.ToInt32(Eval("AttachID"))) %>'
          Text='<%# Eval("Description").ToString() %>' Target="_blank" />
        <em>(</em><asp:Label ID="lblType" runat="server" Text='<%# GetFriendlyFileType(Eval("FileType").ToString()) %>' Font-Italic="True"></asp:Label>,
        <asp:Label ID="lblSize" runat="server" Text='<%# GetFriendlyFileSize(Convert.ToInt32(Eval("FileSize"))) %>' Font-Italic="True"></asp:Label><em>)</em>
        <asp:LinkButton ID="btnDelAttach" runat="server" OnClick="btnDelAttach_Click"
          OnClientClick="return ConfirmDeleteAttachment(this, 'Please confirm deletion', 'Are you sure you wish to delete this attachment?');">DELETE</asp:LinkButton>
      </ItemTemplate>
    </asp:DataList>
  </ul>

Here's the HTML for the above as generated by ASP.Net:

<ul id="attachmentList">
<span id="ctl00_mainContent_wizNewIPR_dlAttachments">
  <li><a id="ctl00_mainContent_wizNewIPR_dlAttachments_ctl00_hlViewAttach" href="ViewAttachment.aspx?AttachID=260" target="_blank">Attachment description #1</a>
    <em>(</em><span id="ctl00_mainContent_wizNewIPR_dlAttachments_ctl00_lblType" style="font-style:italic;">Acrobat PDF document</span>,
    <span id="ctl00_mainContent_wizNewIPR_dlAttachments_ctl00_lblSize" style="font-style:italic;">74.61 kB</span><em>)</em>
    <a onclick="return ConfirmDeleteAttachment(this, 'Please confirm deletion', 'Are you sure you wish to delete this attachment?');"
      id="ctl00_mainContent_wizNewIPR_dlAttachments_ctl00_btnDelAttach" href="javascript:__doPostBack('ctl00$mainContent$wizNewIPR$dlAttachments$ctl00$btnDelAttach','')">DELETE</a></li>
</span>
</ul>

The jQuery function I'm using is a simple Yes/No dialog box to confirm deletion of the attachment. Here's the Javascript source:

//Confirm Delete Attachment dialog
var delConfirmed = false;
function ConfirmDeleteDialog(obj, title, dialogText) {
  if (!delConfirmed) {
    //add the dialog div to the page
    $('body').append(String.Format("<div id='confirmDeleteDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
    //create the dialog
    $('#confirmDeleteDialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      close: function(event, ui) { $('body').find('#confirmDeleteDialog').remove(); },
      buttons:
        {
          'Yes, delete it': function() {
            $(this).dialog('close');
            delConfirmed = true;
            if (obj) obj.click();
          },
          'No, keep it': function() {
            $(this).dialog('close');
          }
        }
      });
    }

    return delConfirmed;
}

I got this from http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog/ - it looks pretty simple and makes sense, but for some reason it isn't working for me. I never get the jQuery-UI confirmation dialog, it just triggers my button's OnClick event when I click the button.

I emailed Mark Mintoff (the developer who posted the code I used) and he pointed out that my function call ("ConfirmDeleteAttachment") was different than the name of the function ("ConfirmDeleteDialog"). How embarrassing! I don't know how many hours I wasted over a dumb mistake like this! — timbck2
– timbck2, Commented Jun 13, 2012 at 15:21

timbck2 · Accepted Answer · 2012-06-13 15:23:26Z

2

The answer was to make the function call in the OnClientClick event of the LinkButton ("ConfirmDeleteAttachment") match the name of the function I was calling! This was just a stupid typo.

Credit for this answer goes to the developer (Mark Mintoff, see his blog at http://markmintoff.com) whose code I used -- I emailed him and he pointed out my mistake.

answered Jun 13, 2012 at 15:23

timbck2

1,0763 gold badges15 silver badges38 bronze badges

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

Comments

TheGeekYouNeed · Accepted Answer · 2012-06-11 19:30:12Z

0

Remove the single quotes

[id$=btnDelAttach]

answered Jun 11, 2012 at 19:30

TheGeekYouNeed

7,5412 gold badges29 silver badges43 bronze badges

3 Comments

timbck2 Over a year ago

I still get "found undefined" in the alert() dialog. I also tried removing the single quotes around the attachID selector, e.g. "a[onclick*=" + attachID + "][id$=btnDelAttach] but that didn't work either.

TheGeekYouNeed Over a year ago

Can you post some of the rendered HTML

timbck2 Over a year ago

It's posted above, near the beginning of my question.

Collectives™ on Stack Overflow

jQuery-UI confirmation dialog in an ASP.NET DataList control

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related