单选按钮在 ajax 调用后不会更改(淘汰 js）

Radio button does not change after ajax call (knockout js)

本文关键字：淘汰 js ajax 调用 单选按钮      更新时间：2023-09-26

我正在尝试编辑用户数据，但是当我单击用户ID时，未根据其值选择单选按钮。

结果。IsActive 返回 true 或 false。我也尝试设置结果。默认情况下在 ajax 响应中是 IsActive（true），但它不起作用。我哪里出错了？提前致谢

var self = this;
        self.DealerId = ko.observable();
        self.DealerName = ko.observable();
        self.Gender = ko.observable();
        self.Dealers = ko.observableArray(vm.Dealers());
          $.ajax({
                url: '@Url.Action("EditDealer", "Dealer")',
                cache: false,
                type: 'GET',
                contentType: 'application/json',
                data: { 'id': id },
                success: function (result) {
                    self.DealerId(result.DealerId);
                    self.DealerName(result.DealerName);
                    self.IsActive = ko.observable(result.IsActive);
                    $('#basic').modal('show');
                }
            });
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" style="background-color:#4d90fe;padding-top:10px;padding-bottom:10px">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title" style="color:white">Update Dealer Information</h4>
			</div>
			<div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Dealer Name</label>
                            <div class="col-md-9">
                                <input class="form-control" data-bind="value:DealerName" required="required" 
                                    data-parsley-required-message="Dealer name is required"></input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:10px">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Dealer Status</label>
                            <div class="col-md-9">
                                <label style="padding-left:0"><input type="radio" name="status" value="true" data-bind="checked: IsActive">Active</label>
                                <label ><input type="radio" name="status" value="false" data-bind="checked: IsActive">Inactive</label>
                            </div>                            
                        </div>
                    </div>
                </div>
			</div>
			<div class="modal-footer" style="margin-top:0;padding-top:10px;padding-bottom:10px">
				<button type="button" id="cancelSave" class="btn default" data-dismiss="modal" >Cancel</button>
				<button type="button" id="save" class="btn blue">Save</button>
			</div>
		</div>
	</div>
</div>

看起来，就像您正在初始化属性 self。在 ajax-success 回调中对你的 ko-viewmodel 是活动的。这意味着，只有在 ajax 完成时才会创建可观察的 IsActive 属性。但是 ajax 调用是异步的。因此，如果您在没有实例化的自我的情况下绑定视图模型。IsActive 属性，您将从 ko 收到错误。（检查浏览器控制台）。这不是在视图模型构造函数中进行 ajax 调用的好方法。

尝试在 ajax 之前声明属性，如下所示：

var self = this;
    self.DealerId = ko.observable();
    self.DealerName = ko.observable();
    self.Gender = ko.observable();
    self.Dealers = ko.observableArray(vm.Dealers());
    self.IsActive = ko.observable(false);
      $.ajax({
            url: '@Url.Action("EditDealer", "Dealer")',
            cache: false,
            type: 'GET',
            contentType: 'application/json',
            data: { 'id': id },
            success: function (result) {
                self.DealerId(result.DealerId);
                self.DealerName(result.DealerName);
                self.IsActive(result.IsActive);
                $('#basic').modal('show');
            }
        });

在这种情况下，您的无线电将具有默认的检查值（处于非活动状态），直到 ajax 完成。ajax 完成后，它将成为正确的值。避免这种临时数据不一致的最佳方法是在创建视图模型之前加载所有数据，并将所有 ajax-data 作为构造函数参数传递。这种方法允许ko-viewmodel在绑定时具有实际数据。（像这样：

$.ajax({
            url: '@Url.Action("EditDealer", "Dealer")',
            cache: false,
            type: 'GET',
            contentType: 'application/json',
            data: { 'id': id },
            success: function (result) {
                //create your viewmodel inside the ajax-succcess and  
                //populate it with data
                var myViewModel = new MyViewModel(result);
                 //and apply ko-binding here, after creating the viemodel
                $('#basic').modal('show');
            }
        });
function MyViewModel(ajaxData){
 var self = this;
    self.DealerId = ko.observable(ajaxData.DealerId);
    self.DealerName = ko.observable(ajaxData.DealerId);
    self.Gender = ko.observable(ajaxData.DealerName);
    self.IsActive = ko.observable(ajaxData.IsActive);
    self.Dealers = ko.observableArray(vm.Dealers());
}
您需要

为两个<input type="radio">分配相等的name，以使浏览器了解它们是相关的。

相关文章：