Refresh Image/Dataview upon image upload

I redesigned the image uploader and with CSS graphics I wanted to show an image is uploaded. Most basically would be to add a class upon upload. However, since the object doesn't refresh, visibility + duplicate object with class isn't an option here. For this reason I thought of using Javascript, but that isn't working as expected either (more on this below). What would be my best bet to refresh the dataview of an uploaded image? I've got a list of objects on the left and on the ListenToWidget dataview on the right is a dataview with a file uploader. When I upload an image and the javascript runs, it adds a class to the dataview. However, when I select a different object in the list and the dataview refreshes, the DOM in the browser does not. This results in the CSS being applied to the same dataview, although it's a different object. This way, all objects seem to have an image uploaded. That is obviously not true. $('input').on('change', function () { $(this).closest(".mobile-upload-btn").addClass("completed"); }); My next guess would be calling a microflow from Javascript, have the object as parameter and refresh it this way. However, I wasn't able to build this. Anyone got a clue?
1 answers

Hello Sander,

You can try using another HTMLSnippet widget with Refresh on context change and update which resets your class, perhaps something like:


I’m not 100% sure this will work but the jQuery should be re-run every time the context changes so you should be removing the class on object change. If it works you can enhance it by actually getting it to detect whether the class is needed or not on context change.

Another potential alternative is to have two snippets, one that adds the class, one that removes it, and to put conditional visibility on them. I would assume if the widget is disabled by conditional visibility it does not build therefore you should in theory be able to run the jQuery selectively based on entity attributes.

Hope this helps