Dropdown change not calling method asp.net mvc jquery

Question

first off I have used this thread to get where I am now but am having difficulty with my situation. ASP.NET MVC 3 DropDownList selectedindexchanged

I wish to select a value from one dropdown list which will then reduce the available options on a dropdown below it.

Similar to the thread above, I am trying to use jQuery to accomplish this like so:

    $('#Park').change(function () {
        var queryLink = 'Url.Action("GetBuildings")';
        if ($(this).val() != '') {
            queryLink += '?parkID=' + $(this).index;
        }
        $.get(queryLink, function (data) {
            $b = $('#Building');
            $op = $('<option></option>');
            $b.empty();
            $.each(data, function (value) {
                $b.append($op.attr("value", value));
            });
        });
    });

and here is the GetBuildings function in the AvailabilityController:

public ActionResult GetBuildings(int parkID)
    {
        var buildQry = from b in systemDB.Buildings
                        where b.ParkID == parkID
                        orderby b.BuildingName
                        select b.BuildingName;
        string temp = "";
        foreach (string b in buildQry)
        {
            temp += b + ';';
        }
        temp = temp.Substring(0, temp.Length - 1);
        string[] buildings = temp.Split(';');

        return View(buildQry);
    }

However, when I change the value of the "Park" dropdown, nothing happens. No change to the URL, which due to the Url.Action("GetBuildings") I assumed would append "/GetBuildings?parkID=2" or something similar.

I'm not sure why it isn't at least doing something as I have made it as similar to the original thread as possible which worked correctly.

Thanks in advance!

it'd be very helpful to see the DropDownList in your view

Jonesopolis
– Jonesopolis

2014-04-02 17:57:07 +00:00
Commented Apr 2, 2014 at 17:57 — Jonesopolis
– Jonesopolis, Commented Apr 2, 2014 at 17:57

JOBG · Accepted Answer · 2014-04-03 02:02:21Z

2

For me this line is the issue:

var queryLink = 'Url.Action("GetBuildings")';

If you are doing that on the same view you can parse the asp tag by doing (note the @):

var queryLink = '@Url.Action("GetBuildings")';

But i don't recommend that approach, you get get away cleaner than that with a html5 data-attribute

EDIT: using data-attribute example. Add to the dropdown element an attribute like:

<select id="Park" data-action-url='@Url.Action("GetBuildings")'>

on your js you get the url:

var queryLink = $(this).attr('data-action-url');

You can also add the parameter to the url by using the $.get data parameter:

$.get(queryLink, {parkID : $(this).val()}, function (data) {

edited Apr 3, 2014 at 2:02

answered Apr 2, 2014 at 17:58

JOBG

4,6244 gold badges30 silver badges48 bronze badges

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

10 Comments

bd99 Over a year ago

I have changed it to '@Url.Action("GetBuildings")', can't believe I left that out... but it still doesn't change anything, the url still doesn't change when the dropdown is changed?

bd99 Over a year ago

I was going to look into doing it the better way you suggested but just wanted to get this working before I attempt the new method, assuming it is still something else that is causing the issue

bd99 Over a year ago

GET localhost:50187/Scripts/modernizr-1.7.min.js 404 (Not Found) Availability:8 GET localhost:50187/Scripts/jquery-1.5.1.min.js 404 (Not Found) Availability: 7

bd99 Over a year ago

I don't have calls to these in there I have one for 1.4.1, am I using a feature that needs latest jQuery?

JOBG Over a year ago

Look at _layout in Views/Shared folder, the references to js and css files are defined there.

|

Collectives™ on Stack Overflow

Dropdown change not calling method asp.net mvc jquery

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related