jquery ui dialog "dialog is not a function"

Question

User-1716951449 posted

trying to incorporate the jquery ui dialog, but getting error "dialog is not a function".

existing jquery is ver 3.1.1

i use nuget to get jquery-ui-1.12.1

changed the BundleConfig.cs

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"
                            , "~/Scripts/jquery-3.1.1.js"
                            , "~/Scripts/jquery-ui-1.12.1.js"
                            , "~/Scripts/MyCustom.js"
                            ));

verified the js files (jquery-3*.js, jquery-ui-*.js) does exist

the aspx code:

    <script type="text/javascript">
        function Popup1() {
            alert(1);
            $("#<%=dialogX.ClientID%>").dialog("open");
            alert(2);
        }

        $(function () {
            $("#<%=dialogX.ClientID%>").dialog({
                autoOpen: false,
                modal: true,
                height: 600,
                open: function (ev, ui) {
                    
                }
            });
        });

    </script>

<div id="dialogX" title="test" runat="server" class="ModelPopup HideDisplay">
  <iframe ... />
</div>

when testing, invoking the Popup1 func, alert(2) never triggered, because same error.

is it the jquery version conflict? I want to stick to 3.1.1, i found no details of the ui dependency, which UI ver should i use?

Answer 1

User475983607 posted

I tried your code and it worked.  You must have errors elsewhere in the code.

Answer 2

User1400794712 posted

Hi Kelmen,

Do you use master page? As we can see in the master page, '<asp:ScriptReference Name="jquery" />' will also load jquery3.1.1 file. The jquery-ui file should load after jquery 3.1.1. So, please move Scripts.Render under asp:ScriptManager.

In Site.Master

<asp:ScriptManager runat="server">
    <Scripts>
        <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
        <%--Framework Scripts--%>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Name="bootstrap" />
        <asp:ScriptReference Name="respond" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
        <%--Site Scripts--%>
    </Scripts>
</asp:ScriptManager>
<%--Move it here--%>
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>      
</asp:PlaceHolder>

Best Regards,
Daisy

Answer 3

User-1716951449 posted

i dunno what's missing or causing the javascript failed, there isn't much debug info i can find.

at the end, i end up using Ajax ModalPopupExtender, and its working.