Page 1 of 1

Flip Icon Without Redraw

PostPosted: Mon Mar 20, 2017 8:31 pm
by bcusick
Hey Guys,

I know I'm missing something basic here - but what I'm trying to do is not rocket science... I have a HTML list that I generated. It has an icon it that I want to change out to a different icon when the user clicks on it.

I've tried a few different methods - none successfully:

1) Use an IMG - and then use WebClientUtils to update the SRC of the image.

2) Create a CSS class using a background URI image, and replace the image with a div that has that image class, then use WebClientUtils to change the class to a different class that has a different background URI image.

Nothing seems to work.

Suggestions?

THANK YOU in advance!

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 11:02 am
by Bernd.N
Could you use a calculated field which we use for a smart client to show icons in a table?
Then you could switch an integer value onAction by the mouseclick, so that the calculation will show another icon.
Example:

Code: Select all
   if (ps_is_our_employee) {
      
      if (ps_was_our_employee) {

         return '<html> <img src="media:///logos/' + _to_tenants$currenttenantid.tn_icon_small_gray + '"> </html>';
      }
      else {

         return '<html> <img src="media:///logos/' + _to_tenants$currenttenantid.tn_icon_small + '"> </html>';
      }
   }

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 2:30 pm
by bcusick
Hey Bernd,

Thanks very much for your suggestion!

However, this is Web Client - and we're not using the built-in table or list (it doesn't work with the layout we need).

We generated our own list in HTML - so having a calculation field in there won't do anything without a full list redraw (which is what I'm trying to avoid).

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 3:24 pm
by patrick
Hi Bob,

couldn't you simply assign an onClick function to that element that will toggle the image? What have you tried? Just add a script on top of your html and assign that to perform onClick or whatever you want.

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 3:45 pm
by bcusick
Hey Patrick,

Yeah, I was going there next.

I need to remove the Servoy anchor (for method trigger) and just use a WebClient plug-in callback to trigger the script I need.

I was hoping to just have a "normal" Servoy anchor link and then flip the image with jQuery. I've tried some different techniques:

Code: Select all
<a href="javascript:myMethod();><img src="media:///image.png"></a>


This was no good - because Servoy re-writes the asset URL (which is no problem to decode). So then I tried using the raw asset url rather than the "media" shortcut. I could change the src - and the page would recognize it (via the console), but the mark up did not update.

Then, I tried this:

Code: Select all
<a href="javascript:myMethod();><div class="red-button"></div></a>


The div class has a CSS background URI. Renders perfectly. So, I thought that I would just trigger the Servoy method and then flip the class of the div with jQuery.

(The UUID is the element ID, and I used the Servoy method to formulate the "sOldClass" and "sClass". The output of the variables is a class name: e.g. "red-button"):

Code: Select all
sScript = "var $oObj = $('#" + sUUID + "'); \
$oObj.removeClass( '" + sOldClass + "' ).addClass( '" + sClass + "' ); \
$oObj.attr('args', '" + sNewArgs + "'); \
console.log(\"removed: '" + sOldClass + "', added: '" + sClass + "\");"


Again, the element would SAY that the class changed (by using the console to query the object), and the "args" attribute would update, but the image still would not change.

Then, I remembered what David Workman suggested - that I need to set a timeout to give more time - so I tried this:

Code: Select all
sScript = "setTimeout(function() { \
   var $oObj = $(\"'#" + sUUID + "'); \
   $oObj.removeClass( '" + sOldClass + "' ).addClass( '" + sClass + "' ); \
   $oObj.attr('args', '" + sNewArgs + "'); \
  console.log('removed: '" + sOldClass + "', added: '" + sClass + "');\
},500);"


Still, no workie.

So, now, when I do the onClick method to trigger a callback - how do I get the image to change? This is a HTML list table that I created (not a built-in table view or list). I appreciate your help!

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 4:23 pm
by bcusick
OK - so here's what I did.

I simplified the code that draws the icon:
Code: Select all
return "<div onClick=\"changeIcon('" + rRec.study_uuid.toString() + "');\" id='" + rRec.study_uuid.toString() + "' class='red_icon_sent'></div>";


It just sets the ID of div to the UUID I want, and also passes the UUID to a new JavaScript called "changeIcon".

The JavaScript that gets injected into the page is:

Code: Select all
'<script type="text/javascript">' +
   'function changeIcon(sUUID){' +
      'var $myImg = document.getElementById(sUUID); ' +
      'var $myClass = $($myImg).attr("class");' +
      'console.log("clas=" + $myClass);' +
      'if($myClass.indexOf("red") > -1) {' +
         '$($myImg).attr("class", $myClass.replace("red","green"));' +
      '} else {' +
         '$($myImg).attr("class", $myClass.replace("green","red"));' +
      '}' +
      'clickEmailIcon(sUUID);' +
   '} ' +
   '</script>'


NOT rocket science. I'm literally just flipping the class of the div. The "clickEmailIcon()" function is a Servoy method callback that DOES fire correctly.

So, In testing - everything works - EXCEPT the image won't change. Here's the log:

2017-03-21_7-20-25.png
2017-03-21_7-20-25.png (18.56 KiB) Viewed 5085 times


SO, that tells me that the script worked and that the DOM thinks the class of the div is "green_icon_sent" - which is correct. However the image doesn't change on the page. :x

If I manually change the class via the elements inspector - then it works (so I know the CSS class is correct).

Ideas?

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 5:23 pm
by patrick
Not sure what your class does. I'd open the inspector and watch what happens (also what that class name applies now to your element)...

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 5:38 pm
by bcusick
Thanks Patrick, I've done that.

The class name in the inspector doesn't change.

I've come up with a shitty work-around: just grab the html string and do the class replace myself.

That DOES work.

I'll play with it some more to see if I can get any of the other stuff to work.

I appreciate your input and feedback!

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 6:46 pm
by patrick
Ah, I didn't look closely. I think with jquery you use the addClass(), removeClass() and toggleClass() methods to deal with classes.

To easily prevent this kind of trial and error, simple use the developer tools and try the jquery you want directly in the console and figure out everything there. Once that works, you copy that code to your Servoy html thingy.

Re: Flip Icon Without Redraw

PostPosted: Tue Mar 21, 2017 11:26 pm
by bcusick
Patrick - again, many thanks!