New App Design Considerations Part 7 - Copying HTML

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.

UPDATE: Copying HTML via innerHTML is a BAD IDEA!

See this post for why: Moving/Copying/Creating BS4 Slider Control

There are at least two other ways of accomplishing on the fly creation or copying of controls, or what appears to be new controls displaying on the screen.

One is to use jQuery to create the controls in the DOM with their respective on events. This would mean the code would have to know what the controls were that were being added. Copying HTML didn’t matter what controls, how many, or what attributes were included.

The third concept is to put all of the templates in the base form in the correct location and hide all but the currently active UI controls. I’ve organized my “template HTML” each with a head container, which I hide/unhide.

This makes for a very messy and almost impossible IDE screen. In my original concept, each template was on it’s own form, so the WYSWYG of the IDE did provide a nice view of the HTML to be embedded, but didn’t show how the template would look embedded in the base form.

Since as a developer I will work on one template at a time, I’ll hide all of the templates except the template I’m working on in the IDE and leave it that way. In the app in Main, I’ll just hide all of the templates, except the home menu template. This provides the WYSWYG IDE and works within the confines of AS.

I’d love to hear other ideas. :sun_with_face: