Вызывать метод обратного вызова функции Bootbox.js

Question

У меня есть небольшая проблема, ребята, я работаю на небольшом весеннем проекте, на мой контроллер у меня есть метод удаления, который я называю из моей страницы JSP

<a onclick="return confirm('Are you sure ?');" href="${deleteUser}" >delete</a> 

, и эта работа безупречно, как бы то ни было, используя уродливое диалоговое окно подтверждения по умолчанию, и я хотел немного подправить ситуацию. Поэтому я нашел bootbox.js и немного поиграл с ним.

И хотя я могу получить диалог, чтобы показать, что я не могу найти ни одного объяснения о том, как вызвать метод в функции обратного вызова моего bootbox.js.

Я добавил все зависимости и этот сценарий

<script> 
    $(document).on("click", ".alert", function(e) { 
     bootbox.confirm({ 
      message: "Are you sure you want to delete this Account?", 
      buttons: { 
       confirm: { 
        label: 'Yes', 
        className: 'btn-success' 
       }, 
       cancel: { 
        label: 'No', 
        className: 'btn-danger' 
       } 
      }, 
      callback: function (result) { 
       if(result==true){ 
       href="${deleteUser} 
       } 
      } 
     }); 
    }); 
</script> 

также я изменил мою ссылку:

<a class="alert" >delete</a> 

Вот и все, диалог показывает вверх, я выбираю вариант, но ничего не происходит, я знаю, им что-то не так, но каждый вариант, который я пытался, по-видимому, отвлекал меня от правильного ответа, может ли кто-нибудь отредактировать вторую часть моего кода, чтобы я мог понять, как это работает.

Спасибо всем заранее

Answer 1

Я нашел решение моей проблемы,

идет следующим образом:

<script> 
$(document).on("click", "#alert", function(e) { 
    var addressValue = $(this).attr("href"); 
    e.preventDefault(); 

    bootbox.confirm({ 
     message: "Are you sure you want to delete this Account?", 
     buttons: { 
      confirm: { 
       label: 'Yes', 
       className: 'btn-success' 
      }, 
      cancel: { 
       label: 'No', 
       className: 'btn-danger' 
      } 
     }, 
     callback: function (result) { 

       if(result==true){ 

         window.location = addressValue; 


       } 

     } 

    }); 
}); 

важно использовать вар addressValue = $ (это) .attr ("HREF"); для получения значения щелчка href используйте e.preventDefault(); для остановки действия по умолчанию, а позже в функции обратного вызова вызывается addressValue, если результат == true.

Я тестировал и работает хорошо. Cheers

Answer 2

Поскольку Bootbox не может блокировать поток исполнения, вы должны предотвратить соединение от выполнения это запрос. Есть два способа: добавить preventDefault или вернуть ложь от события щелчка:

$(document).on("click", ".alert", function(e) { 

    // do this... 
    e.preventDefault(); 

    bootbox.confirm({ 
     message: "Are you sure you want to delete this Account?", 
     buttons: { 
      confirm: { 
       label: 'Yes', 
       className: 'btn-success' 
      }, 
      cancel: { 
       label: 'No', 
       className: 'btn-danger' 
      } 
     }, 
     callback: function (result) { 
      if(result==true){ 
      href="${deleteUser}" 
      } 
     } 
    }); 

    // ... OR this (you don't need both) 
    return false; 
}); 

После того, как вы есть, что вы должны использовать вызов AJAX для выполнения действия ссылка обычно будет иметь:

$(document).on("click", ".alert", function(e) { 

    // do this... 
    e.preventDefault(); 

    bootbox.confirm({ 
     message: "Are you sure you want to delete this Account?", 
     buttons: { 
      confirm: { 
       label: 'Yes', 
       className: 'btn-success' 
      }, 
      cancel: { 
       label: 'No', 
       className: 'btn-danger' 
      } 
     }, 
     callback: function (result) { 
      if(result) { 
       var url = "${deleteUser}"; 

       $.post(url) 
        .done(function(response, status, jqxhr){ 
         // post successful - do something? 
        }) 
        .fail(function(jqxhr, status, error){ 
         // post failed 
        }); 
      } 
     } 
    }); 

    // ... OR this (you don't need both) 
    return false; 
}); 

Я предполагаю, что ${deleteUser} создает URL-адрес, который ваш сервер может разложить, чтобы получить данные, необходимые для удаления правильной записи; если нет, вы хотите добавить объект данных в функцию $.post.