I'm adding some functionality to an old project (ASP.NET MVC 5)
In view I render existing items:
@if (Model.ItemsVM != null)
{
for (int i = 0; i < Model.ItemsVM.Count(); i++)
{
Model.ItemsVM[i].Index = i; Html.RenderPartial("_AddItem", Model.ItemsVM[i]);
}
}
and later via AJAX I call the same partial view from controller to add additional items.
The pickle is that the jQuery code from that partial view is performing as expected if added dynamically, but not if rendered normally by Html.RenderPartial.
Additional info:
jQuery JavaScript Library v3.1.1 is loaded at the bottom
_AddItem.cshtml
@model K.Master.VMs.Racuni.RacunStavkeVM
<div class="row" id="[email protected]">
<div class="col-sm-1 text-center">
<input type="hidden" name="ItemsVM[@Model.Index].RacunStavkaId" value="@Model.RacunStavkaId" />
<strong>@{ int j = Model.Index + 1; }@j</strong>
</div>
<div class="col-sm-6" id="jqueryTest">
@Model.ComboName
<input type="hidden" name="ItemsVM[@Model.Index].StavkaId" value="@Model.StavkaId" />
<input type="hidden" name="ItemsVM[@Model.Index].ComboName" value="@Model.ComboName" />
</div>
<div class="col-sm-2">
<!-- Količina -->
<input class="form-control focus" data-val="true" data-val-number="@Ress.ErrMustBeANumber" name="ItemsVM[@Model.Index].Quantity" type="text" value="@Model.Quantity" id="ItemsVM_@(Model.Index)__Quantity" />
<span class="field-validation-valid text-danger" data-valmsg-for="ItemsVM_@(Model.Index)__Quantity" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-2 text-center">
@Model.MjernaJedinica
<input type="hidden" name="ItemsVM[@Model.Index].MjernaJedinica" value="@Model.MjernaJedinica" />
</div>
<div class="col-sm-3 text-center">
<!-- Cijena -->
<input class="form-control" data-val="true" data-val-number="@Ress.ErrMustBeANumber" name="ItemsVM[@Model.Index].Cijena" type="text" value="@Model.Cijena" id="ItemsVM_@(Model.Index)__Cijena" />
<span class="field-validation-valid text-danger" data-valmsg-for="ItemsVM_@(Model.Index)__Cijena" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-2 text-center">
<!-- Popust -->
<input class="form-control" data-val="true" data-val-number="@Ress.ErrMustBeANumber" name="ItemsVM[@Model.Index].Popust" type="text" value="@Model.Popust" id="ItemsVM_@(Model.Index)__Popust" />
<span class="field-validation-valid text-danger" data-valmsg-for="ItemsVM_@(Model.Index)__Popust" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<!-- Suma -->
<input class="form-control sum" data-val="true" data-val-number="@Ress.ErrMustBeANumber" name="ItemsVM[@Model.Index].Sum" type="text" value="@Model.Popust" id="ItemsVM_@(Model.Index)__Sum" disabled style="text-align:right;" />
<span class="field-validation-valid text-danger" data-valmsg-for="ItemsVM_@(Model.Index)__Sum" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-1 text-center">
<input type="checkbox" name="ItemsVM[@Model.Index].Delete" value="true" class="iHidden" />
</div>
</div>
<div class="clearfix"></div>
<script type="text/javascript">
$('#added_row_@(Model.Index)').on('input propertychange change keyup click', function () {
var [email protected] = parseFloat($("#ItemsVM_@(Model.Index)__Quantity").val() != '' ? $("#ItemsVM_@(Model.Index)__Quantity").val() : 0);
var [email protected] = parseFloat($("#ItemsVM_@(Model.Index)__Cijena").val() != '' ? $("#ItemsVM_@(Model.Index)__Cijena").val() : 0);
var [email protected] = parseFloat($("#ItemsVM_@(Model.Index)__Popust").val() != '' ? $("#ItemsVM_@(Model.Index)__Popust").val() : 0);
if ([email protected] > 0) {
$('#ItemsVM_@(Model.Index)__Sum').val(Math.round(([email protected] * [email protected]) - ((([email protected] * [email protected]) * [email protected]) / 100)).toFixed(2));
}
else {
$('#ItemsVM_@(Model.Index)__Sum').val(Math.round([email protected] * [email protected]).toFixed(2));
}
SumSums();
});
</script>
I know that the problem is with jQuery being loaded before something, but all variations with document / ready etc. doesn't work and breaks the script when loaded dynamically.