submitHandler: triggering incorrect dialog - php

Question

I am trying to debug a problem I have with submitHandler: function. What is happening, in firebug it is displaying the correct error message based on the true handle in the submitHandler. But, it is firing the success dialog and not the error dialog. I am fairly new to jquery and ajax so I have proably got some brackets or commas in the wrong place.
I would be grateful if someone could point out my error. Thanks
submitHandler: function() {
if ($("#USRboxint").valid() === true) {
var data = $("#USRboxint").serialize() + '&submit=true';
$.post('/domain/users/box.php', data, function(msgs) {
if (msgs.boxerror === true) {
var $dialog = $('<div id="dialog"></div>').html('<br /><b>Your New entry was NOT SUBMITTED.<br /><br />Thank you.</b>');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'New entry Unsuccessfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
}
else
var messageOutputs = '';
for (var i = 0; i<msgs.length; i++){
messageOutputs += msgs[i].box+' ';
}
$("#USRboxint").get(0).reset();
var $dialog = $('<div id="dialog"></div>').html('<br /><b>Your New entry was successfully submitted.<br /><br />Thank you.</b>');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'New entry successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
//$("#frmreport").get(0).reset();
}, 'json');
}
},
success: function(msgs) {
}
PHP Code
<?php
$boxerrortext = 'No duplicates';
$array = split('[,]', $_POST['box_add']);
if (isset($_POST['submit'])) {
if ($box == 'DEMO111')
{
$error = array('boxerror'=>$boxerrortext);
$output = json_encode($error);
echo $output;
return;
}
else
$form = array();
foreach ($array as $box) {
// if (empty($box)) {
// $error = array('boxerrortext'=>$boxerrortext);
// $output = json_encode($error);
// echo $output;
// }
// else
// {
$form[] = array('dept'=>$dept,
'company'=>$company,
'address'=>$address,
'service'=>$service,
'box'=>$box,
'destroydate'=>$destroydate,
'authorised'=>$authorised,
'submit'=>$submit);
}
}
$result=json_encode($form);
echo $result;
?>

Answer 1

Creating dialogs each time is not efficient, better to initialize the dialogs on document ready:
$(function(){
$('<div id="dialog_error"></div>').html('<br /><b>Your New entry was NOT SUBMITTED.<br /><br />Thank you.</b>').dialog({
autoOpen: false,
modal: true,
title: 'New entry Unsuccessfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('<div id="dialog_success"></div>').html('<br /><b>Your New entry was successfully submitted.<br /><br />Thank you.</b>').dialog({
autoOpen: false,
modal: true,
title: 'New entry successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
});
Then open them when you need them:
submitHandler: function () {
if ($("#USRboxint").valid() === true) {
var data = $("#USRboxint").serialize() + '&submit=true';
$.post('/domain/users/box.php', data, function (msgs) {
if (msgs.boxerror === true) {
$("#dialog_error").dialog("open");//Open error dialog
} else var messageOutputs = '';
for (var i = 0; i < msgs.length; i++) {
messageOutputs += msgs[i].box + ' ';
}
$("#USRboxint").get(0).reset();
$("#dialog_success").dialog("open");//Open success dialog
//$("#frmreport").get(0).reset();
}, 'json');
}
}

Answer 2

You should add braces around the code for the else-statement, or else only the first line is is part of the else block, and all the lines after it are executed no matter what.
Change this:
else
var messageOutputs = '';
To this:
else {
var messageOutputs = '';
// Other lines that belong in the else block.
}
I disagree with Wilmer, but you should properly clean up the dialog when it is closed. Since you create the div just to display the dialog once, you should remove it when the dialog is closed. You can do this by adding the following dialog option:
close: function() { $(this).dialog('destroy').remove(); },