Используя Bootbox Confirm, где разместить preventDefault?
У меня есть базовая веб-страница, MVC с jQuery и Bootbox, когда пользователь нажимает на ссылку удаления, я хотел бы отобразить окно подтверждения, да или нет, а затем предотвратить по умолчанию или вернуть false в зависимости от ответа. Довольно простой материал, но я не могу зафиксировать значение результата из BootBox.
Фрагмент HTML
@Html.ActionLink("Delete", "Delete", new { id = item.UserDetailId },
new { @class = "delete_click", onclick = "return ConfirmDelete('" + item.Email + "');" })
Javascript
var confirm_result = false;
function ConfirmDelete(message) {
bootbox.confirm({
message: "<h3>Delete this account:</h3> <span class=bold> " + message + " </span>",
buttons: {
cancel: {
label: 'No'
},
confirm: {
label: 'Yes'
}
},
callback: function(result) {
console.info('This was logged in the callback: ' + result);
confirm_result = result;
}
});
// ?? how do I control the true/false return value here ??
return false;
};
Все работает, ошибок нет, диалог выводится, callback вызывается и т.д.; но для подтверждения_результата не устанавливается значение true, когда пользователь нажимает «ОК»?
Нужно ли мне разделить обратный вызов на отдельную функцию?
ОБНОВИТЬ: Обратный вызов асинхронный! Функция ConfirmDelete всегда завершается до выполнения обратного вызова! Это моя проблема, работаю над исправлением ....
Ответы 1
Я забыл, как это работает, функция OnClick вызывает диалоговое окно BootBox, которое отображается, и тогда немедленно закрывается. Я возвращаю false из функции ConfirmDelete, чтобы ссылка не работала. Чтобы отправить удаление, когда пользователь нажимает «ОК», мне нужно было перенаправить изнутри обратного вызова. «Лучший» код выглядит так.
function ConfirmDelete(name, id) {
bootbox.confirm({
message: "Delete this user: " + name + "?",
buttons: {
confirm: {
label: 'Yes'
},
cancel: {
label: 'No'
}
},
callback: function (result) {
if (result)
{
var url = "Delete/" + id;
console.info("redirect to url:" + url);
window.location.href = url;
}
else
{ console.info("cancel delete"); }
}
});
return false;
};
Обратите внимание на вызов window.location.href, который был ключом. Есть и другие проблемы с управлением такой веб-страницей, управлением кнопкой «Назад» и т. д.; но это работает, как и ожидалось.
AJAX — ваш друг, научитесь использовать AJAX!