两个Ajax方法一个接一个地执行

时间:2015-02-10 15:54:40

标签: knockout.js

我在我的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>

为了便于理解,我还附上了一张问题的照片。 enter image description here 任何帮助将不胜感激。我是Javascript和Ajax的新手,这个问题似乎与我的联盟有点不同。

1 个答案:

答案 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';
       }
  };
 };