John Davidson

php - JsBarcode options does not work with jQuery

0 comments
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.

Rate this post

4 of 5 based on 7953 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us