Question

I want to use the same jquery ui dialog box for mulitple purpose.

In this case I have a datagrid with checkbox on every row. User can delete the rows which he checked by pressing a button (delete). Whenever button is pressed, a jquery ui dialog box is shown (confirm box) containing message like do u want to delete ? Yes or No

But when there are no checkbox checked and the user presses the delete button, I want to display jquery ui dialog box with different title and msg (No rows selected) in the content. How can I do this ?

Currently my code looks like this:

 $(document).ready(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                width:"400px",
                modal: true,
                resizable: true,
                buttons: [
                    {
                        text: "Yes",
                        click: function() {
                            $('#form_list_action').submit();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            $( "#action-delete" ).on('click', function(event) {
                event.preventDefault();
                $( "#dialog" ).dialog( "open" );

            });



<div id="dialog" title="Delete Selected Items">
 <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">   </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

 <a href="" class="action-delete" id="action-delete">Delete</a>

Answer 1

I am using this function to create dynamically a dialog box when I need one.

function showPopup(title,url,height,width,data,showCloseBtn)
{
    showCloseBtn = showCloseBtn || false;
    height = height || 'auto';
    width = width || 'auto';

    //Create popup container if needed or remove content
    if($('#popup').length == 0)
        $('body').append('<div id="popup"></div>');
    else
        $('#popup').empty();

    //Reset dialog widget if needed
    try{$('#popup').dialog('destroy');}catch(e){}

    if(showCloseBtn)
        btnCode = {"Fermer": function(){$( this ).dialog( "close" );}}
    else
        btnCode = null;

    //Load content if the data provided is html code
    if(url.search('<') >= 0)
    {
        $('#popup').html(url);
        $('#popup').dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
    }
    else
    {
        var data = data || {};
        //Load data from url
        $('#popup').load(url,data,function(){
            $(this).dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
        });                           
    }    
}