Error loading Widget Dialog () jQuery in ASP.NET MVC

Navigation
1

I installed jQueryUI, I changed my BundleConfig, but even so the browser does not recognize the Dialog () Widget of my script jquery.dialogo.js . I've checked that the library is loading and everything is fine.

BundleConfig

publicclassBundleConfig{//FormoreinformationonBundling,visithttp://go.microsoft.com/fwlink/?LinkId=254725publicstaticvoidRegisterBundles(BundleCollectionbundles){bundles.Add(newScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery-2.1.4.js",
                    "~/Scripts/jquery.dialogo.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

Script 

 $(document).ready(function(){
        $("#excluir").click(function () {
            $("#dialogo").dialog();
        })
    })

_Layout.cshtml 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Error

    
asked by anonymous 24.09.2015 / 22:03

2 answers

1

Let's break it down.

Here you already have a Bundle for jQuery . 

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

So you do not have to reference the same in Bundle for jQuery-UI . I refer to this: 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery-2.1.4.js",//não há necessidade disso
                    "~/Scripts/jquery.dialogo.js"));

Change to this: 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery.dialogo.js"));

And in your view , _Layout.cstml you are referencing the files, but in the "wrong" order. You need to first reference jQuery and after referencing the jQuery-UI script, thus getting your _Layout.cshtml : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("scripts", required: false)
</body>
</html>
    
24.09.2015 / 22:15
3

In addition to what @Randrade mentioned, the following may happen;

The bundle normally follows an alphabetical sequence, which may happen some of the required scripts are being loaded later.

What you can do is:

Inside your file BundleConfig.cs create a new BundleOrder 

class MinhaNovaBundleOrder: IBundleOrderer {
      public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
      {
        return files;
      }
}

And use it as follows: 

meusScripts  = new MinhaNovaBundleOrder();
meusScripts.Add(new ScriptBundle("~/bundles/all").Include(
                    "~/Scripts/jquery-{version}.js"
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery-2.1.4.js",//não há necessidade disso
                    "~/Scripts/jquery.dialogo.js"));

Creating this way, you will have a single bundle for all your .js files, following the order you placed in your bundle .

    
24.09.2015 / 22:22
Hide pdf extension in URL How to break strings in more than one row without concatenating? [duplicate]