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.

Tickets_Example_100.zip

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;
		cchip.printPages();
	};
};
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.