Ajax displays div dialog in mvc view

Question

Pretty new to ajax.

So I have this div:

   <div id="authentication" title="Authentication" >
    <b>Please Generate a new token to continue!</b>
    <br /><br />
    <table>
        <tr>
            <td>Token:</td>
            <td><input type="text" id="txtToken"/></td>
        </tr>
        <tr>
            <td></td>
            <td><label id="lblError"></label></td>
        </tr>
    </table>
 </div>

which is not being displayed on my mvc view because it is a being used as a dialogue box by Ajax code below:

$('#authentication').dialog({
    autoOpen: true,
    width:500,
    resizable: false,
    beforeclose : function() { return false; },
    title: 'Authentication',
    modal: true,
    buttons: {
        "Cancel": function () {
            window.location.replace("@Url.Action("Index", "Home")");
        },
        "Submit": function () {
            var token=$('#txtToken').val();
            var dlg = $(this);
            $.ajax({
                type: 'POST',
                data: { 'token': token},
                dataType: 'json',
                url: '@Url.Action("CheckNewToken", "Account")',
                success: function (result) {
                    if(result==true)
                    {
                        window.parent.jQuery('#authentication').dialog('destroy');
                    }
                    else{
                        $('#lblError').html("Incorrect credentials. Please try again");
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) { 
        }
            });
        }
    }
});

However when the codes goes to success and result == result, the dialog box is destroyed but the div (dialog box) is then being displayed on my view which I don't want. What am I doing wrong?

Answer 1

Close the dialog and then destroy. This will hide the dialog completely and then destroy its dialog features. if you just do .dialog('destroy') it will just remove the dialog functionality completely and display the element as is on the page but it wont hide.

success: function (result) {
                    if(result==true)
                    {
                        $('#authentication').dialog('close').dialog('destroy');
                    }
                    else{
                        $('#lblError').html("Incorrect credentials. Please try again");
                    }
                },

Another thing is beforeclose : function() { return false; }, you are returning false which will prevent the close event from happening. it should be beforeClose though you can remove it safely.

if the above doesnt work another option to remove the div is by subscribing to close event:-

   $('#authentication').dialog({
    autoOpen: true,
    width:500,
    resizable: false,
    title: 'Authentication',
    modal: true,
    close:function(){

        $(this).dialog('destroy').hide();
     },
    buttons: {
        "Cancel": function () {

        },
        "Submit": function () {
            var token=$('#txtToken').val();
            var dlg = $(this);
           $('#authentication').dialog('close');
        }
    }
});