CODEWITHSUNDEEP
javascriptc#asp.net-mvc
VisualBean
VisualBean

Reputation: 5008

Dropdownlist Change event with javascript, when using an EditorTemplate

I have an EditorTemplate - which works great. Inside it, I have a dropdownlist which i decorate with a Class, and 2 divs

 <div>
 @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
 @Html.ValidationMessageFor(m => m.Type)
 </div>     
 <div class="EmailDiv">EmailStuffHere</div>
 <div class="CalendarDiv">CalendarStuffHere</div>

Im trying to show the 1 of the 2 divs based on the selection of the dropdown list

the dropdownlist populates fine, as is shown as a dropdown list with 2 items "Calendar" and "Email"

I have the following Javascript:

function checkSelection() {

    $(".EmailDiv").hide();
    $(".CalendarDiv").hide();

    var selectedItem = $(this).val();

    if (selectedItem == "Email") {
        $(".EmailDiv").show();
    } else if (selectedItem == "Calendar") {
        $(".CalendarDiv").show();
    }
};

var myobject = new checkSelection();

$(document).ready(function () {
    checkSelection();
    $(".TypeSelector").change(checkSelection);
    checkSelection.apply($(".TypeSelector"));
});

The javascript file loads (I can see it in my firefox debugger) But doesn't get hit for some reason. Either of the divs do not show.

What am i doing wrong?

Upvotes: 0

Views: 110

Answers (1)

user3559349
user3559349

Reputation:

Enclose the html for each item in a container to make it easier to select relative elements

<div class="container"> // add this or similar
  <div>
    @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
    @Html.ValidationMessageFor(m => m.Type)
  </div>     
  <div class="EmailDiv">EmailStuffHere</div>
  <div class="CalendarDiv">CalendarStuffHere</div>
</div>

and the css

.EmailDiv, .CalendarDiv {
  display:none;
}

Then the script (in the main view)

$(document).ready(function () {

  // Set initial visibility
  $('.TypeSelector').each(function(index, item) {
    var container = $(this).closest('.container');
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
    }
});

// Update visibiity on selection
$('.TypeSelector').change(function() {
    var container = $(this).closest('.container');
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
        container.find('.EmailDiv').hide();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
        container.find('.CalendarDiv').hide();
    } else { // this may or may not be necessary
        container.find('.EmailDiv').hide();
        container.find('.CalendarDiv').hide();
    }
});

}

Upvotes: 1

Related Questions