grid.setStyle() causes exception if div id begins with digit

per w3.org/TR/CSS21/syndata.html … identifier

“In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit”

However, the random id for the grid div does sometimes begin with a digit. Here’s an example:

<div class="dhxform_container gridbox gridbox_dhx_web isModern" id="12kLGGiQsEcU" style="width: 460.1px; height: 268px; cursor: default;">

In which case any attempt to call grid.setStyle() with non-blank styles will cause an exception. Here is an example error msg in Chrome (occurs in IE11 also):

SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet':Failed to parse the rule '#12kLGGiQsEcU table.hdr td { color:#000000;font-family:Verdana;font-size:9pt;background-color:#FFFFFF }'

From v4.2 dhtmlx_debug.js: I think I’ve isolated the problem. form.addItem calls _prepareItem, which calls _genStr(12) to generate the uid:

[code] this._prepareItem = function(data, pos, insertAfter) {

	var type = (data!=null && data.type!=null ? data.type : "");
	
	if (this.items[type]) {
		
		if (!data.name) data.name = this._genStr(12);
		var id = data.name;
		if (this.objPull[this.idPrefix+id] != null || type=="radio") id = this._genStr(12);
		
		var obj = data;
		obj.label = obj.label||"";
		//obj.value = obj.value||"";
		obj.value = obj.value;
		obj.checked = window.dhx4.s2b(obj.checked);
		obj.disabled = window.dhx4.s2b(obj.disabled);
		obj.name = obj.name||this._genStr(12);
		obj.options = obj.options||[];
		obj.rows = obj.rows||"none";
		obj.uid = this._genStr(12);  <<----------------------

[/code]
and it appears that _genStr does not guarantee that the first char is a non-digit:

// generate random string with specified length this._genStr = function(w) { var s = ""; var z = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; for (var q=0; q<w; q++) s += z.charAt(Math.round(Math.random() * (z.length-1))); return s; }

Note: other usages of _genStr sometimes append the result to a prefix, so the problem of illegal identifiers beginning with a digit may be rather isolated. Further, since the majority of the time, _genStr will result in a string begining with an alpha, the problem is intermittent (aren’t those fun!)

There appear to have been a few reports in this forum of non-reproducible problems with setStyle in the past, and I’m sure some are this issue.

The modified _genStr function below resolves this problem by guaranteeing a non-digit first char. The function is defined in three locations in dhtmlx_debug.js

	// generate random string with specified length
	//REW modified to prevent first char from being a digit to avoid illegal CSS identifier
	this._genStr = function(w) {
		//var s = ""; 
		var z = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		var z1 = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var s = z1.charAt(Math.round(Math.random()* (z1.length-1)))
		for (var q=1; q<w; q++) s += z.charAt(Math.round(Math.random()* (z.length-1)));
		return s;
	}

the original version is:

	this._genStr = function(w) {
		var s = ""; var z = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		for (var q=0; q<w; q++) s += z.charAt(Math.floor(Math.random() * z.length));
		return s;
	}

This appears to be a bug. Please review my recommended patch and let me know if this is a valid solution. I’d appreciate this being fixed in the source so that I don’t have to port my patch forward to the next version. Thanks.

Hi

I will add fix like:

this._genStr = function(w) { var s = "dhxId_"; ....

Thanks!