jQuery中的錯誤DatePicker

我需要在我的頁面中有一個DatePicker元素。我有下面的代碼已經到位：jQuery中的錯誤DatePicker

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

@{ 
    ViewBag.Title = "Check Printing"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h3>Define Check Batch</h3> 
<table> 
    <tr> 
     <td>Check Type:</td> 
     <td>@Html.DropDownList("list", ViewData["list"] as SelectList)</td> 
    </tr> 
    <tr> 
     <td>Pay Period:</td> 
     <td>12/17/2014 - 01/08/2015</td> 
    </tr> 
    <tr> 
     <td>Check Date:</td> 
     <td><input type="text" id="datepicker" /></td> 
    </tr> 
    <tr> 
     <td>Starting Check Number:</td> 
     <td></td> 
    </tr> 
</table> 

@section scripts 
{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#datepicker").each(function() { 
       $(this).datepicker(); 
      }); 
     }); 
    </script> 
}

然而，當我運行這段代碼，它給了我下面的錯誤：

在線路126未處理的異常，列17 http://localhost:53130/CheckPrinting/CheckPrinting

0x800a01b6 - JavaScript運行時錯誤：對象不支持屬性或方法'datepicker'

我不確定發生了什麼，一切看起來像設置正確？感謝

編輯：這裏是「動態」代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="x-ua-compatible" content="IE=Edge"> 
    <title>Check Printing - SAAS</title> 
    <meta name="description" content="Student Accounting and Allotment System" /> 
    <link href="/Content/Site.less" rel="stylesheet"/> 
<link href="/Content/custom/custom.less" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.8.3.js"></script> 


</head> 
<body> 
    <!--Masthead--> 
    <div class="masthead"> 
     <!--Utility Bar--> 
     <div class="navbar"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-8"> 
         <div class="navbar-header" style="margin-left:30px; margin-top:20px;"> 
          <object data="/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object> 
          <div style="float:right; margin-top:-20px;"> 
           <h2>SAAS</h2> 
           <h6>Student Accounting and Allotment System</h6> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-3"> 
         <div class="navbar-collapse collapse"> 
          <ul class="nav navbar-nav"> 
           <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="float:none; margin-top:25px;">John Doe <b class="caret" style="margin-left:20px;"></b></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Action</a></li> 
             <li><a href="#">Another action</a></li> 
             <li><a href="#">Something else here</a></li> 
            </ul> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!--Main Navigation--> 
     <div class="navbar navbar-primary"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;"> 
         <li><a href='/CheckRegister/CheckRegister'><i class="fa fa-book fa-fw fa-inverse"></i> Check Register</a></li> 
         <li><a href='/Home/About'><i class="fa fa-check-circle-o fa-fw fa-inverse"></i> Reconcile</a></li> 
         <li><a href='/StudentInfo/Info'><i class="fa fa-user fa-fw fa-inverse"></i> Student Info</a></li> 
         <li><a href='/Home/About'><i class="fa fa-print fa-fw fa-inverse"></i> Check Printing</a></li> 
         <li><a href='/Home/About'><i class="fa fa-retweet fa-fw fa-inverse"></i> Reissues</a></li> 
         <li><a href='/Home/About'><i class="fa fa-map-marker fa-fw fa-inverse"></i> Centers</a></li> 
         <li><a href='/Home/About'><i class="fa fa-area-chart fa-fw fa-inverse"></i> Reports</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 



    <div class="container-fluid body-content" style="margin-top:-39px;"> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 



<h3>Define Check Batch</h3> 
<table> 
    <tr> 
     <td>Check Type:</td> 
     <td><select id="list" name="list"><option value="0">- Select -</option> 
<option value="1">Payroll</option> 
<option value="2">Termination</option> 
<option value="3">Allotment</option> 
<option value="4">Bonus</option> 
</select></td> 
    </tr> 
    <tr> 
     <td>Pay Period:</td> 
     <td>12/17/2014 - 01/08/2015</td> 
    </tr> 
    <tr> 
     <td>Check Date:</td> 
     <td><input type="text" id="datepicker" /></td> 
    </tr> 
    <tr> 
     <td>Starting Check Number:</td> 
     <td></td> 
    </tr> 
</table> 


     <hr /> 
    </div> 

    <script src="/Scripts/jquery-2.1.1.js"></script> 

    <script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/respond.js"></script> 






    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#datepicker").each(function() { 
       $(this).datepicker(); 
      }); 
     }); 
    </script> 


</body> 
</html>

enter image description here

Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="x-ua-compatible" content="IE=Edge"> 
    <title>@ViewBag.Title - SAAS</title> 
    <meta name="description" content="Student Accounting and Allotment System" /> 
    @Styles.Render("~/bundles/css") 
    @Scripts.Render("~/bundles/modernizr") 

</head> 
<body> 
    <!--Masthead--> 
    <div class="masthead"> 
     <!--Utility Bar--> 
     <div class="navbar"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-8"> 
         <div class="navbar-header" style="margin-left:30px; margin-top:20px;"> 
          <object data="~/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object> 
          <div style="float:right; margin-top:-20px;"> 
           <h2>SAAS</h2> 
           <h6>Student Accounting and Allotment System</h6> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-3"> 
         <div class="navbar-collapse collapse"> 
          <ul class="nav navbar-nav"> 
           <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="float:none; margin-top:25px;">John Doe <b class="caret" style="margin-left:20px;"></b></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Action</a></li> 
             <li><a href="#">Another action</a></li> 
             <li><a href="#">Something else here</a></li> 
            </ul> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!--Main Navigation--> 
     <div class="navbar navbar-primary"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;"> 
         <li class="@Url.MakeActive("", "CheckRegister")"><a href='@Url.Action("CheckRegister","CheckRegister")'><i class="fa fa-book fa-fw fa-inverse"></i> Check Register</a></li> 
         <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-check-circle-o fa-fw fa-inverse"></i> Reconcile</a></li> 
         <li class="@Url.MakeActive("Student")"><a href='@Url.Action("Info","StudentInfo")'><i class="fa fa-user fa-fw fa-inverse"></i> Student Info</a></li> 
         <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-print fa-fw fa-inverse"></i> Check Printing</a></li> 
         <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-retweet fa-fw fa-inverse"></i> Reissues</a></li> 
         <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-map-marker fa-fw fa-inverse"></i> Centers</a></li> 
         <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-area-chart fa-fw fa-inverse"></i> Reports</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 



    <div class="container-fluid body-content" style="margin-top:-39px;"> 
     @RenderBody() 
     <hr /> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @*@Scripts.Render("~/bundles/dataTables")*@ 
    @*@Scripts.Render("~/bundles/custom")*@ 
    @*@Scripts.Render("~/bundles/StudentAllotments")*@ 

    @RenderSection("scripts", required: false) 

</body> 
</html>

來源

2015-04-02 Josiah Nusbaum

我不確定是什麼服務器端或模板語言，但你可以發佈呈現的HTML嗎？另外，爲什麼麻煩你的日期選擇器ID作爲ID循環使用.each（）必須是唯一的？ – j08691 2015-04-02 17:24:43

@ j08691啊，很好的電話ID！我在某處發現了那段代碼，並忘記爲每個部分刪除它。我只是將「動態」HTML添加到帖子的底部。謝謝！ – 2015-04-02 17:27:56

爲什麼要將jQuery的兩個（不同的）副本添加到同一頁面？另外，爲什麼不是所有的腳本和樣式在頁面的頭部？ – j08691 2015-04-02 17:28:27

它在這裏工作得很好。

我在這個例子中使用了你的代碼，只是刪除了很多菜單的東西，以保持它簡單。如果這個例子不適合你，那麼它可能是一個特定於你的開發環境和/或瀏覽器的錯誤。

$(document).ready(function() { 
 
    $("#datepicker").datepicker(); 
 
});

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<h3>Define Check Batch</h3> 
 
<table> 
 
    <tr> 
 
     <td>Check Type:</td> 
 
     <td><select id="list" name="list"><option value="0">- Select -</option> 
 
<option value="1">Payroll</option> 
 
<option value="2">Termination</option> 
 
<option value="3">Allotment</option> 
 
<option value="4">Bonus</option> 
 
</select></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pay Period:</td> 
 
     <td>12/17/2014 - 01/08/2015</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Check Date:</td> 
 
     <td><input type="text" id="datepicker" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Starting Check Number:</td> 
 
     <td></td> 
 
    </tr> 
 
</table>

我假設你正在使用Visual Studio（根據您的代碼） - 有很多的選擇，以便能夠調試代碼，準確地看到錯誤的是發生。

檢查簡單的事情 - 確保jQuery在jQuery UI之前先加載，jQuery應該只在頁面上加載一次。有腳本以某種方式干擾jQuery嗎？如果所有這些都可以，然後開始插入斷點並逐步瀏覽它，直到找到問題。

如果你可以創建一個小提琴或一個代碼片段來重現你的確切問題，那麼我很樂意爲你進一步研究它，但是不要在你的機器上 - 我不能再現這個問題，重新擁有。

來源

2015-04-02 18:00:35

好吧，這真的沒有意義，因爲我仍然得到相同的錯誤。我正在使用Visual Studio和（不幸）Internet Explorer。它引發的錯誤 - 對象不支持「datepicker」屬性或方法 - 發生在「$（」＃datepicker「）。datepicker（）;」行 – 2015-04-03 12:19:13

嘗試將一個變量分配給jQuery datepicker元素，就像'var datePicker = $（「＃datepicker」）;'然後在'console.log（datePicker）''上設置一個斷點。當您將鼠標懸停在Visual Studio中的變量上時，您應該能夠看到關於該jQuery對象的大量細節。這可以幫助您追蹤問題源於何處。 – 2015-04-03 12:27:56

那麼這樣的事情？（date）（）; date（datePicker）; $（「＃datepicker」）。datepicker（）;}）; ？ – 2015-04-03 12:59:35

我覺得如果你只是做到這一點，它應該工作：

$(document).ready(function() { $("#datepicker").datepicker(); });

由於是ID

來源

2015-04-02 17:28:43

我得到的錯誤與那。 – 2015-04-02 17:35:46

好吧，在你的「動態」代碼中，你兩次加載JQuery，可能會造成問題。一次用''，第二次用'' – 2015-04-02 17:37:55

我擺脫了這個問題，並得到相同的錯誤 – 2015-04-02 17:44:21

jQuery中的錯誤DatePicker

回答

相關問題