selettore jQuery con prefissi
-
29-10-2019 - |
Domanda
Questo è il mio codice 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>
Quindi, sto rendendo una vista parziale per visualizzare più elementi e ho un'azione per crearne di più. Sto cercando di chiamare una funzione JSON quando cambio il valore nella prima lista a discesa per ripopolare la seconda. Questa è la mia sceneggiatura: AGGIORNARE
<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>
La mia azione JSON dal controller non viene chiamata. Cosa devo cambiare nella sceneggiatura per lavorare? Grazie!
Soluzione
Non sono sicuro che questo sia l'unico problema, ma penso che i selettori che stai costruendo non siano ciò che intendi fare.
.editRow.Grupa
corrisponderà a un elemento con la classe editrow e la classe .grupa
Penso che questa linea:
var ddlsource = '.editRow.Grupa';
probabilmente dovrebbe essere solo $(this)
;
e il tuo var ddlsource = '.editRow.Grupa';
dovrebbe essere qualcosa di simile var target = $(this).siblings('[name$=.Produs]:first');
E poi uno di questi: $(ddltarget)
dovrebbe essere invece target.
Soemthing come questo:
$(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>");
});
});
});
});
Non l'ho testato, ma questa è l'idea generale di ciò che devi scegliere. Nota, i selettori che sto usando sono abbastanza inefficienti, se puoi modificare il codice generato in modo che le caselle di selezione abbiano una classe nota, sarebbe un codice molto più ordinato e più efficace
Altri suggerimenti
A meno che non mi manchi solo $('.editRow.Grupa')
Non sembra abbinare nulla nel tuo HTML. Questo dice di trovare tutti gli elementi con una classe di editRow
e Grupa
. Non hai elementi con una classe di Grupa
.
Vedere questo elenco di selettori per modi validi per selezionare gli elementi:
http://api.jquery.com/category/selectors/
Il tuo selettore è vicino se lo cambi $('.editRow .Grupa')
e aggiungi una classe alla tua selezione grupa che è Grupa
.
Quello che sta dicendo è: ottenere tutti gli elementi che si trovano all'interno di un elemento con la classe di editRow
e avere la classe di Grupa
. Il tuo selettore dice che vuoi tutto l'elemento che abbia entrambe le classi editRow
e Grupa
.