fadeIn() not working in an external JavaScript file

Question

Question Background

I have a simple scenerio where a user submits a form which in turn appends a spinner GIF to a div.

The Issue:

If I add the jQuery and JavaScript code to the page inside <script> tags it works fine. If I add it to an external JavaScript file that I include in the page the fadeIn() and hide() methods won't fire.

Code:

@model ShopComparisonEngine.Models.HomePageVM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
    <title>Compzee</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/navmenu-push.css" rel="stylesheet">
    <link href="~/Content/CompzeeHomeStyles.css" rel="stylesheet">
    <link href="~/Content/navmenu-push.css" rel="stylesheet">

    <link rel="shortcut icon" href="~/Images/Favicon.ico" type="image/x-icon">
    <link rel="icon" href="~/Images/Favicon.ico" type="image/x-icon">

</head>
<body>
    <div id="centerDiv" class="centered">
        <div class="col-lg-12 centered-text">
            <h1>Compzee <img src="~/Images/CompzeeLogoSmall.png" class="logoSize" /></h1>
        </div>
        <div class="col-lg-12">

            @using (Html.BeginForm("Compare", "ShopComparator", FormMethod.Post, new { id = "searchForm", onsubmit = "showSpinner()" }))
            {
                @Html.ValidationSummary(true)

                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-4 form-group">
                                    @Html.TextBoxFor(m => m.searchTerm, new { id = "searchTerm", @class = " form-control", placeHolder = "Item to search for" })
                                    @Html.ValidationMessageFor(x => x.searchTerm)

                                </div>

                                <div class="col-lg-5 form-group">
                                    @Html.DropDownListFor(x => x.searchCatagory, new SelectList(new List<string> {
                                 "All",
                            "Baby",
                            "Business, Office & Industrial",
                            "Cameras & Photography",
                            "Clothes & Accessories",
                            "Comics, Books & Magazines",
                            "Computers & Tablets",
                            "Consoles",
                            "DVD's, Films & TV",
                            "Garden & Patio",
                            "Health & Beauty",
                            "Holiday & Travel",
                            "Home",
                            "Kitchen",
                            "Jewellery",
                            "Mobile Phones & Accessories",
                            "Musical Instruments",
                            "Music",
                            "Pet Supplies",
                            "Shoes",
                            "Sporting Goods",
                            "Toys & Games",
                            "Vehicle Parts & Accessories",
                            "Video Games",
                            "Watches",
                           }), "Select Catagory", new { id = "searchCat", @class = "form-control " })

                                    @Html.ValidationMessageFor(x => x.searchCatagory)

                                </div>

                                <div class="col-lg-3 form-group">

                                    @Html.DropDownListFor(x => x.countryCode, new SelectList(new List<string> {
                                "UK",
                                "US",
                                "FR",
                                "DE",
                           }), "Select Country", new { id = "searchCountry", @class = "form-control " })

                                    @Html.ValidationMessageFor(x => x.countryCode)

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-sm-12 form-group">
                                    <input type="submit" id="compzeeSubmit" class="btn btn-success btn-block" value="Compzee!" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
        <div class="col-lg-12 text-center">
            <h4>Compzee allows you to search for your favourite items and compare the prices between ebay and Amazon.</h4>
            <img src="~/Images/ebaySmall.png" class="marketPlace"/>
            <img src="~/Images/amazonSmall.png" class="marketPlace" />
        </div>
        <div id="loadSpinner" class="text-center">
        </div>
    </div>
    <input type="hidden" id="validationCheck" />

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/CompzeeHomepageJS.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

</body>
</html>

JavaScript - CompzeeHomepageJS.js:

$(document).ready(function () {
    $('#validationCheck').val('false');
});


function showSpinner() {

    $('#searchForm').submit(function () {

        if (!$(this).valid()) {

            return false;
        }
        else {

            $("#compzeeSubmit").prop('disabled', true);

            if ($("#validationCheck").val() !== "true") {

                $("#validationCheck").val("true");

                var spinner = '<img src="/Images/LoadingSpinner.gif">';

                $('#loadSpinner').hide();

                $(spinner).appendTo('#loadSpinner');

                $('#loadSpinner').fadeIn(1000);

                return true;
            }
        }

    });
}

Answer 1

Try to put the jquery inside the head tags and your personal scripts at the end of the page. And in every case your page must first load the jquery then your scripts that use jquery.

Answer 2

I managed to work this out. The Validation check in document.ready was firing before jQuery was loaded. Removing the document.ready solved the issue.

fadeIn() not working in an external JavaScript file

Question

2 answers

solution1
0 2016-03-20 20:45:55

solution2
0 2016-03-21 21:18:58

fadeIn() not working in an external JavaScript file

Question

2 answers

solution1 0 2016-03-20 20:45:55

solution2 0 2016-03-21 21:18:58

solution1
0 2016-03-20 20:45:55

solution2
0 2016-03-21 21:18:58