fadeIn() harici bir JavaScript dosyası

Soru ArkaplanfadeIn() harici bir JavaScript dosyası

Bir kullanıcı sırayla bir div doğru bir değer değişimi GIF ekler bir formu gönderen basit scenerio var çalışmıyor.

Sayı:

Ben <script> etiketleri içinde sayfaya jQuery ve JavaScript kodu eklerseniz iyi çalışıyor. Sayfada eklediğim bir harici JavaScript dosyasına eklerseniz, fadeIn() ve hide() yöntemleri patlamaz.

Kodu:

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

    }); 
}

kaynak

2016-03-20 user1352057

Tarayıcınızda geliştirici konsolunda herhangi bir hata var mı? Genellikle, bu hatada bir cevap bulabilirsiniz. – tilz0R

@ tilz0R Cevabınız için teşekkür ederiz. Bunu da düşündüm ama konsolda hata yok. – user1352057

'$ (' # loadSpinner ')' ı denediniz mi?(). Append (spinner) .fadeIn(); ' –

deneyin sayfanın sonunda baş etiketleri ve kişisel komut içine jquery koymak. Ve her durumda, sayfanız önce jquery'yi ve ardından jquery'yi kullanan komut dosyalarınızı yüklemelidir.

kaynak

2016-03-20 20:45:55 CalCon

Cevabınız için teşekkür ederiz. Önerinizi denedim ama sorun hala mevcut. – user1352057

Bunu başarabildim. Document.ready'deki Doğrulama denetimi jQuery yüklenmeden önce tetikleniyordu. Belgeyi kaldırma. Sorunu çözdünüz.

kaynak

2016-03-21 21:18:58 user1352057

fadeIn() harici bir JavaScript dosyası

cevap

İlgili konular