Issue with CSS and Rendering condition

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
Hello,

Something weird is happening. I'm trying to have a "favorite" button on account.

I created 2 button and Applied via css an Image to show a white or gold star

Button 1: Click to add as favorite have "white star css"
Button 2: Click to remove as favorite has "gold star css"

both button framework actions is to update a Checkbox with either true or false and save model

And i conditionally render the proper one.(checkbox = true on one, and reverse on the other)

The problem arises when i click a button, the other button disappears but the "star" image lingers until the page is refreshed

Any way to have this image  disappear with the button?

in SS example below , The gold Star should not show....




any ideas?

Thank you
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
hahaha. nice.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I think Meme pictures should now be a standard requirement in bump requests. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
dave,

What happens if you manually re-render the component in the console?

try opening your javascript console and type in
skuid.$C('UniqueIDofComponent').render()

Does the offending star go away?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
also, can you share what you get when you inspect the element?
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you for help Matt, 

I tried adding the code you provided.

skuid.$C('sk-1--2kt-8186').render()

And it worked, it Did remove the offending Star

As well here Inspect element result



Pls let this noob <---- know what that means if you can 

Thx
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Dave,

How are you applying the css to add the star?

Two ways you could approach this, that come to mind immediately:
  • Run a snippet that re-renders the pagetitle component each time a button is pressed. (like the script you ran in the console above)
  • Run a snippet that uses jquery to remove the star's class. Something like this:
skuid.$('.star').removeClass('star');
The latter is probably slightly more efficient (I don't really know that for sure, just a guess), but you have to have two versions, one for each star.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Matt,

I use a css class to point to image URL.

I tried the 1st solution and it works great.

Thank you!