Widget Client Script function run after HTML Form is loaded

[PaKe]

Hey,

I have a Widget with a HTML Table with Input-Fields. I want to fill these fields with data, when there is any. 

So I load the data in the server script and want to fill the HTML Fields in the Client Script with "document.getElementById('ID').value = anyValue". Unfortunately I always got an Error: "TypeError: Cannot set property 'value' of null". 

How can I load the HTML Table before my Client Script Function runs?

c.$onInit = function() {
c.criteriaData = c.data.loadData[1];
			for(var j = 0; j < 2; j++){
				//document.getElementById('comment'+j).value = c.commonData[j].comments;
				//result.overall_rating = c.data.nttRatings[j].overall_rating;
				for(var i = 0; i < c.data.criteria.length; i++){
					document.getElementById(c.criteriaData[i].name+'Rating'+j).value = c.criteriaData[i].rating;
					document.getElementById(c.criteriaData[i].name+'Causer'+j).value = c.criteriaData[i].causer;
					document.getElementById(c.criteriaData[i].name+'Comment'+j).value = c.criteriaData[i].comment;
				}
		}
  };

[Michael Jones - · Accepted solution]

Generally speaking the html template should be fully rendered before your client script would execute. Are you positive that your script is returning the correct ID's? Try adding something like :

console.log('Id is: ' + c.criteriaData[i].name+'Rating'+j);

And see what you're getting in the console. 

Otherwise, if you're getting the expected values for ID then you might try wrapping things in a timeout to "give" yourself some time to be sure the html has rendered. 

    c.$onInit = function() {
        setTimeout(function() {
            c.criteriaData = c.data.loadData[1];
            for (var j = 0; j < 2; j++) {
                //document.getElementById('comment'+j).value = c.commonData[j].comments;
                //result.overall_rating = c.data.nttRatings[j].overall_rating;
                for (var i = 0; i < c.data.criteria.length; i++) {
                    document.getElementById(c.criteriaData[i].name + 'Rating' + j).value = c.criteriaData[i].rating;
                    document.getElementById(c.criteriaData[i].name + 'Causer' + j).value = c.criteriaData[i].causer;
                    document.getElementById(c.criteriaData[i].name + 'Comment' + j).value = c.criteriaData[i].comment;
                }
            }
        }, 500);
    };

Last, but not least, is there a specific reason you are setting the values in your table with javascript, rather than building your html template to populate using ng-repeat and accessing your data object directly?

I hope this helps!

If this was helpful or correct, please be kind and remember to click appropriately!

Michael Jones - Proud member of the CloudPires team!

[PaKe]

Maybe it's not the nicest way but setTimeout works. Thank you!