Suggestion: support data-barcode on target object

[fschaeffer]

I am using your great library in an web application where the barcode value(s) are being output from a db. As the values for that barcode are dynamic and there will be more than one barcode I can't construct the values in JS by using an ID.

For the time being I use a jQuery snippet which reads the barcode information from the data property.

As your script uses string.search it is necessary to first cast the result of the data-call value to string to avoid an exception.

HTML <img class="barcode" data-barcode="4012700014825">

JS

$(document).ready(function () {
    $('.barcode').each(function () {
        var barcodeValue = "" + $( this ).data('barcode'),
            barcodeType = "ean" + barcodeValue.length;

        $( this ).JsBarcode(barcodeValue, {
            format: barcodeType , 
            height: 40, 
            displayValue:true, 
            fontSize:14, 
            textMargin: 2, 
            background: "transparent", 
            margin: 0
        });
    });            
});

It would be great to add support for this data property by default.

[lindell]

This could absolutely be something that might be implemented.

I imagine the entire use being something like:

<img class="barcode" barcode-value="4012700014825" barcode-marign="0" barcode-format="ean13" />

window.onload = function(){
  JsBarcode(".barcode").init(); //Probably something else than init()
}

What would you consider being the optimal way of using this kind of interaction with the library?

[lindell]

As your script uses string.search it is necessary to first cast the result of the data-call value to string to avoid an exception.

This is a bug and should be fixed.

[fschaeffer]

That's a great idea, so basically add a possibility to configure every option in the target object, but I would prefer using data-jsbarcode- or data- as this is the normal jQuery way of defining options.

And another thing is JsBarcode(".barcode") works, JsBarcode($( this )) fails as only strings are allowed.

The call init() sounds good. As I prefer doing $('object').JsBarcode() the usage of init() should also work here.

I also created an HTML-table from DB by using this snippet, called JsBarcode on all selectors and got a nice view including EAN8 and EAN13-codes.

[lindell]

That's a great idea, so basically add a possibility to configure every option in the target object, but I would prefer using data-jsbarcode- or data- as this is the normal jQuery way of defining options.

I think barcode-* or jsbarcode-* look much better but data-jsbarcode-* maybe be an extra way of doing it. data-* is actually just a standard from before HTML5 when attributes could not be anything and still be W3C valid. And the thing about it being normal in jQuery, unfortunately the library is not focusing on jQuery any more even if the support is still going to remain.

And another thing is JsBarcode(".barcode") works, JsBarcode($( this )) fails as only strings are allowed.

JsBarcode(something) does not only support strings. It supports string (querySelector), image objects, svg objects and canvas objects. It does not support passing jQuery object, you have to use the jQuery api for that ($(something).JsBarcode()). You could use JsBarcode(this) instead of JsBarcode($( this )) and it would work.

The call init() sounds good. As I prefer doing $('object').JsBarcode() the usage of init() should also work here.

It would :smile:

I also created an HTML-table from DB by using this snippet, called JsBarcode on all selectors and got a nice view including EAN8 and EAN13-codes.

?

[lindell]

And by the way. Is the app you are building publicly available somewhere for me to take a look at? :smile: It's always fun to se where the library is used.

[fschaeffer]

The application will be launched the next weeks and will have at least some areas publicly available (one of them having the JsBarcode displayed), so stay tuned :smile:

The HTML-example was meant to give some cheer to you, as the table is > 1000 lines of items and all of them render in nearly no time :clap:

[lindell]

Put up an alpha version with the basic premise working but a lot of things not. Demo here

The application will be launched the next weeks and will have at least some areas publicly available (one of them having the JsBarcode displayed), so stay tuned :smile:

Nice :smile: I want to take a look then.

The HTML-example was meant to give some cheer to you, as the table is > 1000 lines of items and all of them render in nearly no time :clap:

Ah, nice :smile: :bow:

[fschaeffer]

Just tested your fiddle and it is working as expected, all tested options are recognized. I was unable to get an img-tag to show but maybe this was out of scope, or maybe I should just switch to svg :smile:

[lindell]

All options should work. The things I recognized as problems was images not working and not erroring on incorrect data, but it could be more things. Of course these should be fixed before any stable release. But you should probably switch to SVG either way :wink:. In normal conditions it is rendered pixel identical to the canvas/img alternative but scales much betters if the webpage is not rendered in 100%.

Example with 200% zoom.

[fschaeffer]

Great, will wait for final release and then integrate it into my page / siwtch to SVG. Maybe I will find some other use cases soon

[lindell]

Those problems pointed out earlier are now fixed. Did not tag it as stable yet as I should do some more tests before that. Same demo as before but now with img included.

[lindell]

v3.3.0-beta.2 added the missing support of jQuery init (of more than 1 element).

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

[lindell]

Did release v3.3.0 now. Closing the issue.