$ ("# datepicker"). datepicker не является функцией - ошибка JavaScript - PullRequest
Новая
       17

$ ("# datepicker"). datepicker не является функцией - ошибка JavaScript

2 голосов
/ 27 февраля 2012

Я пытаюсь связать вместе fullcalendar и datepicker для создания хорошего календаря для себя, но сталкиваюсь со следующей ошибкой с кодом:

Сообщение об ошибке:

$ ("# datepicker"). Datepicker не является функцией

Вот мой код: 

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<link href="../scripts/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../Styles/dark-hive/jquery.ui.all.css">
<script src="../jquery/jquery-1.7.1.js"></script>
    <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../scripts/ui/jquery.ui.datepicker.js"></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>

 <script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>

Кроме того, есть ли способ избавиться от некоторых вызовов сценариев JQuery сверху? Таких очень много, это кажется таким грязным, но я новичок в JQuery.

Ответы [ 2 ]

6 голосов
/ 27 февраля 2012

Вы загружаете fullcalendar.min.js до загрузки страницы jquery-1.7.1.js, jquery.ui.core.js и jquery.ui.datepicker.js.Разместите его под ними, иначе он не сможет расширить их функциональность.

Вы также можете уменьшить свой код, поместив функции jQuery в один тег <script> вместо двух: 

<script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>
0 голосов
/ 27 февраля 2012

Вы можете объединить ваш jQuery следующим образом: 

$(document).ready(function() {
  // fullCalendar             
  $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
        left: '', 
        center: '', 
        right: '' 
    }, 
    defaultView: 'agendaDay', 
    editable: false, 
    events: "../fullcalendar/JSONcreator" 
  });

  // jQuery UI datepicker
  $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dateText, inst) {
      var d = new Date(dateText);
      $('#calendar').fullCalendar('gotoDate', d);
    }
  }); 
});

У вас должна быть только одна $(document).ready(function() {}); декларация.Держите его внутри тега <script> внизу.Это аналогично вызову прослушивателя событий для load следующим образом: window.addEventListener('load', function(){}, false);

Кроме того, убедитесь, что ваши скрипты загружены за до того, как вы их объявите.

...