• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4627
  • Last Modified:

Mvc Listbox Click Event in jQuery

Hello

I have used the Html.ListBox helper to generate a <select> list in my view like so:

<%= Html.ListBox("MaterialTypesList", Model.MaterialsList, new { @class = "StockListBox", SelectionMode="Single"})%>

Open in new window


in jQuery I have attached an event handler (not on the change event but the click event) to capture the value of the clicked item to proceed with it:

           
$("#MaterialTypesList").click(MaterialsList_Changed);

Open in new window


However, each time I click a value, it does not correspond, and the first click is not taken into account:

function MaterialsList_Changed()
            {
                $("#ModelsList > option").remove();

                var materialId = $("#MaterialTypesList option:selected").val();
                alert(materialId);
                $.post("http://localhost/" + virtualPath + "/Stock/LoadBrands/" + materialId, null, function (data)
                {
                    data = $.map(data, function (item, a)
                    {
                        return "<option value=" + item.Value + ">" + item.Text + "</option>";
                    });

                    $("#BrandsList").html(data.join(""));
                });
            }

Open in new window


My questions:

1) why doesn't this work, it looks like it should be easy simple
2) why does the html attribute SelectionMode on the Listbox not work ?

thx !

Gerrie
0
gerrie-govaerts
Asked:
gerrie-govaerts
  • 3
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
-- use change event
http://api.jquery.com/change/

-- also are you sure that id is MaterialTypesList only,

-- try the class selector
$(".StockListBox").change(MaterialsList_Changed);

-- last but not the least, put this code inside document ready event handler

$(document).ready(function(){
  $(".StockListBox").change(function(){
MaterialsList_Changed()
});
});
0
 
gerrie-govaertsAuthor Commented:
Hello

I have used everything that's in your code, and I cannot use the change event - I already discussed this in another issue, it must be the click event.

It always has worked using a normal <select> tag, but now I'm using the HtmlHelper to generate a listbox and nothing works anymore....
0
 
gerrie-govaertsAuthor Commented:
To add some more information:

I made a difference between the working select list (hand typed) and the Html.ListBox helper method (which I prefer of course).

The main difference is that the attribute multiple="multiple" makes things crash in my case.

How can I use the Html.ListBox method and specify that I DON'T want to have the multiple="multiple" attribute ?

Thx !
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Gurvinder Pal SinghCommented:
0
 
gerrie-govaertsAuthor Commented:
Thank you ! You saved my day ;-)
It's quite unusual to think about a dropdownlist when you need a listbox, but in fact... it remains a select tag
0
 
Gurvinder Pal SinghCommented:
true, not sure why microsoft decided to go this way, since all it differs is in the fact that one has multiple attribute, and other doesn't have.

thanks for the points :)
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now