0

I have a view where a form is loaded first with input fields. On click event a new row will be created to for adding details. Row is created but the autocomplete is not firing in the dynamic row. Following are the codes

purchase.cshtml

<style>
    tr.spaceUnder > td {
        padding-bottom: 1em;
    }

    td {
        padding: 0 10px 0 10px;
        background-color:#f9f9f9;vertical-align:top
    }

.tbl  {border-collapse:collapse;border-spacing:0;border-color:#ccc;border-width:1px;border-style:solid;}

</style>

@using (Html.BeginForm("AddPurchase", "Purhcase", FormMethod.Post))
{
<fieldset>
    <legend>Enter Details of Purchase</legend>
    <div id="messagediv" style="color:red;"></div>
    <table class="tbl">

        <thead>
            <tr class="spaceUnder">
                <td class="tbl1">Select the Product</td>
                <td class="tbl1">Base Rate</td>
                <td class="tbl1">MRP</td>
                <td class="tbl1">Quantity</td>
                <td class="tbl1">Mfg Date</td>
                <td class="tbl1">Purchase Date</td>
            </tr>
        </thead>
        <tbody>
            <tr class="demo" style="display:none;">
                <td class="tbl2">@Html.EditorFor(m => m.productName, new { htmlAttributes = new { @class = "cdetail" } })</td>@Html.HiddenFor(m => m.productID)
                <td class="tbl2">@Html.EditorFor(m => m.baseRate)</td>
                <td class="tbl2">@Html.EditorFor(m => m.mrp)</td>
                <td class="tbl2">@Html.EditorFor(m => m.quantity)</td>
                <td class="tbl2">@Html.EditorFor(m => m.mfgDate)</td>
                <td class="tbl2">@Html.EditorFor(m => m.purchaseDate)</td>
            </tr>
            <tr class="demorow">
                <td class="tbl2">@Html.EditorFor(m => m.productName)</td>@Html.HiddenFor(m => m.productID)
                <td class="tbl2">@Html.EditorFor(m => m.baseRate)</td>
                <td class="tbl2">@Html.EditorFor(m => m.mrp)</td>
                <td class="tbl2">@Html.EditorFor(m => m.quantity)</td>
                <td class="tbl2">@Html.EditorFor(m => m.mfgDate)</td>
                <td class="tbl2">@Html.EditorFor(m => m.purchaseDate)</td>
            </tr>
        </tbody>
    </table>
    <input type="button" id="addrow" value="Add row" />
</fieldset>

JS file

$(document).ready(function () {

    $("input[name='productName']").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Purchase/GetProduct",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.ProductName,
                            value: item.ProductName,
                            ID: item.ProductID
                        };
                    }));
                }

            });
        },

        select: function (event, ui) {
            $('#productID').val(ui.item.ID);
        }
    });


    $("#purchaseDate").click(function () {
        $(this).datepicker({ dateFormat: 'dd/mm/yy' }).datepicker("show");

    });

    $("#addrow").click(function () {

        var template = $('.demo').clone();
        $('.tbl').append(template);
        template.removeClass('demo').addClass('demorow').show();
    });

});

and I also want to transfer all the values to the controller too?

abdulkhadar7
  • 125
  • 1
  • 1
  • 12
  • 1
    for dynamic events to work the event has to be tied to the document. see this link for how to do this http://stackoverflow.com/questions/9693758/how-do-you-bind-jquery-ui-autocomplete-using-on – Matt Bodily Feb 02 '17 at 18:56
  • @MattBodily yeah its working. Thanks mate. Have any suggestions for the bulk insertion and the dynamic html row creation – abdulkhadar7 Feb 02 '17 at 19:07
  • I don't, if you open another question someone may be able to help – Matt Bodily Feb 02 '17 at 19:12
  • You need to attach the plugin after you add the row. But this code will never bind to to your model and suggest you look at the options [in this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for dynamically adding (and removing) collection items –  Feb 02 '17 at 21:21

0 Answers0