jQuery DevExtreme datagrid: Uncaught TypeError: $ (...). DxDataGrid не является функцией - PullRequest
Новая
       60

jQuery DevExtreme datagrid: Uncaught TypeError: $ (...). DxDataGrid не является функцией

0 голосов
/ 23 марта 2020

У меня проблема с DevExtreme DataGrid с использованием ASP. NET MVC.

Я скачал пакеты NuGet, добавил скрипт в раздел head и все еще вижу ошибку:

Uncaught TypeError: $ (...). DxDataGrid не является функцией.

Есть ли какой-нибудь скрипт, который нужно поставить раньше? Я только что сделал то, что написано в документации DevExtreme .

Вот мой код.

HEAD: 

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>

    <!-- DevExtreme themes -->
    <link rel="stylesheet" href="~/Content/dx.common.css">
    <link rel="stylesheet" href="~/Content/dx.light.css">

    <!-- DevExtreme library -->
    <script type="text/javascript" src="~/Scripts/dx.all.js"></script>
    <!-- <script type="text/javascript" src="js/dx.web.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz-web.js"></script> -->
</head>

HTML: 

<div class="panel panel-default">
    <div class="panel-heading">Output</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-12">
                <div id="gridContainer"></div>
            </div>
        </div>
    </div>
</div>

Javascript: 

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnsubmit").on("click", function () {
            console.log($("#txtTitre").val());
            console.log($("#txtPlot").val());

            if ($("#txtTitre").val() === "" && $("#txtPlot").val() === "") {
                alert("Provide Details to Search !");
            }
            else {
                var obj = {};
                obj.titre = $.trim($("#txtTitre").val());
                obj.plot = $.trim($("#txtPlot").val());

                var apiUrl = "@Url.Action("DataSearch", "AllSearch")";

                $.ajax({
                    type: "POST",
                    contentType: 'application/json',
                    url: apiUrl,
                    dataType: "json",
                    data: JSON.stringify(obj),
                    crossDomain: true,
                    success: function (data) {
                        var response = data;
                        console.log(data);
                        if (data.datasend.length <= 0) {
                            alert("No Data Found!!");
                        } else {

                            var timetook = data.Took;
                            $('div.total-title').text(timetook + " millisecond");

                            $("#gridContainer").dxDataGrid({
                                dataSource: data.datasend,
                                showColumnLines: false,
                                showRowLines: true,
                                rowAlternationEnabled: true,
                                showBorders: true,
                                paging: {
                                    pageSize: 50
                                },
                                scrolling: {
                                    mode: "infinite" // or "virtual" | "infinite"
                                },
                                pager: {
                                    showPageSizeSelector: false,
                                    allowedPageSizes: [5, 10, 20],
                                    showInfo: true
                                },
                                columns: [
                                    {
                                        caption: "Titre",
                                        width: 350,
                                        fixed: true,
                                        dataField: "titre"
                                    },
                                    {
                                        caption: "Plot",
                                        width: 300,
                                        fixed: true,
                                        dataField: "plot"
                                    },
                                     "MaritalStatus",
                                     "Gender",
                                     "SalariedFlag",
                                     "VacationHours",
                                     "SickLeaveHours",
                                     "CurrentFlag"
                                ]
                            });
                        }
                    },
                    error: function (xhr, err) {
                        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                        alert("responseText: " + xhr.responseText);
                    }
                });
            }
        });
    });
</script>

Большое спасибо за ответ.

1 Ответ

0 голосов
/ 25 марта 2020

Ваша настройка выглядит нормально в соответствии с этим примером . Похоже, может быть проблема с загрузкой библиотеки dx.all. js с вашего сервера или кода javascript до загрузки необходимых библиотек! Попробуйте сначала проверить эти возможные причины, используя средства разработки вашего браузера. Просмотрите вкладки консоли / сети или создайте точки останова на инкриминированной строке, перезагрузите и отладьте свой код, чтобы увидеть, действительно ли библиотека загружена в нужной точке.

...