DropDownList Change() doesn't seem to fire

So, I have been bashing my head against the desk for a day now. I know this may be a simple question, but the answer is eluding me. Help?

I have a DropDownList on a modal that is built from a partial view. I need to handle the .Change() on the DropDownList, pass the selected text from the DropDownList to a method in the controller that will then give me data to use in a ListBox. Below are the code snippets that my research led me to.

all other controls on the modal function perfectly.

Can anyone see where I am going wrong or maybe point me in the right direction?


// I have tried with [HttpGet], [HttpPost], and no attribute public ActionResult RegionFilter(string regionName) { // Breakpoint here is never hit var data = new List<object>(); var result = new JsonResult(); var vm = new PropertyModel(); vm.getProperties(); var propFilter = (from p in vm.Properties where p.Region == regionName && p.Class == "Comparable" select p).ToList(); var listItems = propFilter.ToDictionary(prop => prop.Id, prop => prop.Name); data.Add(listItems); result.Data = data; return result; }

Razor View

@section scripts{ @Scripts.Render("~/Scripts/ui_PropertyList.js") } ... <div id="wrapper1"> @using (Html.BeginForm()) { ... <div id="fancyboxproperties" class="content"> @Html.Partial("PropertyList", Model) </div> ... <input type="submit" name="bt_Submit" value="@ViewBag.Title" class="button" /> } </div>

Razor (Partial View "PropertyList.cshtml")

... @{ var regions = (from r in Model.Properties select r.Region).Distinct(); } <div> <label>Region Filter: </label> <select id="ddl_Region" name="ddl_Region"> @foreach (var region in regions) { <option [email protected]>@region</option> } </select> </div> // ListBox that needs to update after region is selected <div> @Html.ListBoxFor(x => x.Properties, Model.Properties.Where(p => p.Class == "Comparable") .Select(p => new SelectListItem { Text = p.Name, Value = p.Id }), new { Multiple = "multiple", Id = "lb_C" }) </div> ...

JavaScript (ui_PropertyList.js)

$(function () { // other events that work perfectly ... $("#ddl_Region").change(function () { $.getJSON("/Process/RegionFilter/" + $("#ddl_Region > option:selected").attr("text"), updateProperties(data)); }); }); function updateProperties(data, status) { $("#lb_C").html(""); for (var d in data) { var addOption = new Option(data[d].Value, data[d].Name); addOption.appendTo("#lb_C"); } }

-------------Problems Reply------------

The callback function passed to your $.getJSON method is wrong. You need to pass a reference to the function, not to invoke it.

Try this:

$.getJSON("/Process/RegionFilter/" + $("#ddl_Region > option:selected").text(), updateProperties);

Also, in order to get the text of the selected drop-down option, you need to use the text() function:

$("#ddl_Region > option:selected").text()

See Documentation

Category:javascript Views:1 Time:2018-11-04

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.193 (s). 11 q(s)