Uncaught ReferenceError: $ не определен при загрузке средства выбора даты и времени начальной загрузки в mvc

Когда я добавляю средство выбора даты и времени начальной загрузки, календарь при нажатии на «глификон глификон-календарь» не загружается, добавил все файлы, но показывает ошибку:

Uncaught ReferenceError: $ не определен в 1:417

просмотреть страницу:

<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

 <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">         
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker1'>
                                <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 () {
                            $('#datetimepicker1').datetimepicker();
                        });
                    </script>
                </div>
            </div>      

            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>

BundleConfig.cs

bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"
            ));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));

 bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                   "~/Scripts/moment.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
           "~/assets/js/jquery.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/assets/js/bootstrap.min.js",
            "~/assets/js/bootstrap-datetimepicker.min.js",
            "~/assets/js/slimscroll/jquery.slimscroll.min.js"
            ));

Страница dafault.cshtml (страница макета)

 @Styles.Render("~/css/bootstrap")
 @Scripts.Render("~/bundles/moment")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")

Почему не загружается календарь при переходе по ссылке и генерации в $jquery, я думаю правильно дал код и скрипты. может ли кто-нибудь помочь мне найти решение ??


javascript jquery asp.net-mvc asp.net-mvc-4 bootstrap-datetimepicker
person user256    schedule 16.03.2017    source источник
comment
совершенно очевидно, что у вас есть два объявленных пакета, называемых jquery. Во-первых, попробуйте удалить дубликат и посмотрите, поможет ли это. Похоже, момент включен дважды (один раз в бандлах и один раз в HTML)   -  person ADyson    schedule 16.03.2017
comment
В качестве примечания: ваши пакеты должны иметь не минимизированные версии (поэтому полная версия отображается в режиме отладки, а минимизированная версия автоматически загружается в режиме выпуска).   -  person    schedule 16.03.2017
comment
после предоставления минифицированной версии тоже не работает   -  person user256    schedule 16.03.2017
comment
Возможный дубликат Bootstrap datetimepicker не является функцией   -  person Koby Douek    schedule 16.03.2017

Ответы (2)


arrow_upward
5
arrow_downward

Сначала переместите $('#datetimepicker1').datetimepicker(); в $( document ).ready:

<script>
    $( document ).ready(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

Кроме того, вы пытаетесь использовать функциональность JQuery перед ее загрузкой.

В вашем BundleConfig.cs сначала включите JQuery:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));
bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"));
...
Other includes
...

А на странице dafault.cshtml измените порядок рендеринга и оставьте bootstrap css последним:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/moment")
@Styles.Render("~/css/bootstrap")
person Koby Douek    schedule 16.03.2017
comment
но после того, как вы сказали, календарь не загружается, как раньше, и показывает другую ошибку 1: 423 Uncaught TypeError: $ (...). datetimepicker не является функцией в сценарии, почему это? - person user256; 16.03.2017
comment
да, я дал и показал в своем вопросе, но он показывает ошибку в $('#datetimepicker1').datetimepicker(); ?? почему это так ? - person user256; 16.03.2017
comment
Попробуйте переместить $('#datetimepicker1').datetimepicker(); только после $( document ).ready(...) - person Koby Douek; 16.03.2017
comment
Сорри, подскажите пожалуйста как давать, я не понял - person user256; 16.03.2017
comment
та же ошибка повторяется Uncaught TypeError: $(...).datetimepicker1 не является функцией ?? - person user256; 16.03.2017
comment
Этот сайт доступен для просмотра онлайн? - person Koby Douek; 16.03.2017
comment
Нет, я просто строю - person user256; 16.03.2017
comment
какая 1 в конце? - person Koby Douek; 16.03.2017
comment
извините за поздний ответ, у меня есть еще 1 проблема, что дата, выбранная по календарю, не сохраняется в базе данных, почему это так? - person user256; 17.03.2017

arrow_upward
0
arrow_downward

Я рекомендую вам использовать requirejs для файлов js.

person avi cohen    schedule 16.03.2017