Flip Icon Without Redraw

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Flip Icon Without Redraw

Postby bcusick » Mon Mar 20, 2017 8:31 pm

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!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Flip Icon Without Redraw

Postby Bernd.N » Tue Mar 21, 2017 11:02 am

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>';
      }
   }
Bernd Korthaus
LinkedIn
Servoy 7.4.9 SC postgreSQL 9.4.11 Windows 10 Pro
User avatar
Bernd.N
 
Posts: 544
Joined: Mon Oct 21, 2013 5:57 pm
Location: Langenhorn, North Friesland, Germany

Re: Flip Icon Without Redraw

Postby bcusick » Tue Mar 21, 2017 2:30 pm

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).
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Flip Icon Without Redraw

Postby patrick » Tue Mar 21, 2017 3:24 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Flip Icon Without Redraw

Postby bcusick » Tue Mar 21, 2017 3:45 pm

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!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Flip Icon Without Redraw

Postby bcusick » Tue Mar 21, 2017 4:23 pm

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 8783 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?
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Flip Icon Without Redraw

Postby patrick » Tue Mar 21, 2017 5:23 pm

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)...
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Flip Icon Without Redraw

Postby bcusick » Tue Mar 21, 2017 5:38 pm

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!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Flip Icon Without Redraw

Postby patrick » Tue Mar 21, 2017 6:46 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Flip Icon Without Redraw

Postby bcusick » Tue Mar 21, 2017 11:26 pm

Patrick - again, many thanks!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA


Return to Web Development

Who is online

Users browsing this forum: No registered users and 3 guests