TypeError: $(...).dialog is not a function

TypeError: $(...).dialog is not a function

I am facing an issue when trying to display a div as dialog box, getting the error has 
TypeError: $(...).dialog is not a function

Wondering if i am not getting the div available i even tried to append it before the dialog function called,

Still facing the issue, Please guide...

function RowClickBillListBoleto(arg1,arg2,arg3){
if( ! $('#boleto-message').length ) {
alert("Length is zero");
     $('body').append('<div style="display:none"><div id="boleto-message" title="Boleto document is being created"><p>Boleto documents are being created for the selected invoices.<br/>The Boleto documents are ready when you see the boleto <img name="Image123" border="0" src="<webbase:themePath uri='images/boleto.png'/>"/> icon next to the pdf <img border="0" src="<webbase:themePath uri='img/view.gif'/>"/> icon.</p><hr/><p>Os boletos est&#227;o sendo criados para as faturas selecionadas.<br/>Os boletos estar&#227;o prontos quando voc&#234; visualizar o &#237;cone do boleto <img name="Image123" border="0" src="<webbase:themePath uri='images/boleto.png'/>"/> ao lado do &#237;cone do PDF <img border="0" src="<webbase:themePath uri='img/view.gif'/>"/>.</p></div></div>');
}
$( "#boleto-message" ).dialog({
            height:280,
            width:470,
minWidth: 470, 
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                    RowClickBillList(arg1,arg2,arg3);
                },
Cancel: function() {
$( this ).dialog( "close" );
}
            }
        }); 
$('#boleto-message').css("height", 180); 
}