Call Dialog.Modal with error - php

Question

I think I'm missing something here.
in Script:
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({ width:150, height:150, resizable:false, draggable:false, autoOpen:true, modal:true });
I use AJAX to call for Data, when the pull detect an error, I want it to pop up an dialog.modal, but it just won't do so. I think I'm missing something here.
in PHP:
case ($amt > $total_storage):
echo "<div id='dialog-modal' class='ui-dialog-content ui-widget-content' title='Error!'><p>Not enough Storage!</p></div>"; (this one don't work)
echo "Test Error"; (this one works)
break;
I tested with echo and it does display "Error" but not the dialog.modal. I just want it to autoOpen when it detects an error.
New Workable Version:
PHP:
case ($amt > $total_storage):
echo ":err:<p>Not enough Storage!</p></div>";
break;
JS:
function CitySell(a){
$.ajax({
beforeSend: function(){ $(".Bags").attr("disabled", "disabled"); },
url: "DataPull.php?get=CitySell&SSIDD="+$('.SDI_'+a).val()+"&SSAmD="+$('.STS_'+a).val(),
success: function(data){
$('#Listing').html(parseScript(data));
if(data.substr(0,5) === ':err:'){
$('<div id="dialog-modal" class="ui-dialog-content ui-widget-content" title="Error!">').html(data.substr(5)).dialog({width:250, height:150, resizable:false, draggable:false, autoOpen:true, modal:true});
$('.Bags').removeAttr("disabled");
} else {
Listing();
CommonUpdates();
}
}
})
}

Answer 1

Wrap you js code into a function
function open_dialog(error_text)
{
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal')
.html(error_text)
.dialog({ width:150, height:150, resizable:false, draggable:false, autoOpen:true, modal:true });
}
and make a function call at the onSuccess method
$.get(url, function(result){ open_dialog(data); })
Though you'll have to distinguish between cases when the response indicates an error and when it's not. You could add some characters to the response to see whether it's an error or not:
case ($amt > $total_storage):
echo ":err:<p>Not enough Storage!</p></div>";
break;
$.get(url, function(result){ if(data.substr(0,5) === ':err:') open_dialog(data); else alert(data); })

Answer 2

You are trying to return the html for the dialog which is what is likely causing problems, since it doesn't exist when you try to initiate the dialog
If you return your data as json it makes it much simpler
echo json_encode( array('status'=>'error', 'message'=>'Your error message') );
Then in success callback of ajax:
$.get( url, function(data){
if( data.status=='error'){
$('<div id="dialog-modal">').html( data.message).dialog( // dialog options)
}
},'json');