Message:

I'm using jQuery to generate the barcodes and tried to add the size options but it doesn't work. The demo at https://codepen.io/lindell/pen/mPvLXx?editors=1010 isn't working for me because I am using php to loop through the items then only loop it again to generate the barcode.

<!DOCTYPE html>

<html>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link rel="stylesheet" href="https://www.ssms.anrcorporation.com/assets/bower_components/bootstrap/dist/css/bootstrap.min.css">

  <script src="https://www.ssms.anrcorporation.com/assets/bower_components/jquery/dist/jquery.min.js"></script>

  <script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js">

  </script>

</head>

<body>



<div class="container bg-white">

    <?php if(!empty($items)){ foreach($items as $row){ ?>

        <svg id="<?= $row['sn']; ?>"></svg>

    <?php }} ?>

</div>



<script>

$(document).ready(function(){

    const items = <?= !empty($items) ? json_encode($items) : json_encode([]); ?>;

    if(items){

        items.map(item => {

            $(`#${item.sn}`).JsBarcode(`SSN : ${item.sn}`)

            .options({font: "OCR-B", height: 25, width: 35})

            .render();

        })

    }

})

</script>



<script src="https://www.ssms.anrcorporation.com/assets/bower_components/jquery-ui/jquery-ui.min.js"></script>

<script src="https://www.ssms.anrcorporation.com/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

</body>

My Answer:
To use JsBarcode options with jQuery, you can pass the options as an object when calling the JsBarcode function. Here's an example of how you can do this:

javascript

// Loop through items and generate barcodes

$('.item').each(function() {

    var barcodeValue = $(this).data('barcode');

    

    // Generate barcode with options

    JsBarcode(this, barcodeValue, {

        format: "CODE128",

        width: 2,

        height: 50,

        displayValue: false

    });

});

In this example, we are looping through elements with the class 'item', getting the barcode value from a data attribute, and then calling JsBarcode with the specified options (format, width, height, displayValue).

Make sure to include the JsBarcode library in your project and also include jQuery before the script that contains the above code.

If you are still facing issues, please provide more details or code snippets so that I can assist you further.

John Davidson

php - JsBarcode options does not work with jQuery

Rate this post

Comments