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!

Answer 1

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