CODEWITHSUNDEEP
jqueryasp.netjquery-uibundling-and-minification
Marc
Marc

Reputation: 16512

Asp.net bundling breaks jquery UI

When I publish my app in release mode, datepickers stop working.

I'm pretty sure it has to do with the bunbling but I can't figure out what

Jquery and Jquery UI are both loaded in the correct order and only once.

Also $.ui is initialized.

if I try to bind a datepicker in the google chrome console with

$("#birthdate").datepicker();

There's no error, but the datepicker is not binded and theres no hasDatepicker class on the input

if I try

$("#birthdate").datepicker("show");

I have the following error

Uncaught TypeError: Cannot read property 'apply' of undefined

because the datepicker is not initialized

Here's the code

<input class="form-control default-date-picker" data-msg-date="The field Birth Date must be a date." data-msg-required="The Birth Date field is required." data-rule-date="true" data-rule-required="true" id="birthdate" name="BirthDate" type="text" value="0001-01-01 12:00:00 AM" aria-required="true">

<script type='text/javascript'>
     $(function () {
          $("#birthdate").datepicker();
     });
</script>

I can't figure out the problem

EDIT

I noticed that I never hit a breakpoint in those jquery functions when I'm in release mode

/* Attach the date picker to a jQuery selection.
     * @param  target   element - the target input field or division or span
     * @param  settings  object - the new settings to use for this date picker instance (anonymous)
     */
    _attachDatepicker: function(target, settings) {
        var nodeName, inline, inst;
        nodeName = target.nodeName.toLowerCase();
        inline = (nodeName === "div" || nodeName === "span");
        if (!target.id) {
            this.uuid += 1;
            target.id = "dp" + this.uuid;
        }
        inst = this._newInst($(target), inline);
        inst.settings = $.extend({}, settings || {});
        if (nodeName === "input") {
            this._connectDatepicker(target, inst);
        } else if (inline) {
            this._inlineDatepicker(target, inst);
        }
    },
/* Attach the date picker to an input field. */
    _connectDatepicker: function(target, inst) {
        var input = $(target);
        inst.append = $([]);
        inst.trigger = $([]);
        if (input.hasClass(this.markerClassName)) {
            return;
        }
        this._attachments(input, inst);
        input.addClass(this.markerClassName).keydown(this._doKeyDown).
            keypress(this._doKeyPress).keyup(this._doKeyUp);
        this._autoSize(inst);
        $.data(target, PROP_NAME, inst);
        //If disabled option is true, disable the datepicker once it has been attached to the input (see ticket #5665)
        if( inst.settings.disabled ) {
            this._disableDatepicker( target );
        }
    },

Bundle code

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


 bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                       "~/Scripts/jquery-ui-1.10.4.js",
                   "~/Scripts/jquery-ui-i18n.js"));

the scripts are rendered in the <head> section in _layout.cs

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

Upvotes: 1

Views: 1234

Answers (1)

agentpx
agentpx

Reputation: 1081

This always happened to me. I'm not sure if this is the same thing.

Make sure the code below is not executed twice or search the string for duplicate @Script.Render within your Razor Page. 

 @Scripts.Render("~/bundles/jquery")

Upvotes: 2

Related Questions