问题背景
我有一个简单的场景,用户提交一个表单,然后将一个微调器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;
}
}
});
}
答案 0 :(得分:0)
尝试将jquery放在head标签和页面末尾的个人脚本中。 在每种情况下,您的页面必须首先加载jquery,然后加载使用jquery的脚本。
答案 1 :(得分:0)
我设法解决了这个问题。在加载jQuery之前,document.ready中的验证检查已触发。删除文档。已经解决了问题。