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

Asked

Viewed 147 times

1

I installed jQueryUI, I changed my Bundleconfig, but still the browser does not recognize the Dialog() widget in my script jquery.dialogo.js. I checked if the library is being loaded and everything is normal.

inserir a descrição da imagem aqui

Bundleconfig

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/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 inserir a descrição da imagem aqui

asp.net-mvc

2 answers

3

In addition to what @Randrade quoted, the following can happen;

Bundle usually follows an alphabetical sequence, which may happen that some necessary scripts are being loaded later.

What you can do is:

Inside of 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 unique bundle for all your. js files, following the order you put in your bundle.

  • Rod thanks for the suggestion.

  • @Kellysoares test both answer, if not yet solve, inform.

1


Let’s go in pieces.

Here you already own one Bundle to the jQuery.

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

Therefore, you do not need to reference the same in Bundle to the jQuery-UI. I’m talking about 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 that:

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

And in his view leading, _Layout.cstml you are referencing the files, but in the "wrong" order. You need to reference first the jQuery and after referencing the script of jQuery-UI, thus leaving its _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>

  • Randrade, I made the changes as suggested and also in my view I added @Section Scripts { @Scripts.Render("~/Bundles/jqueryui") } and now it is working, but when I shoot this render and leave only in Layout it does not work, Could I put the Layout Renders after Styles so I don’t have to re-reference these scrips in each View? One of the goals of using Layout is to avoid repeating this reference of scripts in each View.

  • Theoretically it was supposed to work on the others views. You can check the order being passed, or if any error appears in console. But there’s no point in carrying one script if you will not use, do not agree?

  • Where no need he does not accuse error, only where I use some theme, but I will avoid touching it and leave as is. I have to try to put to run the widget in the delete registry. Thank you again Randrade!

Browser other questions tagged asp.net-mvc

You are not signed in. Login or sign up in order to post.