मेरे पास HTML घटकों पर नॉकआउट बाइंडिंग के साथ अजाक्स पोस्ट करने वाले 2 फॉर्म हैं। जब एडिट फॉर्म सबमिट किया जाता है तो ऐड फॉर्म एक बाइंडिंग एरर फेंकता है और फॉर्म सबमिट को रोकता है।

दोनों फॉर्म पूरी तरह से ठीक जमा करते हैं और डेटा को संग्रहीत या संपादित करते हैं। हालांकि, एक बार किसी भी क्षेत्र में संपादन करने के बाद, ऐड फॉर्म बाधित हो जाता है और एक बाध्यकारी त्रुटि प्रदान करता है।

 <div class="row" id="addNewOrderUnitFormDiv">


                @using (Html.BeginForm("Add", "OrderUnit", FormMethod.Post, new { @class = "form-group", @id = "addForm" }))
                {
                    <h1>Add New Order Unit</h1>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group input-group">
                                <label class="has-float-label">
                                    @*<input type="text" data-bind="value: Name" id="addName" maxlength="50" class="form-control" placeholder="Name"/>*@
                                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @id = "Name", placeholder = Html.DisplayNameFor(m => m.Name), data_bind = "value: Name" })
                                    @Html.LabelFor(m => m.Name)
                                </label>
                            </div>

                        </div>
                        <div class="col-md-3">
                            @*@Html.Submit("Submit")*@
                            <input type="submit" class="btn btn-action" value="Submit" id="submitAddOrderUnit" data-bind="click: function(){AddOrderUnit();}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">


                        </div>
                    </div>
                }


            </div>

            <div class="row" id="editOrderUnitFormDiv" data-bind="with:EditModel,visible: EditShow">


                @using (Html.BeginForm("Edit", "OrderUnit", FormMethod.Post, new { @class = "form-group", @id = "editForm" }))
                {
                    <h1>Edit Order Unit</h1>
                    <div class="row">
                        <input type="hidden" data-bind="value:OrderUnitId" id="editId" />
                        <div class="col-md-6">
                            <div class="form-group input-group">
                                <label class="has-float-label">
                                    <input type="text" data-bind="value: Name" id="editName" maxlength="50" class="form-control" />
                                    @Html.LabelFor(m => m.Name)
                                </label>
                            </div>

                        </div>
                        <div class="col-md-3">
                            @*@Html.Submit("Submit")*@
                            <input type="submit" class="btn btn-action" value="Submit" id="submitEditOrderUnit" data-bind="click: function(){$root.EditOrderUnit();}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">


                        </div>
                    </div>
                }

            </div>
var orderUnitModel = function (parent, id, name) {
        var self = this;
        self.OrderUnitId = ko.observable(id);
        self.Name = ko.observable(name);
        self.EditShow = ko.observable(); 
        self.EditModel = ko.observable();

        self.Edit = function () {
            //$('#editOrderUnitFormDiv').show();
            parent.EditShow(!parent.EditShow());
            parent.EditModel(self);
        }
}
 var orderUnitViewModel = function () {
        var self = this;
        self.OrderUnitId = ko.observable();
        self.Name = ko.observable();
        self.EditShow = ko.observable(false);
        self.orderUnits = ko.observableArray([]);
        self.EditModel = ko.observable();


        self.GetOrderUnits = function () {
            $.ajax({
                url: '@Url.Action("GetOrderUnits","OrderUnit")',
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                data: {},
                success: function (response) {
                    self.orderUnits.removeAll();
                    for (var i = 0; i < response.length; i++) {
                        self.orderUnits.push(new orderUnitModel(self, response[i].OrderUnitId, response[i].Name));
                    }
                    console.log(self.Name);
                }
            });
        }
        self.AddOrderUnit = function () {
           var rData = {
                Name: self.Name()
           }
            var orderUnit = JSON.stringify(rData);
            $.ajax({
                url: '@Url.Action("Add","OrderUnit")',
                type: 'POST',
                data: orderUnit,
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON',
                success: function (response) {
                    $('#addForm').hide();
                    if (response.success == true) {
                        self.GetOrderUnits();
                        alert("Added Successfully");
                        //toastr.success("The Service was successfully added.");
                    } else {
                        alert("Not Added")
                        //toastr.error("The Service was not added.");
                    }
                    $('#addNewOrderUnit').on("click", function () {
                        $('#addForm')[0].reset();
                        $('#addForm').show();
                    })

                }
            });
        }

        self.EditOrderUnit = function () {
            self.OrderUnitId = $('#editId').val();
            self.Name = $('#editName').val();
            $.ajax({
                url: '@Url.Action("Edit","OrderUnit")',
                type: 'POST',
                data: JSON.stringify(self),
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON',
                success: function (response) {
                    if (response.success) {
                        self.GetOrderUnits();
                        $('#editForm').hide();                       
                        alert("Edit Worked");
                        //toastr.success('The service was edited successfully.');
                    } else {
                        alert("Edit did not work");
                        //toastr.error('The service was not edited.');
                    }

                }
            });
        }
}

तो एक बार जब संपादन किया जाता है और यह एक नया ऑर्डर यूनिट जोड़ने की कोशिश करते समय यह त्रुटि परिणाम देता है: <कोड> इंडेक्स: 249 अनकॉटेड टाइप एरर: self.Name एक फंक्शन नहीं है आदेश पर orderUnitViewModel.eval पर (parseBindingsString पर eval (knockout-min.js:74), :3:76) HTMLInputElement. पर (नॉकआउट-min.js:100) HTMLInputElement.dispatch पर (jquery.min.js:2) HTMLInputElement.v.handle पर (jquery.min.js:2)

हालाँकि, यदि ऐड को संपादित किए बिना किया जाता है, तो यह पूरा हो जाता है। या यहां तक ​​​​कि जब पृष्ठ रीफ्रेश किया जाता है, तब भी ऐड ठीक काम करता है। मुझे उम्मीद है कि एडिट के बाद ऐड फ्लॉलेस काम करेगा। किसी भी सहायता की सराहना की जाएगी।

0
Umar Abu Hafs 4 सितंबर 2019, 00:38

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप त्रुटि पढ़ते हैं, तो यह कहता है कि self.Name कार्य नहीं कर रहा है और आप इसे अपने ऐड फ़ंक्शन में इस तरह कॉल कर रहे हैं: self.Name() इसके बजाय self.Name आज़माएं

0
Umar Aftab 12 सितंबर 2019, 23:20