2
Answers

Button of type submit doesn't fire in the first click

Hello 
h'm working on ajax call that will call mvc5 API2,
my problem is: when i hit any of the buttons for the first type it doesn't get fierd
but for the second type it will be fiered.
 
Whats the problem...?
  1. <form id="allowance-form">  
  2.     <div class="container">  
  3.         <div class="row">  
  4.             <div class="col-sm-3"></div>  
  5.   
  6.             <div class="col-sm-6 container-box">  
  7.                 <div class="allowance-box jumbotron">  
  8.                     <ul class="buttons-list" id="listOfButtons">  
  9.                         @*<li><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small"></i>@Html.ActionLink("Save", "save", "payroll", new { @class = "button-link" })</li>*@  
  10.                         <li><button type="submit"  class="button-link js-create"><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small"></i>Save</button></li>  
  11.                         <li><button type="submit" class="button-link js-reset"><i id="iconClear" class="glyphicon glyphicon-erase icon-small"></i>Clear</button></li>  
  12.                         <li><button type="submit" class="button-link js-delete"><i id="iconDelete" class="ion-backspace icon-small"></i>Delete</button></li>  
  13.                           
  14.                     </ul>  
  15.                     <div class="options-box">  
  16.                         <p class="header-after-line">Options</p>  
  17.                     </div>  
  18.                     <div class="form-box">  
  19.                         <div class="col-sm-4 inner-box">  
  20.                             <label for="txtboxCode" class="lbl-first">Code</label>  
  21.                             <input type="text" id="txtboxCode" value="@Model.Code" readonly />  
  22.                             <span class="btn-search"><i class="ion-ios-search-strong icon-small icon-search" data-toggle="modal" data-target="#lookup"></i></span>  
  23.                         </div>  
  24.   
  25.   
  26.                         <div class="col-sm-4 inner-box">  
  27.                             <label for="txtboxDesc">Description</label>  
  28.                             <input type="text" id="txtboxDesc" required />  
  29.                         </div>  
  30.   
  31.                         <div class="col-sm-4 inner-box">  
  32.                             <label for="txtboxName">Arabic Name</label>  
  33.                             <input type="text" id="txtboxName" />  
  34.                         </div>  
  35.   
  36.                         <div class="col-sm-4 inner-box">  
  37.                             <label for="txtboxMin">Minimum Value</label>  
  38.                             <input type="text" id="txtboxMin" />  
  39.                         </div>  
  40.   
  41.                         <div class="col-sm-4 inner-box">  
  42.                             <label for="txtboxMax">Maximum Value</label>  
  43.                             <input type="text" id="txtboxMax" />  
  44.                         </div>  
  45.   
  46.                         @*<div class="col-sm-4 inner-box">  
  47.                                 <label for="txtboxMonth">Monthly Year</label>  
  48.                                 <input type="text" id="txtboxMonth" />  
  49.                             </div>*@  
  50.                         @*<div class="col-sm-4 inner-box">  
  51.                                 <label for="lstMonthly">Monthly Year</label>  
  52.                                 <select id="lstMonthly" class="lstMontly">  
  53.                                     <option></option>  
  54.                                 </select>  
  55.                             </div>*@  
  56.                         <div class="col-sm-4 inner-box">  
  57.                             <label for="txtboxMax">Monthly Yearly</label>  
  58.                             <select id="lstMonthly" class="lstMontly">  
  59.                                 <option value="12">12</option>  
  60.                             </select>  
  61.                         </div>  
  62.   
  63.                         <div class="chk-box">  
  64.                             <label for="Social Security">  
  65.                                 Social Security  
  66.                                 @*@Html.CheckBox("Social Security", false, new { @id = "chkSocial" })*@  
  67.                                 <input type="checkbox" id="chkSocial" />  
  68.                             </label>  
  69.                             <label for="Vacations">  
  70.                                 Vacations  
  71.                                 @*@Html.CheckBox("Vacations", false, new { @id = "chkVac" })*@  
  72.                                 <input type="checkbox" id="chkVac" />  
  73.                             </label>  
  74.                             <label for="Tax">  
  75.                                 Tax  
  76.                                 @*@Html.CheckBox("Tax", false, new { @id = "chkTax" })*@  
  77.                                 <input type="checkbox" id="chkTax" />  
  78.                             </label>  
  79.                         </div>  
  80.   
  81.                         <label for="????? ???????">  
  82.                             ????? ???????  
  83.                             @*@Html.CheckBox("????? ???????", false, new { @id = "chkOvertime" })*@  
  84.                             <input type="checkbox" id="chkOvertime" />  
  85.                         </label>  
  86.                         <input type="hidden" id="hiddenId"  />  
  87.                     </div>  
  88.                 </div>  
  89.   
  90.                 <div class="col-sm-3"></div>  
  91.             </div>  
  92.         </div>  
  93.     </div>  
  94. </form>  
 
 
 
 
 This is the ajax code: 
 
 
  1. $("#allowance-form").validate({  
  2.        submitHandler: function () {  
  3.   
  4.            $("#allowance-form .js-create").on("click", function (e) {  
  5.                //$("#allowance-form").submit(function (e) {  
  6.   
  7.                e.preventDefault();  
  8.                var Id = $("#hiddenId").val();  
  9.                var desc = $("#txtboxDesc").val();  
  10.                var code = $("#txtboxCode").val();  
  11.                var arName = $("#txtboxName").val();  
  12.                var MinVal = $("#txtboxMin").val();  
  13.                var maxVal = $("#txtboxMax").val();  
  14.                var optionVal = $("#lstMonthly").val();  
  15.                if ($("#chkSocial").is(':checked')) { var chSocial = true; } else { var chSocial = false; }  
  16.                if ($("#chkVac").is(':checked')) { var chVac = true; } else { var chVac = false; }  
  17.                if ($("#chkTax").is(':checked')) { var chTax = true; } else { var chTax = false; }  
  18.                if ($("#chkOvertime").is(':checked')) { var chOver = true; } else { var chOver = false; }  
  19.   
  20.                if (Id != "") {  
  21.                    var data = {  
  22.                        Code: code, Description: desc, MaxValue: maxVal,  
  23.                        MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,  
  24.                        SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,  
  25.                        Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test", AllowanceID: Id  
  26.                    }  
  27.   
  28.   
  29.                    $.ajax({  
  30.                        url: "/api/allowances/" + Id,  
  31.                        cache: false,  
  32.                        method: "PUT",  
  33.                        data: data,  
  34.                          
  35.                          
  36.                    })  
  37.   
  38.                  .done(function () {  
  39.                      toastr.success("Information has been Updated successfully", "Success");  
  40.                      resetForm();  
  41.                      //table.row().remove().draw();  
  42.                      //loadAllowances();  
  43.                  })  
  44.                 .fail(function () {  
  45.                     toastr.error("Somthing unexpected happend", "Error");  
  46.                     // table.row().remove().draw();  
  47.   
  48.                 })  
  49.                }  
  50.                else {  
  51.                    var data = {  
  52.                        Code: code, Description: desc, MaxValue: maxVal,  
  53.                        MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,  
  54.                        SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,  
  55.                        Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test"  
  56.                    }  
  57.                    $.ajax({  
  58.                        url: "/api/allowances/",  
  59.                        method: "POST",  
  60.                        data: data,  
  61.                        dataType:"json"  
  62.                    })  
  63.               .done(function (response) {  
  64.                   toastr.success("Information has been added successfully", "Success");  
  65.                   resetForm();  
  66.                   //loadAllowances();  
  67.                   //table.row().remove().draw();  
  68.               })  
  69.               .fail(function (jqXHR, status, err) {  
  70.                   var json = jqXHR.responseJSON;  
  71.                  var json2 = json["ModelState"];  
  72.                   var json3 = json2["allowances"];  
  73.                   var arr = json3[0];  
  74.                   toastr.error(arr, "Error");  
  75.   
  76.               })  
  77.                }  
  78.   
  79.   
  80.   
  81.            });  
  82.   
  83.            $("#allowance-form .buttons-list .js-delete").on('click', function (e) {  
  84.                e.preventDefault();  
  85.                //var Id = $("#hiddenId").val();  
  86.                //if (Id == "") { Id = null } else { Id = Id }  
  87.   
  88.                $.ajax({  
  89.                    url: "/api/allowances/" + $("#hiddenId").val(),  
  90.                    method: "DELETE",  
  91.                    cache: false,  
  92.                    success: function () {  
  93.                        toastr.success("Information has been deleted successfully", "Deleted");  
  94.                        resetForm();  
  95.                        //table.row().remove().draw();  
  96.                        // loadAllowances()  
  97.                    },  
  98.                    error: function () {  
  99.                        toastr.error("Something unexpected has been happen", "Error");  
  100.                    },  
  101.                    async: "false"  
  102.   
  103.                });  
  104.   
  105.   
  106.            });  
  107.   
  108.   
  109.   
  110.        }  
  111.    });  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Answers (2)