jQuery function in separate file,

Question

i found a good jQuery script here on stackoverflow that i want to put in a separate .js file.

I want to do this because i want to use the file on more than 1 page.

If i place this code inside script tags on a specifik page it works, but when i refer to it in the head it doesent.

   (function ($) {

// jQuery autoGrowInput plugin by James Padolsey

$.fn.autoGrowInput = function (o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 10,
        comfortZone: 10
    }, o);

    this.filter('input:text').each(function () {

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<div/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap',
                textIndent: 0
            }),
            check = function () {

                if (val === (val = input.val())) { return; }

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                            || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

        // Resize the input to the correct size from the beginning.
        check();

    });

    return this;

};       })(jQuery);           $('input').autoGrowInput();

---

This is how i do it:

I put this in a separate file:

    (function ($) {

    // jQuery autoGrowInput plugin by James Padolsey

    $.fn.autoGrowInput = function (o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 10,
            comfortZone: 10
        }, o);

        this.filter('input:text').each(function () {

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<div/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap',
                    textIndent: 0
                }),
                check = function () {

                    if (val === (val = input.val())) { return; }

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                                || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

            // Resize the input to the correct size from the beginning.
            check();

        });

        return this;

    };

})(jQuery);

then i call it from the Layout like this:

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input').autoGrowInput();
        });
    </script>

    // REST OF SITE HERE...
</body>

It still doesen't work, i may add that i use the MVC FrameWork.

Console error: Uncaught TypeError: Object [object Object] has no method 'autoGrowInput'

I also can say that the .js file is included in source, same for $('input').autoGrowInput();

Answer 1

You have to call $('input').autoGrowInput(); after the document has been loaded.

Try this:

$(function(){
    $('input').autoGrowInput();
});

Answer 2

Your references to the autoGrowInput in your code should come after you have defined it inline or specified an external script tag which contains it.

Also you have to use it on elements which were already loaded.

Try using the document ready event like so:

$(function(){
    $('input').autoGrowInput();
});

Answer 3

First make sure you reference jquery and then your script

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>

Then call function after document is ready.

<script type="text/javascript">
$('document').ready(function(){
  $('input').autoGrowInput();
});
</script>

Answer 4

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
    $('document').ready(function(){
        autoGrowInput();
    });
</script>

clear cache on browser .... and test again .