Как исправить: JsBarcode "Нет элемента для отображения."ошибка - PullRequest
Новая
       14

Как исправить: JsBarcode "Нет элемента для отображения."ошибка

0 голосов
/ 19 февраля 2019

Я довольно новичок в JS и jQuery, поэтому, пожалуйста, извините меня, если я скажу / сделаю что-нибудь глупое.Я пытаюсь создать инструмент, который будет динамически преобразовывать данные таблицы в штрих-код в таблице HTML с использованием jQuery и jsBarcode.У меня есть рабочий стол, но я получаю сообщение об ошибке, когда пытаюсь сделать перевод td в штрих-коды.У меня есть ощущение, что это как-то связано с порядком операций, но я не могу понять это.Вот что я вижу в консоли, и моя таблица не отображается при нажатии кнопки. 

Console:JsBarcode.all.min.js:2 Uncaught NoElementException: No element to render on.
    at new e (http://127.0.0.1:61214/JsBarcode.all.min.js:2:9642)
    at j.render (http://127.0.0.1:61214/JsBarcode.all.min.js:2:23674)
    at x (http://127.0.0.1:61214/JsBarcode.all.min.js:2:22568)
    at HTMLButtonElement.<anonymous> (http://127.0.0.1:61214/index4.html:62:19)
    at HTMLButtonElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:10316)
    at HTMLButtonElement.q.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:8343)

JSBarcode требует тег SVG с идентификатором для перевода текста в штрих-коды.Например: 

    <svg id="barcode"></svg>

Затем некоторые js или jQuery: 

    JsBarcode("#barcode", "Hi!");
    // or with jQuery
    $("#barcode").JsBarcode("Hi!");

Я убедился, что библиотека jsBarcode не сломается при использовании в таблицах.Я переместил свой сценарий в конец HTML-кода на случай, если возникла проблема с порядком операций, но я до сих пор не убежден.Поэтому я здесь!

Код работает нормально и успешно вставляет теги svg с правильными идентификаторами в соответствии с данными таблицы.но как только я вставляю свой javascript из jSBarcode с правильными переменными, как это, он ломается 

    JsBarcode(canvas, currValue);

Вот мой код:

HTML 

<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="JsBarcode.all.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div style="margin-top: 50px; margin-left: 250px; margin-right: 250px;">
    <button>Create Table</button>
    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>
<p id="p1"></p>

Сценарий: 

<script>

      var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }

//Create table and fetch data from JSON Object.
        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = json_obj.cars.length;
              var k = 0;
              var table_body = '<table border="1" id="example"><thead><tr><th>Cars</th><th>Models</th></tr></thead><tbody>';
              for(j in json_obj.cars){
              for(i =0;i<json_obj.cars.length;i++){
                    table_body+='<tr>';
                    table_body +='<td>';
                    table_body +=json_obj.cars[k]["name"];
                    table_body +='</td>';


                    var currVal = json_obj.cars[k].models[i];//pulls data

                    var stringy = JSON.stringify(currVal);    //stringifies data| Needed?
                    var currValue = stringy.replace(/["']/g, "");//removes quotes and creates valid var
                    console.log(currValue);                     //logging
                    var canvas = "#"+currValue;                 //creates id string for svg tags
                    console.log(canvas);                        //logging

                    table_body +='<td><svg id="'+currValue+'"></svg>';//adds svg block to HTML with data specifc id

                    table_body +=json_obj.cars[k].models[i];     //adds data string

                  //JsBarcode(canvas, currValue);//jsBarcode Translation BREAKS CODE HERE!!


                    table_body +='</td>';

                    table_body+='</tr>';
              }
              k++;
            }
          table_body+='</tbody></table>';
          $('#tableDiv').html(table_body);
          //display data..........
    });

});

Моя цель - добавить штрих-коды в теги TD в соответствии с данными в нем.

1 Ответ

0 голосов
/ 20 февраля 2019

Переменная canvas - это строка в вашем примере, но JsBarcode ожидает объект Element или HTML DOM.Например: 

var canvas = document.getElementById(currValue);

или: 

var canvas = $('#'+currValue)[0];

Не уверен, что это решит вашу проблему.Я не работаю с JQuery или JsBarcode.

...