How to reference to containers in every listview item in listview separately with JS widget
0
Hi all, I'm creating a listview where every listview item retrieves an animated Chinese character based on the listview item's object. The animated Chinese characters are called with an online API set up using the JavaScript with data source widget and put into a container (div) element within the listview item using the div's id. The challenge is that Mendix doesn't allow to set id names for the div elements in the different listview items. I can reference the class name of the div, but this results in all animations being put in the div of the first listview item, rather than each animation in the listview items it belongs. See the result below. Next, I found that with JS you can create div containers that will be added next to the JS code using the document.write function. In JS, I then name the div elements with an object element in the name to create unique id names. The result works for what I’m trying to accomplish: the animations are put into the divs they belong. There is one downside to this method: it deletes all other content of the page. See the result below. Who can help me solve this issue or knows a better approach? API source <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.0.2/dist/hanzi-writer.min.js"></script> JS code, "${Char}" is the reference to the object: var divName = "character".concat("${Char}"); var divCode = "<div id=".concat(divName,"></div>"); document.write(divCode); var aNime = document.getElementById(divName); var writer = HanziWriter.create(divName, "${Char}", { width: 100, height: 100, showOutline: false, strokeAnimationSpeed: 1, // 1x normal speed delayBetweenStrokes: 10, // milliseconds radicalColor: "rgb(0,112,192)", strokeColor: "rgb(22, 192, 0)", }); Thanks in advance to the champ that knows the magic solution. Kind regards, Paul