In my post last week I initially tried using the jQuery ThickBox plugin to popup a confirmation dialog from an ASP.NET ListView item. I had some trouble at the time getting it to work how I wanted so I moved on to using the SimpleModal plugin. This weekend I decided to go back and try the ThickBox plugin again.

Demo | Download

End Product:

The solution I came up does not require any code in the code behind. I just used some jQuery and the HTML mark up from Matt Berseth's post where he did much the same thing using ASP.Net 3.5 SP1 Dynamic Data features. One nice thing about this solution is that you could have multiple ListViews on a page with delete buttons and things would work without anymore code.

jQuery:

<script type="text/javascript">
    $(document).ready(function() {

        $(".deleteRow").each(function() {
            var a = $(this).find(".thickbox");
            var popup = $(this).find(".confirmContainer").attr("id");
            var yesBtn = $(this).find(".yesBtn");
            var deleteCommand = $(this).find(".deleteCommand");
            
            //Add the thickbox to the links
            a.attr("href", "#TB_inline?height=90&width=350&inlineId=" + popup);            
            
            //Invoke the hidden button that has the delete command
            yesBtn.click(function() {
                deleteCommand.click();
            });            
        });
    });
                            
</script>

One thing to keep in mind is that your reference to the ThickBox JavaScript does need to come later than the jQuery above otherwise things won't work.

HTML:

<td class="deleteRow"> 
        <!-- link for displaying the thickbox delete confirmation -->                            
        <asp:HyperLink ID="btnDelete" runat="server" 
            CssClass="thickbox"
            ToolTip="Delete Confirmation">
            <asp:ImageButton ID="ImageButtonDelete" runat="server" ImageUrl="~/_assets/img/delete.png" />
        </asp:HyperLink>                            
        
        <!-- Hidden command button that actually issues the delete -->
        <asp:Button ID="deleteCommand" runat="server" CssClass="deleteCommand" 
            CausesValidation="false" 
            CommandName="Delete" 
            style="display:none" 
        />
        
        <!-- The markup for the confirmation dialog -->
            <div class="confirmContainer" style="display:none" runat="server" id="confirm">
            <div class="confirm">                                    
                <div class="message">
                    <%# 
                        string.Format("Are you sure you want to delete <em>{0}</em>?", 
                        Eval("contactname")) 
                    %>
                </div>
                <div class="commands">
                    <!-- I dynamically set the OnClientClick in the codebehind -->
                    <asp:Button ID="yes" runat="server" CssClass="yesBtn" 
                        CausesValidation="false"
                        Text="Yes" 
                    />
                    <!-- remove the thickbox when they hit cancel -->
                    <asp:Button ID="no" runat="server" 
                        CausesValidation="false" 
                        Text="No" 
                        OnClientClick="tb_remove(); return false;" 
                    />
                </div>
            </div>
            </div>
</td>

I am still having one issue with the way the plugin is working. If you click anywhere on the page the dialog will close. If I set the dialog to be truly modal, then I loose the title bar in the dialog which I really don't want. For now I can live with this. If anyone knows how to fix it please let me know.

Be sure to checkout the demo and download the solution to try it out yourself. Please let me know if you improve upon my solution in anyway.

     [dzone]