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

[asprin]

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:


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


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.


Is this possible to achieve? i.e. have the on/off UI but it shouldn't post anything to the server.

 

[asprin]

I'm guessing this is not doable?

 

[Hoffi]

You can create a non funcitonal endpoint which you then can use. Then there is something posted to the server, but nothing happens.

 

[asprin]

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]

You can do it with CSS. Add a class to the toggle like

<xf:toggle name="moo" value="{$value.moo}" class="myNewClass" />

and then add into the less template which is loaded

.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]

Thanks, I'll try that out and let you know.