Подтверждение на событие
Часто при клике, как правило на удаление, чтобы предотвратить случайное, требуется создать предварительное подтверждение. Раньше я писала так:
<a href="/todel" onclick="return confirm('Действительно удалить?')">delete</a>
Но со временем, появилось много кнопочек, требующих подтверждения. Удалить, восстановить, удалить без восстановления, переместить и т.п.При этом простой вопрос confirm провоцирует кликнуть "ok", не задумываясь. И поэтому было решено использовать prompt. Но городить onclick везде не удобно. Удобно написать в html такое
<a class="ajax" confirm="delete" insert="idto" href="/del>удалить</a>
insert="idto" - ид блока куда нужно вставить результат клика, если пройдено подтверждение
Я использую jQuery, поэтому по загрузке страницы инициалзирую событие на <a class="ajax"..>
$(document).ready(function() {
initOnAjaxClick();
});
function initOnAjaxClick(area)
{
if(!area)
area=$('body');
area.find('.ajax').click(function(){
// по клику отпраить ajax и вставить html
initAjaxInsert(this,$('#'+$(this).attr('insert')));
return false;
});
}
function initAjaxInsert(a,result)
{
if(!result)
{
alert('No result in block.');
}
//проверка нужно ли выводить подтверждение , если нудно, вывести
if($(a).attr('confirm') && !iniConfirmOn($(a).attr('confirm')))
{
return false;
}
$.ajax({
url: a.href,
beforeSend: function(){
result.html('обрабатывается...');
result.show();
},
success: function(data) {
result.html(data);
initOnAjaxClick(result);
}
});
return false;
}
/**
* подтверждение на что-нибудь
* word - событие, ask вопрос
*/
function iniConfirmOn(word,ask)
{
if(!word || word=='undefined')
word = 'delete';
if(!ask || ask=='undefined')
{
switch(word)
{
case 'die':
ask = 'Удаление будет безвозвратное! ' +
'Введите слово «'+word+'» для подтверждения.';
break;
case 'undelete'://восстановить
case 'delete':
default:
ask = 'Введите слово «'+word+'» для подтверждения.';
}
}
var str = prompt(ask,'');
if(str==null || str != word)
return false;
else
return true;
}
<a href="/todel" onclick="return confirm('Действительно удалить?')">delete</a>
Но со временем, появилось много кнопочек, требующих подтверждения. Удалить, восстановить, удалить без восстановления, переместить и т.п.При этом простой вопрос confirm провоцирует кликнуть "ok", не задумываясь. И поэтому было решено использовать prompt. Но городить onclick везде не удобно. Удобно написать в html такое
<a class="ajax" confirm="delete" insert="idto" href="/del>удалить</a>
insert="idto" - ид блока куда нужно вставить результат клика, если пройдено подтверждение
Я использую jQuery, поэтому по загрузке страницы инициалзирую событие на <a class="ajax"..>
$(document).ready(function() {
initOnAjaxClick();
});
function initOnAjaxClick(area)
{
if(!area)
area=$('body');
area.find('.ajax').click(function(){
// по клику отпраить ajax и вставить html
initAjaxInsert(this,$('#'+$(this).attr('insert')));
return false;
});
}
function initAjaxInsert(a,result)
{
if(!result)
{
alert('No result in block.');
}
//проверка нужно ли выводить подтверждение , если нудно, вывести
if($(a).attr('confirm') && !iniConfirmOn($(a).attr('confirm')))
{
return false;
}
$.ajax({
url: a.href,
beforeSend: function(){
result.html('обрабатывается...');
result.show();
},
success: function(data) {
result.html(data);
initOnAjaxClick(result);
}
});
return false;
}
/**
* подтверждение на что-нибудь
* word - событие, ask вопрос
*/
function iniConfirmOn(word,ask)
{
if(!word || word=='undefined')
word = 'delete';
if(!ask || ask=='undefined')
{
switch(word)
{
case 'die':
ask = 'Удаление будет безвозвратное! ' +
'Введите слово «'+word+'» для подтверждения.';
break;
case 'undelete'://восстановить
case 'delete':
default:
ask = 'Введите слово «'+word+'» для подтверждения.';
}
}
var str = prompt(ask,'');
if(str==null || str != word)
return false;
else
return true;
}
Комментарии
Отправить комментарий