Dialog Box popup issue after using datatables Editor

ghostrider

I have a web applications (struts2+hibernate). I have a datatable Editor used for displaying the data. I have created buttons and calling a function on 'action' parameter. Every thing work fine except the JQuery Dialog box. No error? no popup

Here is my code::

<div style="width:700px;">
    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Description</th>
                <th>Category</th>
                    <th>Payee</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Income ID</th>
                </tr>
            </thead>
        </table>
        <div id="dialog-confirm" title="Confirm Action?">
        This record will be permanently deleted. Are you sure?
    </div>
</div>

   <script src="jquery/external/jquery/jquery.js"></script>
   <script src="jquery/jquery-ui.js"></script>
   <script src="jquery/dt_editor/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
   <script src="jquery/dt_editor/DataTables-1.10.10/js/jquery.dataTables.min.js" ></script>
   <script src="jquery/dt_editor/Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
   <script src="jquery/dt_editor/Select-1.1.0/js/dataTables.select.min.js" ></script>
   <script src="jquery/dt_editor/Editor-1.5.4/js/dataTables.editor.min.js" ></script>
    var removerRowID;
  $(document).ready(function() {

 $( "#dialog-confirm" ).hide();


       var oTable=new $('#example').DataTable( {
       dom: "Bfrtip",
      "ajax": "refreshIncomeData",
      serverSide: true,
      "aoColumns": [
                  {"mData":"description","bSearchable": true,"bSortable": true},
                  {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
                  {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
                  {"mData":"transactionDate","bSearchable": false,"bSortable": false},
                  {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": true},
                  {"mData":"incomeID","visible":false}],
       select: true,
       buttons: [
        { "text": "New", action: function(){} },
        { "text": "Edit",   action: function(){} },
        { "text": "Remove", action: function(){

            $( "#dialog-confirm" ).dialog({
                width: 400,
                buttons: [
                    {
                        text: "OK",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
              });
           }}
       ]
       } );

         $("#example").on('click','tr',function(){
   removerRowID=oTable.row(this).index();
       });
     } );