Problems using Jsbarcode and PHP

Asked

Viewed 128 times

0

I’m having trouble using Jsbarcode and PHP. I dynamically feed the codes through a list. But when using the code within the bar code loop which is the following:

<img id="barcode"/>
        <script>
        var codigo = '<?php echo $codigo_barra['codigo_barras'];?>';
        JsBarcode("#barcode", codigo , {
          displayValue:true,
          fontSize:24,
          lineColor: "#0cc"
        });
        </script>

it repeatedly generates only 1 code and I have 4 different codes generated in the variable $codigo_barra['codigo_barras']. What am I doing wrong in this case?

Below the full code of the page.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/etiquetas.css">
  <script src='js/JsBarcode.all.min.js'></script>

</head>
<body>
  <?php foreach($codigo_barras as $codigo_barra):
    ?>
    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <table>
  <tr>
    <td>
      <div><h2><?=$codigo_barra['desc_produto'];?></h2></div>
      <input type="hidden" name="codigo_barras" value="<?=$codigo_barra['codigo_barras'];?>">
    </td>
  </tr>
  <tr>
    <td>
      <table class="table table-bordered">
     <tr>
       <?php
       $produtos_grade = buscaCompraProdutoGrade($conexao, $id_compra, $codigo_barra['id_sequencia']);
       foreach ($produtos_grade as $produto_grade):
        ?>
       <td>
         <div class="form-group">
         <div><kbd><label for="inputCity">
         <?=$produto_grade['tamanho'];?></label>
         </kbd><br>
         <b><label for="inputCity"><?=$produto_grade['quantidade'];?></label></b>
       </div>
     </div>
       </td>
     <?php endforeach ?>
     </tr>
     </table>
    </td>
  </tr>
  <tr>
    <td>
      <div>Data previsão: <b><?php
      $data = date_create($codigo_barra['previsao']);
      echo date_format($data,'d/m/Y');?>
    </b></div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <img id="barcode"/>
        <script>
        var codigo = '<?php echo $codigo_barra['codigo_barras'];?>';
        JsBarcode("#barcode", codigo , {
          displayValue:true,
          fontSize:24,
          lineColor: "#0cc"
        });
        </script>
        <?php echo $codigo_barra['codigo_barras'];?>
      </div>
    </td>
  </tr>
  </table>
</div>
</div>
<?php endforeach; ?>
</body>
php javascript

  • Not knowing how you generated the value of $codigo_barra['codigo_barras'], how was the value generated and how should be impossible to answer.

  • I edited the question with full code

  • id should be unique, you’re repeating the id barcode. And the function JSBarcode is pointed fixed to a single id

  • so if I put the barcode as its own id and game in the Jsbarcode function it gives the error: Jsbarcode.all.min.js:2 Uncaught Domexception: Failed to execute 'querySelectorAll' on 'Document': '#000120000001000063002001' is not a Valid selector. That is, the library itself makes a querySelectorAll

  • The ID used is invalid for CSS, see this thread: https://github.com/DevExpress/testcafe/issues/1899#issuecomment-338203498 or in this link: https://www.w3.org/TR/CSS21/syndata.html#value-def-Identifier

1 answer

0


Apparently, your problem is a matter of the selector being used incorrectly.

You have two ways to solve your problem.

The first is to create a unique id for each time you loop:

foreach($codigo_barras as $key => $codigo_barra):
    $idBarcode = "barcode{$key}";

And, replace fixed id:

<img id="<?= $idBarcode; ?>"/>
    <script>
    var codigo = '<?php echo $codigo_barra['codigo_barras'];?>';
    JsBarcode("#<?= $idBarcode; ?>", codigo , {
      displayValue:true,
      fontSize:24,
      lineColor: "#0cc"
    });
</script>

Another is to use the properties jsbarcode-*and the function init of the library:

<img class="barcode"
  jsbarcode-value="<?= $codigo_barra['codigo_barras']; ?>"
  jsbarcode-fontSize="24"
  jsbarcode-lineColor= "#0cc" />

Just initialize with the following command:

JsBarcode(".barcode").init();

Since the values are directly in the HTML tag and are using the class barcode, no problem at all.

Codepen: https://codepen.io/gabrielheming/pen/RByppa

  • Dude, that first option to replace the fixed id worked perfectly. Thank you very much. Hugs.

  • Both options work, it’s just the convenience of choosing one or the other.

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.