保存之前按确认按钮

Question

我遇到问题，我用ajax保存信息的方式与警报，我使用JQuery确认，但按钮文本无法更改我决定做我自己的对话框所以我可以修改这些按钮，但问题是我点击保存按钮之前的数据保存。

function saveEdit(e) { 
    var result = ''; 
    var item = $('input[name=username]').val(); 
    $.ajax({ 
    url: root + 'ccards/getAllDetails', 
    data: { 
     item: item 
    }, 
    type: 'POST', 
    async: false, 
    dataType: 'json', 
    success: function(data) { 

     var dateObj = new Date(); 
     var month = dateObj.getUTCMonth() + 1; 
     var day = dateObj.getUTCDate(); 
     var year = dateObj.getUTCFullYear(); 
     var hour = dateObj.getUTCHours() 
     var minute = dateObj.getUTCMinutes(); 
     var second = dateObj.getUTCSeconds(); 

     var datetoday = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second; 

     var selected_date = Date.parse(data.modified); 
     var today = Date.parse(datetoday); 

     var d = new Date(data.modified); 
     var h = d.getHours(); 
     var m = d.getMinutes(); 

     var username = data.username.toUpperCase(); 
     var coreuser = data.core_user.username.toUpperCase(); 
     var hr = ''; 
     var time = ''; 

     if (h <= '12') { 
     hr = h; 
     time = hr + ":" + m + " AM"; 
     } else { 
     hr = h - 12; 
     time = hr + ":" + m + " PM"; 
     } 

     if (Math.abs(today - selected_date) <= 60 * 60 * 24 * 1000) { 

     $('#confirmSave').show().dialog({ 
      height: 200, 
      width: 500, 
      zIndex: 10, 
      modal: true, 
      resizable: false 
     }); 

     $('#time').html(time); 
     $('#coreuser').html(coreuser); 

     if ($('#confirmSave button[name=submit]').data('clicked')) { 
      result = true; 


     } else if ($('#confirmSave button[name=cancel]').data('clicked')) { 
      result = false; 
     } 
     } 
    } 
    }); 

    return result; 
} 

$('.clientForm').submit(function(event) { 

    var form = this; 
    console.log(form); 
    if ($("input[name='action']", form).val() == 'save' || $("input[name='action']", form).val() == 'savenew' || $("input[name='action']", form).val() == 'login') { 
    if ((!validate_email(form)) || (!validate(form))) { 
     mode = 'edit'; 
     setMode(mode); 
     return false; 
    } 
    } 

    var save = saveEdit(); 
    if (save == true) { 

    var dt = $(this).serializeArray(); 

    var action = root + $("input[name='module']", form).val() + $("input[name='method']", form).val(); 
    $('.fields', this).slideUp('fast'); 
    $('.response', this).html("<div class='load'>Processing, please wait...</div>"); 
    $.ajax({ 
     type: 'POST', 
     url: action, 
     data: dt, 
     dataType: 'json', 
     success: function(data) { 
     if (data) procJSON.init(data, form); 

     }, 
     complete: function(data) { 

     }, 
     error: function(data) { 
     onError(data); 
     } 
    }); 
    } 
    return false; 
}); 

Answer 1

我最近使用了noty插件，以及jQuery的推迟来解决类似的问题。

首先，显示确认对话框并返回类似promise的对象的函数，如果按下Ok按钮则返回true;如果按下Cancel按钮，则返回false。

function showConfirm(msg) { 
    var dfd = $.Deferred(); 
    noty({ 
     text: msg, 
     type: 'confirm', 
     dismissQueue: false, 
     layout: 'center', 
     theme: 'defaultTheme', 
     modal: true, 
     buttons: 
     [{ 
      addClass: 'btn btn-primary', 
      text: 'Ok', 
      onClick: $noty => { 
       $noty.close(); 
       dfd.resolve(true); 
      } 
     }, 
     { 
      addClass: 'btn btn-danger', 
      text: 'Cancel', 
      onClick: $noty => { 
       $noty.close(); 
       dfd.resolve(false); 
      } 
     }] 
    });  
return dfd.promise(); 
} 

然后，你可以这样做......

$('.clientForm').submit(function(event) { 
    showConfirm("Do you wish to save?").then(function(confirmed) { 
     if (!confirmed) { 
      return; 
     } 
     // make ajax request here 
    } 
}