Repeat column, class toggle, Bug?

Wappler General
1

wappler 4.4.1
windows 10

As part of a star rating function , I have created a repeat column which contains a font awesome fa-star-O. (Empty star)

image

When this is clicked the variable rating_selected is updated the class toggles to fa-star. (filled star)

image

This works perfectly within the wappler preview but not when previewed in browser.
This worked before the update to 4.4

Is this a bug???

2

Hard to answer what’s wrong without seeing your page or code.
Also what is “not working” exactly?

3

Screen shot within wappler
image

screen shot in browser
image
When the star icon is clicked in the browser the next star is then shown??

Star icon onclick:
image

    <div class="container" style="width: 250px;" id="rating_container">
    <div class="row">
        <div class="col" dmx-repeat:star_repeat="5" id="repeat_star">

            <i class="fa fa-star rating" dmx-class:fa-star-o="($index  >= rating_selected.value)" dmx-class:fa-star="($index  <= rating_selected.value)" dmx-on:click="rating_selected.setValue($index +1)"></i>

        </div>
    </div>
</div>
4

What is rating_selected and where is it located on the page?

Also your both conditions have =, maybe you want to remove it from dmx-class:fa-star="($index <= rating_selected.value)" so it becomes dmx-class:fa-star="($index < rating_selected.value)"

5

located on same page:
image

            <i class="fa fa-star rating" dmx-class:fa-star-o="($index+1)  > rating_selected.value" dmx-class:fa-star="($index+1)  < rating_selected.value" dmx-on:click="rating_selected.setValue($index +1)"></i>

this creates the wappler preview:
image

The stars disappear completely in the browser.

6

That was not what i meant Jim ...
Suggested you to remove the = only from one of the expressions!

<i class="fa fa-star rating" dmx-class:fa-star-o="($index  >= rating_selected.value)" dmx-class:fa-star="($index  < rating_selected.value)" dmx-on:click="rating_selected.setValue($index +1)"></i>

also:

7

This works in the wappler preview only (as did the original code) nothing at all is shown in the browser.

The variable rating_selected is updated when the the the star is clicked ,
It is located here as mentioned

image

I use this variable to preload the star rating when viewing previous records.

8

Do you have a link where i can test this?

9

sorry Teodor no link available

10

Please paste your whole page code here then.

11

Ok it seems the problem originates from the font awesome cdn

I have been using font awesome 5.14.0 - all cdn

When I revert to 4.7.0 cdn it works properly…

Is there a problem with font awesome 5.14.0 - all cdn,
or is because I may have mixed icons from each???

12

No, there is no problem wit 5.14 cdn.
Probably you mixed both versions classes somehow.

13

Yep I think you’re right I will check all the icons I have used, thanks for your help

14

far fa-star for non filled and fas fa-star for filled work in 5.14.0 I couldn’t get the -o one to display in my tests.

15

Sorry_duh
Ok I will have a closer look

16

When I enter far fa-star in the class toggle I get the error message 'enter a single valid class name'

17

You may try this code:

<div class="container" style="width: 250px;" id="rating_container">
                <div class="row">
                    <div class="col" dmx-repeat:star_repeat="5" id="repeat_star">

                        <i class="far fa-star" dmx-on:click="rating_selected.setValue($index)" dmx-class:far="($index  >= rating_selected.value)" dmx-class:fas="($index  <= rating_selected.value)"></i>

                    </div>
                </div>
            </div>

for 5.14.0

Edit: better code format

1 Like
18

Guys, when posting code please follow How to format code in your posts

1 Like
19

Thankyou Sorry_duh works a treat!!! :smiley:

1 Like