XF 2.1 <xf:toggle /> display as on/off switch without submit=true

asprin

Active member
Hello there,

In a template, if we use <xf:toggle submit="true" />, it gives us a nice little switch on the UI like the following:
1663861942266.png

Without that attribute or submit="", it turns into a checkbox which is absolutely fair.
1663862022447.png

However, I was wondering if XF allows us to have a the switch UI without having to submit anything to the server. If I use submit="true" but without providing a URL to post, it does the job of turning off and on (along with checking/unchecking the hidden checkbox). However, the browser console will log an error and that is something I don't prefer to see on the client side.
1663862133735.png

Is this possible to achieve? i.e. have the on/off UI but it shouldn't post anything to the server.
 
Solution
You can do it with CSS. Add a class to the toggle like
HTML:
<xf:toggle name="moo" value="{$value.moo}" class="myNewClass" />
and then add into the less template which is loaded
CSS:
.myNewClass label.iconic {
    &>input[type=checkbox]+i {
        &:before {
            .m-faContent(@fa-var-toggle-off, 1.125em);
        }
        &:after {
            .m-faContent(@fa-var-toggle-on, 1.125em);
        }
        &:before,
        &:after {
            font-size: 120%;
            margin-top: -.7em;
            margin-left: -.5625em; // half of .fa-toggle-on width
        }
    }
}

It should be done somehow with less extend, but I wasn't succesful figuring out on a fast track.

asprin

Active member
You can create a non funcitonal endpoint which you then can use. Then there is something posted to the server, but nothing happens.
Guess that's one way to do it. However, this would mean a trip to the server for no reason. Imagine user clicking on multiple items on a list and that could become unnecessary overhead.
 

Hoffi

Well-known member
You can do it with CSS. Add a class to the toggle like
HTML:
<xf:toggle name="moo" value="{$value.moo}" class="myNewClass" />
and then add into the less template which is loaded
CSS:
.myNewClass label.iconic {
    &>input[type=checkbox]+i {
        &:before {
            .m-faContent(@fa-var-toggle-off, 1.125em);
        }
        &:after {
            .m-faContent(@fa-var-toggle-on, 1.125em);
        }
        &:before,
        &:after {
            font-size: 120%;
            margin-top: -.7em;
            margin-left: -.5625em; // half of .fa-toggle-on width
        }
    }
}

It should be done somehow with less extend, but I wasn't succesful figuring out on a fast track.
 
Solution
Top