我在我的Javascript代码中遇到一个非常奇怪的问题。我有一个ajax调用来更新数据库中的详细信息。当用户想要取消编辑时,我还有另一种方法。当我点击更新时按钮,取消编辑方法也被调用。
代码如下
var provider = function () {
var self = this;
if ((providerEditInfo.Certification == "M.D.") || (providerEditInfo.Certification == "M.B.B.S")) {
specialities = ["Dermatology", "Hematology", "Neurology"];
}
else if ((providerEditInfo.Certification == "R.N.") || (providerEditInfo.Certification == "M.S.N.")) {
specialities = ["Pediatric Nursing", "Critical Care Nursing", "Occupational Health Nursing"];
}
self.providerID = ko.observable(providerEditInfo.ProviderID);
self.firstName = ko.observable(providerEditInfo.FirstName);
self.lastName = ko.observable(providerEditInfo.LastName);
self.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
self.certification = ko.observable(providerEditInfo.Certification);
self.specializationArray = ko.observableArray(specialities);
self.updateProviderDetails = function (provider) {
$.ajax({
url: "/Provider/UpdateProviderDetails/",
type: "POST",
data: provider,
async:false,
success: function (result) {
if (result.url) {
location.href = result.url;
}
}
});
};
self.cancelEdits = function () {
if (confirm('Are you sure you want to Cancel?')) {
window.location.href = '/Provider/ShowTheListOfProviders';
}
};
};
$(document).ready(function () {
ko.applyBindings(new provider());
});
HTML
@model Greenway.Demo.DataAccess.Entity.Provider
<body>
<div class="container">
<form class="form-horizontal" role="form" id="editProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">First Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="firstName" name="firstName" data-bind="value:firstName , event: { keypress: allowOnlyAlphabets }">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">Last Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value:lastName ,event: { keypress: allowOnlyAlphabets }">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">Specialization:</label>
<div class="col-sm-6">
<select class="form-control" id="specialization" name="specialization" data-bind="value:specialization,options:specializationArray, optionsCaption: 'Select a Specialization'"></select>
</div>
</div>
<div class="form-group text-center">
<button type="button" data-bind="click: updateProviderDetails" class="btn btn-primary">Update</button>
<button type="button" data-bind="click: cancelEdits" class="btn btn-primary">Cancel</button>
</div>
</form>
</div>
</body>
<script type="text/javascript">
var providerEditInfo = @Html.Raw(Json.Encode(Model));
</script>
<script type="text/javascript" src="../../App_Scripts/Shared/Functions.js"> </script>
为了便于理解,我还附上了一张问题的照片。 任何帮助将不胜感激。我是Javascript和Ajax的新手,这个问题似乎与我的联盟有点不同。
答案 0 :(得分:0)
我不确定这一点,但试试看。
从函数本身中删除以下代码。
self.updateProviderDetails = function (provider) {
$.ajax({
url: "/Provider/UpdateProviderDetails/",
type: "POST",
data: provider,
async:false,
success: function (result) {
if (result.url) {
location.href = result.url;
}
}
});
};
self.cancelEdits = function () {
if (confirm('Are you sure you want to Cancel?')) {
window.location.href = '/Provider/ShowTheListOfProviders';
}
};
并在函数下面添加代码。
provider.prototype = {
updateProviderDetails : function (provider) {
$.ajax({
url: "/Provider/UpdateProviderDetails/",
type: "POST",
data: provider,
async:false,
success: function (result) {
if (result.url) {
location.href = result.url;
}
}
});
};
cancelEdits : function () {
if (confirm('Are you sure you want to Cancel?')) {
window.location.href = '/Provider/ShowTheListOfProviders';
}
};
};