Using JQuery to capture change in a Telerik MVC ComboBoxFor

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.

I have not used Telerik Controls but shouldn't ComboBoxFor render as select and not as input? — Raja
– Raja, Commented Mar 17, 2011 at 11:45

Amith · Accepted Answer · 2012-04-03 19:23:22Z

5

Heres a list of events you can attach to: http://www.telerik.com/community/forums/aspnet-mvc/combobox/jquery-event-names.aspx

If you want to attach the change event in a more dynamic way with javascript, you would attach to the "valueChange" event and not "change":

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

answered Apr 3, 2012 at 19:23

Amith

3911 gold badge4 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Coleman · Accepted Answer · 2011-03-17 11:51:19Z

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); }); 
});

Collectives™ on Stack Overflow

Using JQuery to capture change in a Telerik MVC ComboBoxFor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related