I have a master page in which i included following css/js:

<script src=".11.0.min.js"></script>
<script src=".10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/jquery-ui.css"> 

this is my function which i used to open a popup, I am passing few parameter to load popup.

function planDataInputPopup(dialogId, formID, actionName, popHeight, popWidth, paramData) {

$(dialogId).dialog({
    autoOpen : true,width : popWidth,modal : true,dialogClass: 'no-close',
    draggable: true, resizable: true, position: [306,105],
    buttons : {
        "Create" : function() {
                if(document.getElementById("dropDownCounter").value != null){
                    document.getElementById("dropDownCounter").value=dropDownCounter+1;
                } 
                document.getElementById("inputPopupMode").value=true;
                if(paramData == 'false'){
                    submitInputFormUsingAjax(formID,actionName,"#inputFormMainDiv");
                }else{
                    submitMultipartFormUsingAjax(formID,actionName,"#inputFormMainDiv");
                }
                $(this).dialog("close");
                $(this).remove();
                //$(this).dialog("destroy");
        },

        Cancel : function() {
            $(this).dialog("close");
            $(this).remove();
            //$(this).dialog("destroy");
            return false;
        }
    },

    close : function() {
        $(this).dialog("close");
        $(this).remove();
        //$(this).dialog("destroy");
    }
});  }

Above code is working fine in local, bur when i deployed on development server i'm getting exception TypeError: $(...).dialog is not a function or sometime for "$(this).dialog("destroy")";

dialog should close but it is not happening on dev server.

what mistake i'm doing not getting.

Any help would be appreciated.

I have a master page in which i included following css/js:

<script src="http://code.jquery./jquery-1.11.0.min.js"></script>
<script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/jquery-ui.css"> 

this is my function which i used to open a popup, I am passing few parameter to load popup.

function planDataInputPopup(dialogId, formID, actionName, popHeight, popWidth, paramData) {

$(dialogId).dialog({
    autoOpen : true,width : popWidth,modal : true,dialogClass: 'no-close',
    draggable: true, resizable: true, position: [306,105],
    buttons : {
        "Create" : function() {
                if(document.getElementById("dropDownCounter").value != null){
                    document.getElementById("dropDownCounter").value=dropDownCounter+1;
                } 
                document.getElementById("inputPopupMode").value=true;
                if(paramData == 'false'){
                    submitInputFormUsingAjax(formID,actionName,"#inputFormMainDiv");
                }else{
                    submitMultipartFormUsingAjax(formID,actionName,"#inputFormMainDiv");
                }
                $(this).dialog("close");
                $(this).remove();
                //$(this).dialog("destroy");
        },

        Cancel : function() {
            $(this).dialog("close");
            $(this).remove();
            //$(this).dialog("destroy");
            return false;
        }
    },

    close : function() {
        $(this).dialog("close");
        $(this).remove();
        //$(this).dialog("destroy");
    }
});  }

Above code is working fine in local, bur when i deployed on development server i'm getting exception TypeError: $(...).dialog is not a function or sometime for "$(this).dialog("destroy")";

dialog should close but it is not happening on dev server.

what mistake i'm doing not getting.

Any help would be appreciated.

• javascript
• jquery
• html
• jquery-ui

• Possible duplicate of JQuery UI dialog - *Dialog not a function* error – rath Commented Jan 5, 2016 at 11:27

1 Answer 1

TypeError: $(...).dialog is not a function is the error you get out of Firefox, when you have not loaded jqueryui. Other browsers have equivalent errors. You can

(1) Double check that your devserver has a working and non-firewalled connection to http://code.jquery./ui/1.10.3/jquery-ui.js, or better yet -

(2) Download a minified jquery-ui.js and include it in a third-party or lib directory on your server, then source it from there (this is monly seen practice).

ALSO: Calling $(this).remove() also calls .destroy(), which in turn calls .close() if the dialog is still open. Both of these lines:

$(this).dialog("close");
$(this).dialog("destroy");

are pletely unnecessary, and you can safely delete them without changing any behaviour. Essentially you're making calls to .destroy() on two consecutive lines, so the second call will result in an uninitialised error