Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my KendoUI mobile switch not working correctly?
    primarykey
    data
    text
    <p>I'm using FUBUMVC and using a custom HTMLConvention to generate the following htmltag(s):</p> <pre><code>&lt;div class="CheckboxWithValues"&gt; &lt;input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38"&gt; &lt;input type="hidden" name="Advertise" value="37"&gt; &lt;/div&gt; </code></pre> <p>Via jQuery I'm attaching the KendoUI mobile silder with the following code:</p> <pre><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); }); }); </code></pre> <p>});</p> <p>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. </p> <p>Here is what is looks like on the page:</p> <p><a href="http://i.stack.imgur.com/sJzCm.jpg" rel="nofollow">http://i.stack.imgur.com/sJzCm.jpg</a></p> <p>Anyone else come across this?</p> <p>Here is what the modified html looks like after the switch is added to the control:</p> <pre><code>&lt;div class="CheckboxWithValues"&gt; &lt;span class="km-switch km-switch-on"&gt; &lt;span class="km-switch km-switch-on" style=""&gt; &lt;input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38" data-role="switch"&gt; &lt;span class="km-switch-wrapper"&gt;&lt;span class="km-switch-background" style="margin-left: -18px; "&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class="km-switch-container"&gt; &lt;span class="km-switch-handle" style="-webkit-transform: translateX(62px); "&gt; &lt;span class="km-switch-label-on"&gt;ON&lt;/span&gt; &lt;span class="km-switch-label-off"&gt;OFF&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;span class="km-switch-wrapper"&gt;&lt;span class="km-switch-background" style="margin-left: -15px; "&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class="km-switch-container"&gt; &lt;span class="km-switch-handle" style="-webkit-transform: translate(65px, 0px); "&gt; &lt;span class="km-switch-label-on"&gt;Yes&lt;/span&gt; &lt;span class="km-switch-label-off"&gt;No&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;input type="hidden" name="Advertise" value="37"&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload