UI Dialog closes as soon as opened in all browser other than IE

UI Dialog closes as soon as opened in all browser other than IE

Hi,
 
I've been implementing the JQuery UI Dialog plugin into my system and now have a modal form that works perfectly in IE.  However, in all other browsers (FireFox, Opera, Chrome, Safari) ir closes again, almost as soon as it has been opened.  Can anybody please shed any light on why this might be happening?
 
My code follows:
 

  1. <script type="text/javascript">

    $(

    function() {

    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!

    $(

    "#NegotiatorDialog").dialog("destroy");

    var firstname = $("#txtFirstName"),

    lastname = $(

    "#txtLastName"),

    nickname = $(

    "#txtNickname"),

    allFields = $([]).add(firstname).add(lastname).add(nickname),

    tips = $(

    ".validateTips");

    function updateTips(t) {

    tips

    .text(t)

    .addClass(

    'ui-state-highlight');

    setTimeout(

    function() {

    tips.removeClass(

    'ui-state-highlight', 1500);

    }, 500);

    }

    CheckAlpha =

    function(name, desc, allowempty) {

    var regex = /^[A-Za-z\-\']+$/;

    if (!(name.val() == "")) {

    if (regex.test(name.val())) {

    return true;

    }

    else {

    updateTips(desc +

    " must be alphabetic, without spaces.");

    return false;

    }

    }

    else {

    if (allowempty) {

    return true;

    }

    else {

    updateTips(desc +

    " cannot be empty");

    return false;

    }

    }

    }

    BuildNegUrl =

    function() {

    var url = "/MvcEditor/Views/AutoComp/AutoCompleteHandler.ashx";

    url = url +

    "?agentid=" + $(document.getElementById('hdnAgentID')).attr('value');

    url = url +

    "&firstname=" + firstname.val();

    url = url +

    "&lastname=" + lastname.val();

    url = url +

    "&nickname=" + nickname.val();

    url = url +

    "&savename=yes";

    return url;

    }

    SaveNewNegotiator =

    function(picker, onSuccess) {

    $.ajax({

    url: BuildNegUrl(),

    error:

    function(XMLHttpRequest, textStatus, errorThrown) {

    updateTips(

    "Error with save of new negotiator, please try again");

    },

    success:

    function(data) {

    if (data == "Negotiator Saved") {

    $(picker).dialog(

    'close');

    }

    if (data == "Negotiator already exists") {

    updateTips(

    "Negotiator name already exists - please enter a unique nickname and try again");

    }

    }

    });

    }

    $(

    "#NegotiatorDialog").dialog({

    autoOpen:

    false,

    resizable:

    false,

    width: 350,

    modal:

    true,

    buttons: {

    'Create a new negotiator': function() {

    var bValid = true;

    bValid = bValid && CheckAlpha(firstname,

    "First Name", false);

    bValid = bValid && CheckAlpha(lastname,

    "Last Name", false);

    bValid = bValid && CheckAlpha(nickname,

    "Nickname", true);

    if (bValid) {

    SaveNewNegotiator(

    this);

    }

    },

    Cancel:

    function() {

    $(

    this).dialog('close');

    }

    },

    close:

    function() {

    allFields.val(

    '').removeClass('ui-state-error');

    }

    });

    $(

    '#btnCreateNegotiator')

    .click(

    function() {

    $(

    '#NegotiatorDialog').dialog('open');

    });

    });

    </script>

    <

    div id="NegotiatorDialog" title="Create new negotiator" style="display:none;">

    <p class="validateTips">First and Last Name are required fields</p>

    <form>

    <table cellpadding="0" cellspacing="0" border="0" width="100%">

    <tr valign="middle">

    <td align="left" width="30%">

    <label id="Label111">First Name : </label>

    </td>

    <td align="left" width="67%">

    <input type="text" name="txtFirstName" id="txtFirstName" value="" />

    </td>

    </tr>

    <tr valign="middle">

    <td align="left" width="30%">

    <label id="Label112" style="width:150px">Last Name : </label>

    </td>

    <td align="left" width="67%">

    <input type="text" name="txtLastName" id="txtLastName" value="" />

    </td>

    </tr>

    <tr valign="middle">

    <td align="left" width="30%">

    <label id="Label113" style="width:150px">Nickname : </label>

    </td>

    <td align="left" width="67%">

    <input type="text" name="txtNickname" id="txtNickname" value="" />

    </td>

    </tr>

    </table>

    </form>

    </

    div>

    <div style="float:right;">

    <button id="btnCreateNegotiator">Create New Negotiator</button>

    </div>

 
I would appreciate any help that anyone can offer.
 
Thanks in advance,
 
Adrian