javascript cannot call methods on dialog prior to initialization attempted to call method 'option' in jquery 1.8.3

Question

I have a problem in opening dialog using, it keeps returning error :

javascript cannot call methods on dialog prior to initialization attempted to call method 'option' in jquery 1.8.3 Following is the code

var authFormDialog = $("#authentication-form");
var role = ['ROLE_SUPERVISOR'];
var defer = $.Deferred();

authFormDialog
.removeData(AUTH_DATA_KEYS)
.data('roles', role)
.data('interventionType', interventionType)
.data('defer', defer)
.dialog('option', 'title', action + ' - SPV')
.dialog('open');

and following is the html code:

<div id="authentication-form" title="Authentication" class="container-login dialogFont" style="width: 100px; display: none;">
    <div class="auth-form dialogFont">
        <!-- <img class="img" src="/poseuser/core.static/images/logo_store.png" style="width: 70%; display: block; margin-left:auto; margin-right: auto;"/> -->
        <div>
            <span id="authFormMsg" class="error-message" style="text-align: center; padding-top: 20px;"></span>
        </div>
        <form id="authenticationForm" onsubmit="return false;" autocomplete="off">
            USERNAME&nbsp;<span id="errorauthFormUsername"></span>
            <input name="authFormUsername" type="text" id="authFormUsername" class="auth-textBox" autocomplete="off"/>
            PASSWORD&nbsp;<span id="errorauthFormEmpPin"></span>
            <input name="authFormEmpPin" type="password" id="authFormEmpPin" class="auth-textBox" autocomplete="off" maxlength="20"/>
            <span style="padding: 40px">
                <button id="authFormBtn">ENTER</button>
            </span>
        </form>
    </div>
</div>

any idea how to solve this?