Why is my KendoUI mobile switch not working correctly?

Question

I'm using FUBUMVC and using a custom HTMLConvention to generate the following htmltag(s):

<div class="CheckboxWithValues">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38">
<input type="hidden" name="Advertise" value="37">
</div>

Via jQuery I'm attaching the KendoUI mobile silder with the following code:

$(document).ready(function () {
$('input[name$="_CheckboxWithValuesInput"]').each(function () {
    var input = $(this);
    var hiddenFieldName = input.attr("name").replace("_CheckboxWithValuesInput", "");
    var hiddenField = $('input[name="' + hiddenFieldName + '"]');
    var checked_value = input.attr('checked_value');
    var unchecked_value = input.attr('unchecked_value');

    //bind initial value
    if (input.is(':checked'))
        hiddenField.val(checked_value);
    else
        hiddenField.val(unchecked_value);


    //setup kendo UI switch
    var checked_text = input.attr('checked_text').toString();
    var unchecked_text = input.attr('unchecked_text').toString();
    var s = input.kendoMobileSwitch({ checked: input.is(':checked'), onLabel: checked_text, offLabel: unchecked_text }).data('kendoMobileSwitch');
    //bind change event
    s.bind('change', function (e) {
        var checked = e.checked;
        if (checked)
            hiddenField.val(checked_value);
        else
            hiddenField.val(unchecked_value);
    });
});

});

I am getting the switch to show up on the page but when it seems to have bound itself several times to the page. Once with the customized onLabel and offLabel and one with the default "ON" and "OFF" values.

Here is what is looks like on the page:

https://i.stack.imgur.com/sJzCm.jpg

Anyone else come across this?

Here is what the modified html looks like after the switch is added to the control:

<div class="CheckboxWithValues">
<span class="km-switch km-switch-on">
<span class="km-switch km-switch-on" style="">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38" data-role="switch">
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -18px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translateX(62px); ">
<span class="km-switch-label-on">ON</span>
<span class="km-switch-label-off">OFF</span>
</span>
</span>
</span>
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -15px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translate(65px, 0px); ">
<span class="km-switch-label-on">Yes</span>
<span class="km-switch-label-off">No</span>
</span>
</span>
</span>
<input type="hidden" name="Advertise" value="37">
</div>

Looks nothing to do with FubuMVC IMHO but I am little curious about the ".data('kendoMobileSwitch');" suffix. I might be tempted to try it without this in case it's invoking itself on the element post-creation. — Ian Battersby, Jun 29 '12 at 23:33

score 0 · Accepted Answer · answered Jun 30 '12 at 06:36

0

For some reason it initializes twice. Can you check if $(document).ready() is called twice? Do you init a Kendo Mobile Application too?

@Ian: data('kendoMobileSwitch') contains the Switch object which he uses after.

answered Jun 30 '12 at 06:36

Bundyo

2,195
13
13

I have the kendo init application in the application spark at the foot of the page. I have added some basic logging inside this method to verify the code wasn't being run twice. And as far a I can tell it looks like it is only running once. – Waylon Martinez Jun 30 '12 at 15:46
You should make sure that your Switch init runs after the application is initialized - Switch on init adds a data-role to itself and probably the app decides to initialize it again. To be sure that the application has started, you can use for instance a view init event. – Bundyo Jun 30 '12 at 17:48
That worked - I modified my custom jquery logic and moved it from a document.ready function to a normal function and called it after the kendo.mobile.application function had been called. Worked like a charm - thanks so much! – Waylon Martinez Jul 01 '12 at 15:21

Why is my KendoUI mobile switch not working correctly?

1 Answers1