In Part 6 I talked about copying griditems to produce a series of buttons (or even a photo gallery). I applied this is concept to another area of my app.
I have a base AS form that is where I want to ask questions. The answers come in many formats - like a radio button for yes/no and an input box for simple text input, etc. more than a dozen formats. I want to overlay the answer controls onto this AS form from other AS forms within the project. These other AS forms would have just the answer controls laid out as desired in it.
The idea was to copy these controls from the template form to the operational form as the question types varied. A couple of gotchas:
If you just copy the HTML, you now have duplicate IDs. The fix for this is to, at startup, is to copy the HTML templates of all of the answers into memory variables. And remove that HTML from the template AS forms.
The insertion of the HTML into the operational AS form is simple, just update the innerHTML. The browser reflows and if you used only AS common controls, everything works fine.
But if you used BS4 controls in the template, I found that in my case, that the onclick event of an existing AS Common control image on the operational form would no longer fire. Upon inspection, the reflow caused by the insertion appeared to remove the onclick event listener.
The solution was unexpected. I did notice that 4 other onclick events were not wiped out by the reflow. The only difference for the image that lost it’s onclick event was that this image was inside the same div section as the copied BS4 controls. This was actually a mistake I made, as the answer template was supposed to be copied into a container (div) at a div level below.
As soon as I added an AS container for the copied HTML to be placed within, the onclick events were no longer wiped out by the reflow.
