.net JavaScript minification breaks jQuery plugin

Question

I have a jQuery plugin that works fine when JS minification is turned off. As soon as you switch it on though a specific part of the plugin no longer works.

The plugin: Is a password strength indicator plugin, which checks the input runs through some logic then highlights 1 - 5 indicator blocks depending on the number of conditions the user input has met.

The plugin (minus large parts of the logic for brevity):

$(function () {
    (function ($) {
        $.fn.strongPassword = function () {
            var updatePasswordStrengthIndicator = function (indicators, $context) {
                console.log("indicators ", indicators); //prints out correct value
                console.log("$context ", $context); //prints out object reference

                for (var i = 0; i <= indicators; i++) {
                    //problem lies here then
                    $context.siblings(".strong-password").children('.strong-password-indicator:nth-child(' + (i + 1) + ')').removeClass('normal').removeClass('pass').addClass('pass');
                }
            }

            return this.each(function () {

                var $this = $(this);

                //code to insert HTML elements for password strength indicators
                $("<div class='strong-password'><div class='clear-fix'><div class='float-left'>Password Strength</div><div class='float-right strong-password-status'>Too Short</div></div><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span></div>")                     .insertAfter($this);

                $this.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    updatePasswordStrengthIndicator(blocksToLight, $(this));
                });
            });
        }
    }(jQuery));
});

Problem Area: The problem is with the function 'updatePasswordStrengthIndicator'. I traced out the values from the two arguments 'indicators' renders out the number of blocks and '$context' renders out the HTML input both of which are correct.

Turn on minification and the updatePasswordStrengthIndicator fails, no blocks light up even though the arguments are correct

Here is the minified output:

$(function () {
    (function (n) {
        n.fn.strongPassword = function () {
            var t = function (n, t) {
                console.log('indicators ', n),
                console.log('$context ', t);
                for (var i = 0; i <= n; i++) 
                    t.siblings('.strong-password').children('.strong-password-indicator:nth-child(' + (i + 1) + ')').removeClass('normal').removeClass('pass').addClass('pass')
            };

            return this.each(function () {

                var r = n(this);

                //code to insert HTML elements for password strength indicators
                n('<div class=\'strong-password\'><div class=\'clear-fix\'><div class=\'float-left\'>Password Strength</div><div class=\'float-right strong-password-status\'>Too Short</div></div><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span></div>').insertAfter(r),

                r.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    t(h, n(this)),
                })
            })
        }
    }) (jQuery)
})

EDIT Note - If I change the updatePasswordStrengthIndicator, for loop, children selector from nth-child to 'eq' it works when minified. Not sure why nth-child would be an issue

EDIT - Here's the code that works

Without Minification

$(function () {
    (function ($) {
        $.fn.strongPassword = function () {
            var updatePasswordStrengthIndicator = function (indicators, $context) {
                console.log("indicators ", indicators); //prints out correct value
                console.log("$context ", $context; //prints out empty string which is incorrect

                for (var i = 0; i <= indicators; i++) {
                    $context.siblings(".strong-password").children('.strong-password-indicator:eq(' + i + ')').removeClass('normal').removeClass('pass').addClass('pass');
                }
            }

            return this.each(function () {

                var $this = $(this);

                //code to insert HTML elements for password strength indicators
                $("<div class='strong-password'><div class='clear-fix'><div class='float-left'>Password Strength</div><div class='float-right strong-password-status'>Too Short</div></div><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span></div>")                     .insertAfter($this);

                $this.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    updatePasswordStrengthIndicator(blocksToLight, $(this));
                });
            });
        }
    }(jQuery));
});

With Minification

$(function () {
    (function (n) {
        n.fn.strongPassword = function () {
            var t = function (n, t) {
                console.log('indicators ', n),
                console.log('$context ', t);
                for (var i = 0; i <= n; i++) 
                    t.siblings('.strong-password').children('.strong-password-indicator:eq(' + i + ')').removeClass('normal').removeClass('pass').addClass('pass')
            };

            return this.each(function () {

                var r = n(this);

                //code to insert HTML elements for password strength indicators
                n('<div class=\'strong-password\'><div class=\'clear-fix\'><div class=\'float-left\'>Password Strength</div><div class=\'float-right strong-password-status\'>Too Short</div></div><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span></div>').insertAfter(r),

                r.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    t(h, n(this)),
                })
            })
        }
    }) (jQuery)
})

So `console.log("$context ", $context);` becomes `console.log('$context ', t.html());`? Where is the extra `.html()` call coming from? Do you get any errors logged in the console? — James Thorpe, Feb 19 '15 at 12:48
@JamesThorpe sorry I removed .html() as I realised it was returning the empty string even though there was an element in the jquery object. No errors are logged. The visual indicators affected by the function in question don't work, but the textual indicator does work which shows that the entire plugin still works, just not the part that updates the visual indicators for some reason. — Jacques, Feb 19 '15 at 16:02
Could you edit the question to accurately reflect what the current state is then, and perhaps for clarity include the before/after minifcation of the `eq` version that works — James Thorpe, Feb 19 '15 at 16:06
@JamesThorpe I've added the two additional code snippets showing the code that I'm using as a temporary fix which does work. I've also updated the original snippets. — Jacques, Feb 20 '15 at 08:19

.net JavaScript minification breaks jQuery plugin

0 Answers0