Селектор jquery с префиксами - PullRequest
0 голосов
/ 17 июня 2011

Это мой HTML-код:

<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>

Итак, я рендеринг частичного представления, чтобы отобразить больше элементов, и у меня есть действие, чтобы создать больше.Я пытаюсь вызвать функцию Json, когда я изменяю значение в первом DropDownList для повторного заполнения второго.Это мой сценарий: ОБНОВЛЕНИЕ

             <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>

Мое действие Json из контроллера не вызывается.Что я должен изменить в скрипте, чтобы работать?Спасибо!

Ответы [ 2 ]

1 голос
/ 17 июня 2011

не уверен, что это единственная проблема, но я думаю, что селекторы, которые вы создаете, не то, что вы хотите сделать.

.editRow.Grupa

будет сопоставлять элемент с классом editRow и классом .Grupa

я думаю, что эта строка:

var ddlsource = '.editRow.Grupa';

должно быть просто $(this);
и ваш var ddlsource = '.editRow.Grupa';

должно быть что-то вроде var target = $(this).siblings('[name$=.Produs]:first');

, а затем любой из них: $(ddltarget) должен быть целью.

что-то вроде этого:

$(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>");

                  });

               });
            });
          });

Я не проверял это, но это общее представление о том, что вам нужно для достижения. обратите внимание, что селекторы, которые я использую, довольно неэффективны, если вы можете изменить сгенерированный код так, чтобы ваши блоки выбора имели известный класс, это было бы намного более аккуратным кодом и более эффективным

1 голос
/ 17 июня 2011

Если только я не пропустил его, $('.editRow.Grupa') не соответствует ничему в вашем html.Это говорит о том, чтобы найти все элементы с классом editRow и Grupa.У вас нет элементов с классом Grupa.

См. Этот список селекторов для правильных способов выбора элементов:

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

Ваш селектор закрыт, есливы изменяете его на $('.editRow .Grupa') и добавляете класс к вашему выбору Grupa, который является Grupa.

Что это значит, получить все элементы, которые находятся внутри элемента с классом editRow ииметь класс Grupa.Ваш селектор говорит, что вы хотите, чтобы все элементы имели класс editRow и Grupa.

...