0

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.

1 Answer 1

0

And by placing jQuery bundle to top the problem is solved!

<html>
<head>    
@Scripts.Render("~/bundles/jquery")
...
</head>
<body>
...
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.