Dynamic Partial Views of Payments collected in Main View using Javascript MVC 3 ASP.NET

Question

I am some what new to javascript and mvc3 just for your information.

I have been having troubles trying to figure out multiple payment models on one view without the javascript getting all messed up.

What I am trying to do:

Create a parent model so that all the children models will have one or two attributes from the parent model.

Use javascript in order to get data from the server to gather and post data without messing up each other payments on the view already.

If there is an easier way to collect multiple payments and return them to the control please give me a link or some information to research... Thank you!

In the main view all I do is display the first partial view and two buttons(post, add new payment) the post button submits the payment to the server, and the new payment adds another partial view payment model.

the issue I am having is getting the partial views to work with the javascript, which only targets the first payment. I have been looking up this issue for a few days now and can't find a good answer. The only answer that makes sense to me is to change the id's of all the elements on the partial view and have my javascript reference the updated id's but I don't know how to change the id's dynamically in order for the javascript to change with it.

I apologize if I am missing anything, I am new to this stuff.

Payment Partial View:

@model SBTools.Models.Payment

@*AJAX TO RETRIEVE BILLING COMPANY LIST DATA*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Content("~/AddPayments/GetBillingCompanies")',
            type: 'POST',
            data: {},
            success: function (data) {
                var items = "<option>Select Billing Company</option>";
                $.each(data, function (i, item) {
                    var val = item.OCN;
                    var txt = item.OCNDescription;
                    items += "<option value=" + val + ">" + val + " " + txt + "</option>";
                });
                $('#OCN').html(items);
            }
        });
    });
</script>

@*AJAX TO RETRIEVE CARRIERNAME LIST
    PARAM1: Billing Company OCN*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#OCN').on("change", function () {
            var OCN = $('#OCN').val();
            var connectionString = $('#connectionString').val();

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetConnectionString")',
                type: 'POST',
                data: { OCN: OCN },
                success: function (data) {
                    $('#connectionString').val(data);
                    connectionString = data;
                    $.ajax({
                        url: '@Url.Content("~/AddPayments/GetGLAccounts")',
                        type: 'POST',
                        data: { connectionString: connectionString, OCN: OCN },
                        success: function (data) {
                            var items = "";
                            $.each(data, function (i, item) {
                                items += "<option value=" + item.ID + "/" + item.AccountNumber + ">GL:" + item.AccountNumber +
                                    " &#160;&#160;&#160" + item.AccountName + "</option>";
                            });
                            $('#GLAccount').html(items);
                        }
                    });
                }
            });

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetCarriers")',
                type: 'POST',
                data: { OCN: OCN },
                success: function (data) {
                    var items = "<option>Select a Carrier</option>";
                    $.each(data, function (i, item) {
                        if (item.CIC) {
                            items += "<option value=" + item.CarrierId + ">" + item.CIC + " CIC &#160;" + item.CarrierName + "</option>";
                        } else if (item.OCN) {
                            items += "<option value=" + item.CarrierId + ">" + item.OCN + " OCN &#160;" + item.CarrierName + "</option>";
                        }
                    });
                    $('#CarrierName').html(items);
                }
            });
        });
    });
</script>


@*AJAX TO RETRIEVE BAN/INVOICE/AMOUNT DATA
    PARAM1: Billing company ocn
    PARAM2: Carrier ID*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#CarrierName').on("change", function () {
            var isZeroBalanceShowing = false;
            if ($('#isZeroBalanceShowing').prop("checked"))
                isZeroBalanceShowing = true;
            var carrierID = $('#CarrierName').val();
            var ocn = $('#OCN').val();
            var connectionString = $('#connectionString').val();

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetAccount")',
                type: 'POST',
                data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        var inv = item.Invoice;
                        var ban = item.BAN;
                        var initAmnt = item.InitAmount;
                        var amnt = item.Amount;
                        var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
                        var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();

                        items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
                    });
                    $('#BAN').html(items);
                }
            });
        });
    });
</script>

@*AJAX TO SHOW ZERO BALANCES IN INVOICE DROPDOWN*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#isZeroBalanceShowing').click(function () {
            var isZeroBalanceShowing = false;
            if ($('#isZeroBalanceShowing').prop("checked"))
                isZeroBalanceShowing = true;
            if ($('#CarrierName').val() != null) {
                var carrierID = $('#CarrierName').val();
                var ocn = $('#OCN').val();
                var connectionString = $('#connectionString').val();

                $.ajax({
                    url: '@Url.Content("~/AddPayments/GetAccount")',
                    type: 'POST',
                    data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
                    success: function (data) {
                        var items = "";
                        $.each(data, function (i, item) {
                            var inv = item.Invoice;
                            var ban = item.BAN;
                            var amnt = item.Amount;
                            var initAmnt = item.InitAmount;
                            var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
                            var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();

                            items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
                        });
                        $('#BAN').html(items);
                    }
                });
            }
        });
    });
</script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var amnt = "";
        $('#Amount').blur(function () {
            if ($('#Amount').val().toString().charAt(0) === '$') {
                amnt = $('#Amount').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#Amount').val()).toFixed(2);
            }
            $('#Amount').val(amnt);
        });
        $('#Deposit').blur(function () {
            if ($('#Deposit').val().toString().charAt(0) === '$') {
                amnt = $('#Deposit').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#Deposit').val()).toFixed(2);
            }
            $('#Deposit').val(amnt);
        });
        $('#CheckAmount').blur(function () {
            if ($('#CheckAmount').val().toString().charAt(0) === '$') {
                amnt = $('#CheckAmount').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#CheckAmount').val()).toFixed(2);
            }
            $('#CheckAmount').val(amnt);
        });
    });
</script>

@*DATEPICKER FOR DATE RECIEVED*@
<script>
    $.datepicker.setDefaults({
        constrainInput: true,
        dateFormat: 'yyyy/mm/dd',
        gotoCurrent: true,
        hideIfNoPrevNext: true,
        minDate: '-3m',
        maxDate: 0,
        showOn: 'both'
    });

    @*DATEPICKER FOR CHECKDATE*@

    // To date - default to today's date
    $(document).ready(function () {
        $('#Date').datepicker({
            maxDate: '0',
            defaultDate: new Date(),
            onSelect: function (dateStr) {
                $('#CheckDate').datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
            }
        });
    });

    $(document).ready(function () {
        $('#CheckDate').datepicker({
            maxDate: '0',
            defaultDate: new Date(),
            onSelect: function (dateStr) {
                $('#Date').datepicker("option", "maxDate", '+0m +0w');
            }
        });
    });
</script>

<h3>Payment @Html.DisplayFor(x => x.AccountID):</h3>
    @Html.HiddenFor(x => x.AccountID, new { id = "ID" })
    @Html.HiddenFor(x => x.connectionString, new { id = "connectionString" })

<table id="tblAcct" class="display">
            <tr class="spacer" />

            <tr>
                <td>Billling Company (First**):@Html.ValidationMessageFor(model => model.OCN, " *Select a Value")</td>
                <td>Carrier Company (Second**):@Html.ValidationMessageFor(model => model.CarrierName, " *Select a Value")</td>
                <td>Deposit Amount:@Html.ValidationMessageFor(model => model.Deposit, " *Enter a Value") </td>
            </tr>
            <tr>

                @*OCN*@
                <td>
                    <select required id="OCN" name="OCN" style="width: 200px;" tabindex="0" ></select></td>

                @*CarrierName*@
                <td>
                    <select required id="CarrierName" name="CarrierName" style="width: 200px;"></select></td>

                @*DEPOSIT*@
                <td>$@Html.TextBoxFor(a => a.Deposit, new { style = "width:200px;" })</td>

            </tr>

            <tr class="spacer" />

            <tr>
                <td>Check Date:</td>
                <td>Check Amount:@Html.ValidationMessageFor(model => model.CheckAmount, " *Enter a Value")</td>
                <td>Check Number:@Html.ValidationMessageFor(model => model.CheckNumber, " *Enter a Value")</td>
            </tr>
            <tr>
                @*CHECKDATE*@
                <td>@Html.EditorFor(model => model.CheckDate, new { id = "CheckDate" })
                    @Html.ValidationMessageFor(model => model.CheckDate, "mm/dd/yyyy")</td>

                @*CHECKAMOUNT*@
                <td>$@Html.TextBoxFor(a => a.CheckAmount, new { style = "width:200px;" })</td>

                @*CHECKNUMBER*@
                <td>@Html.TextBoxFor(a => a.CheckNumber, new { style = "width:200px;" })</td>
            </tr>
        </table>
<table id="tblAcctInvoice" class="display">
    <tr class="spacer" />

    <tr>
        <td>Invoice:&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                     @Html.CheckBoxFor(model => model.isZeroBalanceShowing, new { id = "isZeroBalanceShowing" }) Zero Balances
                     @Html.ValidationMessageFor(model => model.Invoice, " *Select a Value")</td>
        <td>Payment Date:</td>
        <td>Payment Amount:@Html.ValidationMessageFor(model => model.Amount, " *Enter a Value")</td>
        <td>GL Account:@Html.ValidationMessageFor(model => model.GLAccount, " *Select a Value")</td>
    </tr>
    <tr>
        @*BAN*@
        <td>
            <select required id="BAN" name="Invoice" style="width: 351px;"></select></td>
        @*PAYMENT DATE*@
        <td>
            <div class="Date">
                @Html.EditorFor(model => model.Date, new { id = "Date" })
                @Html.ValidationMessageFor(model => model.Date, "mm/dd/yyyy")
            </div>
        </td>

        @*PAYMENT AMOUNT*@
        <td>
            <div class="currency">
                $@Html.TextBoxFor(a => a.Amount, new { style = "width:150px;", id = "Amount" })
            </div>
        </td>

        @*GLACCOUNT*@
        <td>
            <select required id="GLAccount" name="GLAccount" style="width: 200px;"></select></td>
    </tr>
</table>

<table id="tblAcctComment" class="display">
    <tr>
        <td>Comments:&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                @*ISSERVICEBUREAU*@
            @Html.CheckBoxFor(a => a.isServiceBureauCollection, new { @checked = "checked" }) Service Bureau Collection:</td>

    </tr>
    <tr>
        <td>
            @Html.TextAreaFor(a => a.Comment, new { style = "width:99%; height: 20px;" })
        </td>
    </tr>
</table>

Answer 1

This is happening because you are dynamically loading html(partial Views) in your pages and the new html element added to the page are not binded with any javascript events. jquery always work only on those element that are loaded in HTML dom. To get your page working you have to call all your jquery event for that partial page on success callback.