jquery selector with prefixes

Question

This is my HTML code:

<div id="editorRows">
  <div class="editorRow">
     <input type="hidden" value="01c4ed6d-1234-4951-b048-d86208636479" autocomplete="off" name="comds.index">
     Grupa:
     <select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Grupa" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Grupa">
     Produsul:
     <select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Produs" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Produs">
     Cantitate:
     <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Cantitate" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Cantitate" data-val-required="The Cantitate field is required." data-val-number="The field Cantitate must be a number." data-val="true">
      Pret:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Pret" type="text" value="17.23" size="4" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Pret" data-val-required="The Pret field is required." data-val-number="The field Pret must be a number." data-val="true">
      TVA:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__TVA" type="text" value="0.24" name="comds[01c4ed6d-1234-4951-b048-d86208636479].TVA" data-val-required="The TVA field is required." data-val-number="The field TVA must be a number." data-val="true">
      Total:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Total" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Total" data-val-required="The Total field is required." data-val-number="The field Total must be a number." data-val="true">
      <a class="deleteRow" href="#">Sterge</a>
    </div>

    <div class="editorRow">
        <input type="hidden" value="97b4ac65-73f8-4339-a707-bad53763fb2e" autocomplete="off" name="comds.index">
        Grupa:
        <select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Grupa" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Grupa">
        Produsul:
        <select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Produs" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Produs">
        Cantitate:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Cantitate" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Cantitate">
        Pret:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Pret" type="text" value="17.23" size="4" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Pret">
        TVA:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__TVA" type="text" value="0.24" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].TVA">
        Total:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Total" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Total">
        <a class="deleteRow" href="#">Sterge</a>
      </div>
   <div class="editorRow">.....
</div>

So, I'm Rendering a partial view to display more items and I have an action to create more. I'm trying to call a Json function when I change the value in the first DropDownList to repopulate the second one. This is my script: UPDATE

             <script type="text/javascript">
            $(document).ready(function () {
            $('name$=.Grupa').change(function () {

                var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
                var ddlsource = $(this);
                var ddltarget = $(this).siblings('[name$=.Produs]:first');
                $.getJSON(url, { id: $(ddlsource).val() }, function (data) {
                    $(ddltarget).empty();
                    $.each(data, function (index, optionData) {
                        $(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
                        });

                    });
                });
            });
       </script>

My Json Action from the controller is not being called. What must I change in the script in order to work? Thanks!

You are selecting .editRow.Grupa on your change function, but I cannot see an editRow class within your HTML. have you made a typo? — Ross, Jun 17 '11 at 16:50
I'm new to jquery but I've put: alert('mesaje'); before that. Hope this is what you were talking about and no, it doesn't show up — davvidd, Jun 17 '11 at 16:53
I was saying that the class .editRow is not within the HTML you have provided above. Can you give us a link to your full page with this code on? Or put it into a JSFiddel > http://jsfiddle.net/ — Ross, Jun 17 '11 at 17:01

James Montagne · Answer 1 · 2011-06-17T17:01:21.063

1

Unless I'm just missing it $('.editRow.Grupa') doesn't appear to match anything in your html. This says to find all elements with a class of editRow and Grupa. You have no elements with a class of Grupa.

See this list of selectors for valid ways of selecting items:

http://api.jquery.com/category/selectors/

Your selector is close if you change it to $('.editRow .Grupa') and add a class to your Grupa select that is Grupa.

What this is saying is, get all elements which are inside of an element with the class of editRow and have the class of Grupa. Your selector says that you want all element which have both the class editRow and Grupa.

edited Jun 17 '11 at 17:01

answered Jun 17 '11 at 16:50

James Montagne

77,516
14
110
130

I' new to Jquery so I need you to tell me how to make it work.... I know my script is not good.... – davvidd Jun 17 '11 at 16:56
Edited my answer, you should read up a bit on selectors if you're going to be using jquery. They are fundamental to jquery. – James Montagne Jun 17 '11 at 17:01
Grupa as you cand see it's a select id element. Is there a way to use it like that or must I change it to a class? – davvidd Jun 17 '11 at 17:03
There are many ways of selecting items as you can see in the link provided. One that could work here is the endswith selector: http://api.jquery.com/attribute-ends-with-selector/ you could use this to say where the name ends with grupa, like this `[name$='Grupa']` – James Montagne Jun 17 '11 at 17:05

score 1 · Accepted Answer · answered Jun 17 '11 at 17:01

not sure this is the only problem, but i think the selectors you are building are not what you mean to make.

.editRow.Grupa

will match an element with the class editRow and the class .Grupa

i think this line:

var ddlsource = '.editRow.Grupa';

should probably just be $(this);
and your var ddlsource = '.editRow.Grupa';

should be something like var target = $(this).siblings('[name$=.Produs]:first');

and then any of these: $(ddltarget) should be target instead.

soemthing like this:

$(document).ready(function () {
         $('[name$=.Grupa]').change(function () {   //targets things with the name ending in .Grupa

            var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
            var source =$(this); //this will be which ever one is changed
            var target = $(this).siblings('[name$=.Produs]:first');  //this SHOULD find the first select with a name ending in .Produs that is the sibling (same level in the dom to the changed select)
            $.getJSON(url, { id: source.val() }, function (data) {
                      target.empty();
                      $.each(data, function (index, optionData) {
                      target.append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");

                  });

               });
            });
          });

i haven't tested this, but that's the general idea of what you need to go for. note, the selectors i'm using are quite inefficient, if you can change the generated code so that your select boxes have a known class, it'd be much tidier code, and more effective

i just looked at what you posted in your question as your new code, it's not the same as this... you need the [ ] — Patricia, Jun 17 '11 at 17:20

jquery selector with prefixes

2 Answers2