Question

您好我在django / python app中使用数据表，

我有一个索引页面，它从数据库加载一个列表并将其放在数据表中。

从今天早上开始，我的错误始于：

TypeError：C未定义

（似乎指向我定义数据表的那一行）

然后每次在此选项卡上调用setInterval时都会弹出此错误：

ReferenceError：oTable未定义

我的观点：

def index(request):
    listOPT = []
    Data = []

    fluxManagerState = settings.FLUX_MANAGER_STATE
    cursor = connections['site'].cursor()
    try:
        cursor.execute("{CALL SP_webGET_RESUME_MVT_INIT_ACTIF}")
        mouvements = dictfetchall(cursor)
    finally:
        cursor.close()   
    return render(request, 'index.html', locals())

与ajax一起使用以刷新数据表的函数：

def listMVTinit(request):
    cursor = connections['site'].cursor()
    try:
        cursor.execute("{CALL SP_webGET_RESUME_MVT_INIT_ACTIF}")
        data = dictfetchall(cursor)
    finally:
        cursor.close()
    return HttpResponse(json.dumps(data), content_type = "application/json")

我的模板：

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Liste Mouvement initiaux</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="{% static 'css/Gestion_Mouvements.css' %}" rel="stylesheet">
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<link href="{% static 'css/base/jquery-ui.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/jquery.dataTables.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"  media="all">
<link href="{% static 'css//bootstrap-datetimepicker.min.css' %}" media="all" rel="stylesheet">
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/fnReloadAjax.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.js' %}"></script>


<script>
   function getPeseeSilo(){
                  var req = $.ajax({
                url: "{% url 'getPeseeSilo' %}",
                dataType: "json",
                  });
                                 req.done(function(tab) {
                   if(tab.Error == true){
                    console.log(tab.msg);
                   }else{
                                           window.location.replace("mouvementPeseeSilo");
                   }
                  });
        }
   function checkbridgeState(){
                           if (document.getElementById('ebFlux').value == 'False')
                              {
                                 $('#bridgeState').show();
                  var req = $.ajax({
                url: "{% url 'getBridgeState' %}",
                dataType: "json",
                  });
                  req.done(function(tab) {
                   if(tab.Error == true){
                    console.log(tab.msg);
                   }else{
                    document.getElementById('ebBridgeState').value = tab['value'];          
                   }
                  });
                              }
        }
   $(document).ready(function() {
             oTable = $('#indexTab').dataTable({
                 ajax: {
                                    "url": "{% url 'listMVTinit' %}",
                                    "dataSrc": ""
                                  },
                            "columns": [
                                    { "data": "Id" },
                                    { "data": "DateHeureCreat" },
                                    { "data": "Immat_Transporteur" },
                                    { "data": "Poids_Charge" },
                                    { "data": "Sous_Type" },
                                    { "data": "Type_Mouvement" },
                                    { "data": "Libelle" },
                                    { "data": "Espece" }
                                  ],
            });
        });
                   setInterval(checkbridgeState, 1000);
        setInterval(function(){oTable.api().ajax.reload();}, 2000);
</script>
</head>
<body>
<div id="wb_Shape1" style="position:absolute;left:4px;top:5px;width:1300px;height:100px;z-index:0;">
<img src="../static\images/img0001.png" id="Shape1" alt="" style="width:1300px;height:100px;"></div>
<div id="Html1" style="position:absolute;left:4px;top:105px;width:1300px;height:400px;z-index:1">
<table id="indexTab" class="center-all" width="100%" cellspacing="0">
            <thead>
            <tr>
                <th>ID</th>
                <th>Date et heure création</th>
                <th>Véhicule</th>
                <th>Pesée 1</th>
                <th>Type mouvement</th>
                <th>Sous type</th>
                <th>Code espèce</th>
                <th>Libellé espèce</th>
                <th></th>
            </tr>
        </thead>
        <tbody>     
           {% for mouvement in mouvements %}
            <tr>
            <th>{{mouvement.Id}}</span></th>
            <th>{{mouvement.DateHeureCreat}}</span></th>
            <th>{{mouvement.Immat_Transporteur}}</span></th>
            <th>{{mouvement.Poids_Charge}}</span></th>
            <th>{{mouvement.Type_Mouvement}}</span></th>
            <th>{{mouvement.Sous_Domaine}}</span></th>
            <th>{{mouvement.Espece}}</span></th>
            <th>{{mouvement.Libelle}}</span></th>
            <th><a target="_blank" href="/gestion_mouvement/mouvementDetails/{{mouvement.Id}}"><button type="button" class="editbtn">Edit</button> <button class="deletebtn">Delete</button></a></th>
            </tr>
            {% endfor %}
        </tbody>
</table></div>
<div id="bridgeState" style="display:none;">
<input type="text" id="ebBridgeState" style="position:absolute;left:15px;top:17px;width:900px;height:30px;line-height:30px;z-index:2;" name="ebFluxState" value="" readonly spellcheck="false">
<input type="button" id="btnPeseeSilo" onclick="getPeseeSilo();return false;" name="btnPeseeSilo" value="Pesée 1 Silo" style="position:absolute;left:936px;top:17px;width:96px;height:40px;z-index:3;">
<a target="_blank" href="/gestion_mouvement/mouvementCreation"><input type="button" id="btnCreateManual" name="btnCreateManual" value="Création Manuelle" style="position:absolute;left:1037px;top:17px;width:119px;height:40px;z-index:4;">
<input type="text" id="ebFlux" style="position:absolute;left:1191px;top:24px;width:86px;visibility:hidden;height:17px;line-height:17px;z-index:5;" name="Editbox1" value="{{fluxManagerState}}" spellcheck="false">
</body>
</html>

我不知道为什么我突然遇到这个错误，我试图在我的数据表设置中添加选项，从那时起我就遇到了这个问题。

Answer 1

oTable在$(document).ready()回调中定义，但在回调之后引用。通过干净的缩进更容易发现这一点：

$(document).ready(function() {
    oTable = $('#indexTab').dataTable({
        ajax: {
            "url": "{% url 'listMVTinit' %}",
            "dataSrc": ""
        },
        "columns": [
            { "data": "Id" },
            { "data": "DateHeureCreat" },
            { "data": "Immat_Transporteur" },
            { "data": "Poids_Charge" },
            { "data": "Sous_Type" },
            { "data": "Type_Mouvement" },
            { "data": "Libelle" },
            { "data": "Espece" }
        ],
    });
});
setInterval(checkbridgeState, 1000);
setInterval(function(){oTable.api().ajax.reload();}, 2000);

由于您未将oTable声明为本地（使用var oTable），因此它当然可以在$().ready()回调之外访问，但不在此之前回调已被执行。在这里你在回调执行之前引用它，所以它确实没有定义。

显而易见的解决方案是在回调中移动setInterval()来电（当你在它的时候，让oTable本地更干净，因为你不再需要它是全局的）

注意：这不会解决“C未定义”TypeError，但由于代码中没有对变量“C”的引用，因此如果不运行整个该死的东西，就无法调试它。但是现代浏览器现在都有步调试器，所以最好的办法就是在这一行放置一个断点并进入函数代码，直到找到罪魁祸首。

数据表未使用django引用错误

1 个答案: