I have a dialog window where I want to display a confirm dialog when clicking Cancel. To achieve this, I am creating a div element with some text that should be shown in the confirm dialog. However, the issue I'm facing is that the text intended for the confirm window is appearing in the modal window instead. How can I resolve this problem?
HTML:
<div>
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
<div id="dialog-confirm" title="Close the dialog">
<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>
</form>
</div>
JQuery:
$(function () {
$('#modalDialog').dialog({
modal: true,
height: 450,
width: 350,
position: 'center',
buttons: {
Save: function() { //submit
$( this ).dialog( "close" );
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
OK: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
}
});
return false;