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>

Answer 1

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.