Step by step - Learn how to use callas productscallas pdfChipLoading resources dynamicallyDynamically update barcodes (or other HTML objects using parameters)

Dynamically update barcodes (or other HTML objects using parameters)

Attached is a HTML template which is an example for a Ticket. The HTML loads a JavaScript that dynamically adds an (attendee) name and updates the barcode objects (an object using Code 128 and an QR code) to encode the name in the DOM and writes a new page into the result PDF.

You should download unpack and open the attachment in order to follow the steps of this article.

The JavaScript in the example modifies the barcode objects in the DOM before it creates a new page. The problem with that is that a modification of the parameters of an object does internally not force the engine to update the whole DOM. So, in order to enforce a DOM update that really reflects the changes we need to take an additional action. This simply takes place by setting the updated DOM object to itself:

document.getElementById("bc1").innerHTML = document.getElementById("bc1").innerHTML;
Click to copy

Or with context:

function cchipPrintLoop() {
	for (var i = 0; i < attendees.length; i++) {
		document.getElementById("guest").innerHTML = attendees[i].Name;
		document.getElementById("barguest").value = attendees[i].Name;
		document.getElementById("qrguest").value = attendees[i].Name;
		// Resolve update problem: Re-assign barcode data in order to trigger updates
		document.getElementById("bc1").innerHTML = document.getElementById("bc1").innerHTML;
		document.getElementById("bc2").innerHTML = document.getElementById("bc2").innerHTML;
Click to copy

In the cchipPrintLoop function for all attendee entries the name on the PDF page is added and then the two barcode objects, identified by their CSS-IDs "barguest" and "qrguest" are modified. Then the enclosing CSS-IDs "bc1" and "bc2" are updated with themselves in order to force the DOM to be updated.