Issue with CSS and Rendering condition

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


hahaha. nice.

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?

also, can you share what you get when you inspect the element?

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
Thx

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.

Matt,

I use a css class to point to image URL.

I tried the 1st solution and it works great.

Thank you!

I think Meme pictures should now be a standard requirement in bump requests.