使用timepicker.js时，"timepicker不是函数"? [英] 'timepicker is not a function' when using timepicker.js?

问题描述

我正在尝试使用此插件将时间选择器放入表单中: http://jonthornton. github.io/jquery-timepicker/.看来我要做的就是下载该库并使用jQuery和jQuery ui，但是到目前为止，即使jQuery的datepicker很好用，我也无法使它正常工作.

这是我的代码:

                <link rel="stylesheet" href="/jquery-ui.css">
                <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
                <link rel="stylesheet" href="js/timepicker.css">
                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
                <script src="js/timepicker.js"></script>


               <script>
                 $(function() {
                     $( "#datepicker" ).datepicker();    
                 });

                 $(function() {
$('#timepicker1').timepicker();
                 });
                </script>

              <form method="post" action = "makecleaningappt">
                    What day would you like a cleaning?
                    <input type="text" id="datepicker" name = "date">

                 What time would you like to start?<br>(example format: 3 pm)
                    <input type="text" id="timepicker1" name = "time" >
...

在firefox中运行此错误消息:

TypeError: $(...).timepicker is not a function

我也尝试过不将对timepicker的js调用嵌入到lambda函数中.我还尝试将timepicker ID附加到div元素.这些选项都不起作用.我在其他SO帖子中已经看到，此错误通常是在命名冲突时发生的，但是除了包含timepicker.css和timepicker.js文件之外，我的代码中没有任何名为"timepicker"的东西.

对于解决此问题的任何建议，我们将不胜感激.谢谢！

解决方案

该代码可与您拥有的jQuery和jQuery ui版本一起使用.我更新了您的代码以使用硬编码路径，然后代码开始运行.

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

 $(function() {
   $('#timepicker1').timepicker();
 }); 

 <link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>


<form method="post" action="makecleaningappt">
  What day would you like a cleaning?
  <input type="text" id="datepicker" name="date">What time would you like to start?
  <br>(example format: 3 pm)
  <input type="text" id="timepicker1" name="time">
</form> 

这意味着JavaScript文件不在您查找的位置.控制台可能会显示一条消息:"无法加载资源:服务器以状态404(未找到)进行了响应 "

如果文件存在，请检查以确保JS文件中确实包含内容.

I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.

Here's my code:

                <link rel="stylesheet" href="/jquery-ui.css">
                <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
                <link rel="stylesheet" href="js/timepicker.css">
                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
                <script src="js/timepicker.js"></script>


               <script>
                 $(function() {
                     $( "#datepicker" ).datepicker();    
                 });

                 $(function() {
$('#timepicker1').timepicker();
                 });
                </script>

              <form method="post" action = "makecleaningappt">
                    What day would you like a cleaning?
                    <input type="text" id="datepicker" name = "date">

                 What time would you like to start?<br>(example format: 3 pm)
                    <input type="text" id="timepicker1" name = "time" >
...

I get the following error when I run this in firefox:

TypeError: $(...).timepicker is not a function

I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.

I'd appreciate any suggestions for troubleshooting this. Thanks!

解决方案

The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.

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

 $(function() {
   $('#timepicker1').timepicker();
 });

<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>


<form method="post" action="makecleaningappt">
  What day would you like a cleaning?
  <input type="text" id="datepicker" name="date">What time would you like to start?
  <br>(example format: 3 pm)
  <input type="text" id="timepicker1" name="time">
</form>

It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"

If the file is there, than check to make sure that the JS file actually has content in it.

这篇关于使用timepicker.js时，"timepicker不是函数"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！