bootstrap datetimepicker: $ не е дефиниран

Получавам грешка в конзолата:

$ is not defined

когато се опитвам да използвам bootstrap datetimepicker

Това са връзките в моя стил:

<link rel="stylesheet" type="text/css" href="/bgbower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/bgbower_components/bootstrap/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/bgcss/style.css">

А това са връзки към скриптове:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

Тук използвам формуляра за избор на дата и час:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

Можете ли да ми помогнете да разреша този проблем?


javascript datepicker bootstrapping
person Nuriddin Zuhirxojaev    schedule 16.12.2015    source източник
comment
Виждате ли 404 или грешки в раздела Console?   -  person Praveen Kumar Purushothaman    schedule 16.12.2015
comment
Така че библиотеката jQuery всъщност се зарежда? Потърсете раздела Мрежа.   -  person epascarello    schedule 16.12.2015
comment
Препратките към скрипта в главата ли са или в тялото?   -  person David Hedlund    schedule 16.12.2015
comment
Не виждам никакви грешки 404 и препратките към скриптове са в основния текст   -  person Nuriddin Zuhirxojaev    schedule 16.12.2015
comment
@NuriddinZuhirxojaev Къде зареждаш скриптовете, човече? Дали е в главата или в края на тялото?   -  person Praveen Kumar Purushothaman    schedule 16.12.2015
comment
@PraveenKumar Това е в края на тялото   -  person Nuriddin Zuhirxojaev    schedule 16.12.2015

Отговори (1)


arrow_upward
1
arrow_downward

Тъй като зареждате скриптовете в края на тялото, по-добре е да преместите своя <script> таг от вътре в body след тези или да заредите скриптовете в секцията <head> на вашия HTML:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'ru'
        });
    });
</script>

Сега това със сигурност трябва да работи. Функциите $ и jQuery трябва да се извикват само след зареждане на библиотеката jQuery, това е последователен процес.

Ако имате и общ горен/долен колонтитул, безопасно е да добавите горния код, тъй като jQuery проверява и изпълнява само върху елемента #datetimepicker2, само ако е там.

person Praveen Kumar Purushothaman    schedule 16.12.2015