fadeIn()无法在外部JavaScript文件中工作

时间:2016-03-20 20:39:20

标签: javascript jquery

问题背景

我有一个简单的场景,用户提交一个表单,然后将一个微调器GIF附加到div。

问题:

如果我将jQuery和JavaScript代码添加到<script>标记内的页面,它可以正常工作。 如果我将其添加到我在页面中包含的外部JavaScript文件中,则不会触发fadeIn()和hide()方法。

代码:

@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;
            }
        }

    });
}

2 个答案:

答案 0 :(得分:0)

尝试将jquery放在head标签和页面末尾的个人脚本中。 在每种情况下,您的页面必须首先加载jquery,然后加载使用jquery的脚本。

答案 1 :(得分:0)

我设法解决了这个问题。在加载jQuery之前,document.ready中的验证检查已触发。删除文档。已经解决了问题。