CODEWITHSUNDEEP
asp.net-mvcjquery-uirazordatepicker
krieg
krieg

Reputation: 257

JQuery UI Datepicker has no images

today I'm having a rather dull issue: for some reason JQuery-UI's Datepicker renders, but has no images whatsoever, this image explains what I'm talking about:

No background or images?

This is the (very) simple .js in which I use datepicker:

$(document).ready(function () {

    $(".date").datepicker();

});

This is my _Layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/Site.css")
    @Styles.Render("~/Content/customcss/sitelayout.css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Scripts.Render("~/bundles/jqueryval")
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)


</body>
</html>

And this is the View in which I use datepicker:

@{
    ViewBag.Title = "Creación de Reserva";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Styles.Render("~/Content/themes/base/datepicker.css");
}

@section Scripts
{
    @Scripts.Render("~/Scripts/ReservationCreate.js");
}

<body>

    @RenderPage("~/Views/Shared/_Navbar.cshtml");

    <div id="wrap">

        <h1>Creación de Reserva</h1>

        <div id="content">


                <div class="editor-label">
                    <label>Fecha</label>
                </div>
                <div class="editor-field">
                    <input type="text" id="ReservationDate" name="ReservationDate" class="date" />
                </div>


        </div>
    </div>

</body>

I checked in Solution Explorer where the images that JQuery-ui uses, and they (apparently) are in the right location, just to doublecheck:

Where the images are.

And just in case you need it, this is my BundleConfig.cs:

using System;
using System.Web;
using System.Web.Optimization;

namespace WebApplication
{
    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"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/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"));
        }
    }
}

So, that's about it, have you guys got any idea why it's not using any of the images for Datepicker? Thank you for checking this out !

Upvotes: 0

Views: 1077

Answers (1)

krieg
krieg

Reputation: 257

The images were not loading because the files in bundleconfig had a different name from the ones in the Solution's /Scripts/ folder.

Changing this:

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"));
}

to this:

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

fixes the problem. Watch out for this!

Upvotes: 2

Related Questions