innerHTML conversion for Asynchronous DP deployment

[JEllington]

Since the CB 10.0 upgrade Ive been updating all the deploy codes in my datapages  utilizing the new Asynchronous DataPage Deployment Method (a noticeable pageload improvement over the legacy deployment method, plus no more chrome deprecated warnings in the console Thank you for this improvement Caspio). One problem I am faced with now is I have several tabular report pages that conditionally load link buttons dependent on the status field of each row. With the legacy page deployment I was able to perform this with the following script in an html block... 

<script>
var stat = '[@field:Status]'
if (stat == 'Assigned') {
document.write('<a class="recordActions" href="assignedwopage.html?on=[@field:WO_Num]&at=[@field:Assigned_Tech]&stat=begin">View/Open WO</a>');
 }
else if (stat == '~Suspended') {
document.write('<a class="recordActions" href="resumewopage.html?on=[@field:WO_Num]&at=[@field:Assigned_Tech]">Resume WO</a>');
}
else {
document.write('<label>WO Pending Review</label>');
}
</script>

--------------------------------------------------------
The innerHTML solution I came up with to replace the document.write follows...

<div id="linkto"></div>
<script>
var stat = '[@field:Status]'
if (stat == 'Assigned') {
document.getElementById("linkto").innerHTML = '<a class="recordActions" href="assignedwopage.html?on=[@field:WO_Num]&at=[@field:Assigned_Tech]&stat=begin">View/Open WO</a>';
}
else if (stat == '~Suspended') {
document.getElementById("linkto").innerHTML = '<a class="recordActions" href="resumewopage.html?on=[@field:WO_Num]&at=[@field:Assigned_Tech]">Resume WO</a>';
}
else {
document.getElementById("linkto").innerHTML = '<label>WO Pending Review</label>';
}
</script>

Apparently this does not work because the “linkto” div is an html collection within the html block and improperly assigns the last read value to only the first row in the table. I tried a createElement method along with several other ideas all with the same results.
Can anyone please inform me on the proper method to perform for the desired result of displaying a link button conditionally in a report.
Thanks in advance for any and all suggestions.

 

[Dazzler]

If your WO_Num field is a unique id of the records in the report, try the following...

    <div id="linkto[@field:WO_Num]"></div>

    document.getElementById("linkto[@field:WO_Num]").innerHTML = blah blah blah

I have traditionally done this to ensure each div has a unique id, and it works with the Asynchronous deployment method

...

However I am finding it does not to work any more in a DataPage Header (with the Asynchronous deployment method)  

EDIT: I have only found this to work if the innerHTML statement is placed after the Header Element of the DataPage (ie. in a subsequent HTML Block), but then it is called for every record when the content is only in my report heading) 

 

[JEllington]

Dazzler.. Thank you!! Brilliant fix. I was trying to figure out how to loop through each row and this does the trick perfectly.
Many thanks on the amount of hair that can now remain on my head. (I was worried of pulling it all out over this one)
Jim Ellington