How to create and update barcode objects dynamically

As barcode objects are custom objects implemented by pdfChip, and are not regular parts of the DOM, when dynamically creating or updating barcode objects, it is necessary to force an update of a barcode object after it has been created or modified. The method to enforce such updating is surprisingly simple: the (modified) barcode is virtually assigned to itself...

The example illustrated in this article explains how this can be achieved, by means of a simple HTML file, with some JavaScript included in its <head> tag, that creates several pages, each with on QR-Code on it, and the text that has been encoded in the QR-Code in plain text below the QR-Code.

	<body style="padding: 20mm; ">
		<p>Dynamically creating/updating a QR-Code <br/>(requires use of cchipPrintLoop() / JavaScript)<p>
		<object id='id_barcode' type='application/barcode'>
			<param name='type' value='QR-Code'/>
			<!--  the 'data' entry wil be dynamically populated by the JavaScript above -->
			<param id='id_barcodedata' name='data' value='Hello World!' />
			<param name='modulewidth' value='2mm'>
			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
		</object>
		<p id="id_barcodecontent" style="color: #888">placeholder for the data encoded in the QR-Code</p>
	</body>

Two parts of the content shown above (in dark blue bolded text) are filled repeatedly by the JavaScript below.

  • first, the parameter "daat" inside the barcode object (identified by "id_barcodedata") is set to the new value (taken from an array of values)
  • next, an update is forced by assigning the modified set of parameters to the barcode object (essentially simply by setting "b.innerHTML = b.innerHTML")
  • last but not least, the text below the QR-Code, identified by "id_barcodecontent" is also modified; a forced update is not necessary, as the <p> tag and its content are regular parts of the DOM – any changes to it take effect immediately.
		<script>
			// the data variable contains the entries to be used for dynamically populating teh QR-Codes
			var data =
			[
				  { data: "Wir heissen Sie sehr herzlich willkommen in der wunderbaren Welt von callas pdfChip!" }
				, { data: "We welcome you very warmly in the wonderful world of callas pdfChip!" }
				, { data: "Nous vous accueillons chaleureusement la bienvenue dans le monde merveilleux de callas pdfChip!" }
				, { data: "Wij heten u van harte welkom in de wondere wereld van callas pdfChip!" }
				, { data: "Vi diamo il benvenuto caloroso benvenuto al meraviglioso mondo della Callas pdfChip!"}
				, { data: "Nós recebê-lo calorosamente bem-vindos ao maravilhoso mundo dos callas pdfChip!"}
				, { data: "Le damos la bienvenida con gusto la bienvenida al maravilloso mundo de las calas pdfChip!"}
			];
			// - sets new value for the QR Code data
			// - forces an update by inserting  the parameter entries - i.e. the children
			//   of the barcode object - into the barcode object itself
			function setBarcode(d) {
				document.getElementById('id_barcodedata').setAttribute('value',d.data);
				//force update for parameters of the barcode object: 
				var b = document.getElementById('id_barcode');
				b.innerHTML = b.innerHTML;
				// also set the text below the QR-Code to the same value
				var p  = document.getElementById('id_barcodecontent');
				p.innerHTML = d.data;
			}
			
			// cchipPrintLoop() is a pdfChip specific function that makes it possible to dynamically generate pages
			function cchipPrintLoop(){
				for(i=0;i<data.length;++i){
					setBarcode(data[i]);
					cchip.printPages(1);
				}
			}
		</script>

Seven pages are created by the sample HTML file provided at the bottom of this article:

The contents of one of the generated pages / QR-Codes:

An example HTML file is provided below for download:

update_barcode_objects_dynamically.html