Kesalahan Referensi Tidak Tertangkap: $ tidak ditentukan saat memuat pemilih tanggal dan waktu bootstrap di mvc

Saat saya menambahkan pemilih waktu tanggal bootstrap, kalender saat mengklik "glyphicon glyphicon-calendar" tidak dimuat, telah menambahkan semua file tetapi menunjukkan kesalahan:

Kesalahan Referensi yang Tidak Tertangkap: $ tidak ditentukan pada 1:417

lihat halaman:

<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"
            ));

Halaman dafault.cshtml (halaman tata letak)

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

Mengapa kalender tidak dimuat saat mengklik tautan dan menghasilkan di $jquery, saya rasa saya telah memberikan kode dan skrip dengan benar. adakah yang bisa membantu saya menemukan solusinya ??


javascript jquery asp.net-mvc asp.net-mvc-4 bootstrap-datetimepicker
person user256    schedule 16.03.2017    source sumber
comment
sangat jelas, Anda telah mendeklarasikan dua bundel bernama jquery. Pertama, coba hapus duplikatnya dan lihat apakah itu membantu. Sepertinya momen juga disertakan dua kali (sekali di bundel dan sekali di HTML)   -  person ADyson    schedule 16.03.2017
comment
Sebagai catatan tambahan, bundel Anda harus memiliki versi yang tidak diperkecil (sehingga versi lengkap dirender dalam mode debug, dan versi yang diperkecil secara otomatis dimuat dalam mode rilis)   -  person    schedule 16.03.2017
comment
setelah memberikan versi yang diperkecil, itu juga tidak berfungsi   -  person user256    schedule 16.03.2017
comment
Kemungkinan duplikat dari Bootstrap datetimepicker bukan fungsi   -  person Koby Douek    schedule 16.03.2017

Jawaban (2)


arrow_upward
5
arrow_downward

Pertama, pindahkan $('#datetimepicker1').datetimepicker(); ke $( document ).ready:

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

Juga - Anda mencoba menggunakan fungsionalitas JQuery sebelum memuatnya.

Di BundleConfig.cs Anda, sertakan JQuery terlebih dahulu:

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
...

Dan di halaman dafault.cshtml Anda, ubah urutan rendering dan biarkan bootstrap css untuk yang terakhir:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/moment")
@Styles.Render("~/css/bootstrap")
person Koby Douek    schedule 16.03.2017
comment
tetapi setelah memberikan seperti yang Anda katakan, kalender tidak memuat seperti sebelumnya dan menampilkan kesalahan lain 1:423 Uncaught TypeError: $(...).datetimepicker is not a function in the script mengapa demikian? - person user256; 16.03.2017
comment
ya saya telah memberikan dan menunjukkan dalam pertanyaan saya tetapi itu menunjukkan kesalahan di $('#datetimepicker1').datetimepicker(); ?? kenapa gitu ? - person user256; 16.03.2017
comment
Coba pindahkan $('#datetimepicker1').datetimepicker(); hanya setelah $( document ).ready(...) - person Koby Douek; 16.03.2017
comment
Maaf, bisakah Anda memberi tahu cara memberi, saya tidak mengerti - person user256; 16.03.2017
comment
kesalahan yang sama berulang Uncaught TypeError: $(...).datetimepicker1 is not a function ?? - person user256; 16.03.2017
comment
Apakah situs ini tersedia untuk dilihat secara online? - person Koby Douek; 16.03.2017
comment
Tidak, saya hanya membangunnya - person user256; 16.03.2017
comment
apa yang 1 pada akhirnya? - person Koby Douek; 16.03.2017
comment
maaf terlambat membalas, saya punya 1 masalah lagi, tanggal yang dipilih berdasarkan kalender tidak tersimpan di database, kenapa begitu? - person user256; 17.03.2017

arrow_upward
0
arrow_downward

Saya menyarankan Anda untuk menggunakan requirejs untuk file js

person avi cohen    schedule 16.03.2017