Problems with using JsBarcode and PHP

0

I'm having trouble using JsBarcode and PHP. I dynamically generate the codes through a list. But using the code inside the barcode loop which is as follows:

<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 $codigo_barra['codigo_barras'] variable. What am I doing wrong in this case?

Below the full page code.

<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>
    
asked by anonymous 02.08.2018 / 14:52

1 answer

0

It seems that 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 each time you loop:

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

And, replace the 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 init function of the library:

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

Just boot with the following command:

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

Since the values are directly in the HTML tag and you are using class barcode , you will not have any problems.

CodePen: link

    
02.08.2018 / 15:12