Uncaught ReferenceError: $ ไม่ได้ถูกกำหนดไว้เมื่อโหลดตัวเลือกวันที่เวลาบูตสแตรปใน mvc

เมื่อฉันเพิ่มตัวเลือกวันที่เวลาบูต ปฏิทินเมื่อคลิกที่ "glyphicon glyphicon-calendar" ไม่โหลด ได้เพิ่มไฟล์ทั้งหมดแล้ว แต่แสดงข้อผิดพลาด:

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 ฉันคิดว่าฉันได้ให้รหัสและสคริปต์ถูกต้องแล้ว ใครสามารถช่วยฉันหาวิธีแก้ปัญหาได้บ้าง ??


comment
เห็นได้ชัดว่าคุณมีสองบันเดิลที่เรียกว่า jquery ประกาศ ขั้นแรก ให้ลองลบรายการที่ซ้ำกันออกและดูว่าจะช่วยได้หรือไม่ ดูเหมือนว่า Moment จะถูกรวมไว้สองครั้งด้วย (ครั้งหนึ่งอยู่ในบันเดิลและอีกครั้งใน HTML)   -  person ADyson    schedule 16.03.2017
comment
ตามหมายเหตุด้านข้าง บันเดิลของคุณควรมีเวอร์ชันที่ไม่ย่อขนาด (ดังนั้นเวอร์ชันเต็มจะถูกเรนเดอร์ในโหมดแก้ไขข้อบกพร่อง และเวอร์ชันย่อเล็กสุดจะถูกโหลดโดยอัตโนมัติในโหมดรีลีส)   -  person    schedule 16.03.2017
comment
หลังจากให้เวอร์ชันย่อแล้ว มันก็ใช้งานไม่ได้เช่นกัน   -  person user256    schedule 16.03.2017


คำตอบ (2)


ขั้นแรก ให้ย้าย $('#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 is not a function in the script ทำไมเป็นเช่นนั้น - 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 is not a function ?? - 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

ฉันขอแนะนำให้คุณใช้ requirejs สำหรับไฟล์ js

person avi cohen    schedule 16.03.2017