Question

I am using the following code to capture change text in HTML inputs:

$(document).ready(function() {
    $(':input', document.myForm).bind("change", function() { setConfirmUnload(true); }); 
});

this works fine for normal textboxes and checkboxes.

I’m using Telerik’s MVC ComboBoxFor which renders input tags, but does not seem to trigger the above JQuery.

Any ideas how to capture this?

This is how the HTML renders:

<div class="t-widget t-combobox t-header" id="InterviewRequired">
<div class="t-dropdown-wrap t-state-default">
    <input class="t-input" id="InterviewRequired-input" name="InterviewRequired-input" title="InterviewRequired" type="text" value="Select" />
    <span class="t-select t-header">
        <span class="t-icon t-arrow-down">select</span>
    </span>
</div>
<input id="InterviewRequired-value" name="InterviewRequired" style="display:none" type="text" value="0" />

I’ve also asked this question on the Telerik forums in case I don’t get an answer here.

Answer 1

Looking at the demo here. The ComboBox is being rendered as <input/> and a popup <div/>

<div class="t-dropdown-wrap t-state-default">
  <input type="text" value="Chai" name="ComboBox-input" id="ComboBox-input" class="t-input" autocomplete="off">
  <span class="t-select t-header">
    <span class="t-icon t-arrow-down">select</span>
  </span>
</div>

looking at the client side docs, you most likely will need to register a Client-side event located here.

   <%= Html.Telerik().ComboBox()
            .Name("ComboBox")
            .ClientEvents(events => events
                .OnChange("onChange")
            )
    %>

    <script type="text/javascript">
        function onChange(e) {
           setConfirmUnload(true);
        }
    </script>

it also looks like you should be able to do it with jQuery only from this example:

<%= Html.Telerik().ComboBox().Name("ComboBox") %>

<script type="text/javascript">
    $(document).ready(function() {
        $('#ComboBox').bind('change', function(e) { // your code });
    });
</script>

Maybe try:

$(document).ready(function() {
    $('#myComboBox').bind("change", function() { setConfirmUnload(true); }); 
});