jquery: вызвать dialog, а потом перейти на новую страницу
На странице есть ссылка
При клике на ссылку должен выводиться подтверждающий попап (красивый, поэтому не стандартный js, а jquery).
Тычем на "Ок" - переходим по ссылке
Тычем не "Cancel" - просто закрываем диалог.
У меня не получается осуществить логику, когда нажимаем "Ок". Переход происходит, но только после второго нажатия на линк. Никак не могу понять, что я упускаю.
Заранее благодарен за ответ.
Код:
<a href="somepage.html" id="confirm">Link</a>
Тычем на "Ок" - переходим по ссылке
Тычем не "Cancel" - просто закрываем диалог.
У меня не получается осуществить логику, когда нажимаем "Ок". Переход происходит, но только после второго нажатия на линк. Никак не могу понять, что я упускаю.
Заранее благодарен за ответ.
Код:
$(document).ready(function () {
var $dialog = $('<div></div>')
.html('Are you sure you want to deactivate this company?')
.dialog(
{
autoOpen: false,
title: 'About to deactivate a company'
});
$dialog.dialog({ draggable: false });
$dialog.dialog({ resizable: false });
$dialog.dialog({ modal: true });
var choice = false;
$dialog.dialog({ buttons: { "Ok": function () { choice = true; $(this).dialog('close'); },
"Cancel": function () { choice = false; $(this).dialog('close'); }
}
});
$('a#confirm').click(function () {
if (choice == false) {
$dialog.fadeIn();
$dialog.dialog('open');
}
return choice;
});
});
var $dialog = $('<div></div>')
.html('Are you sure you want to deactivate this company?')
.dialog(
{
autoOpen: false,
title: 'About to deactivate a company'
});
$dialog.dialog({ draggable: false });
$dialog.dialog({ resizable: false });
$dialog.dialog({ modal: true });
var choice = false;
$dialog.dialog({ buttons: { "Ok": function () { choice = true; $(this).dialog('close'); },
"Cancel": function () { choice = false; $(this).dialog('close'); }
}
});
$('a#confirm').click(function () {
if (choice == false) {
$dialog.fadeIn();
$dialog.dialog('open');
}
return choice;
});
});
Код:
function link_click(url)
{
div = document.createElement('div');
div.innerText="<message>";
$(div).dialog({
buttons:{
"OK": function(){
window.location.href=url;
$(div).dialog("close");
div.parentNode.removeChild(div);
}
"Cancel": function(){
$(div).dialog("close");
div.parentNode.removeChild(div);
}
}});
}
{
div = document.createElement('div');
div.innerText="<message>";
$(div).dialog({
buttons:{
"OK": function(){
window.location.href=url;
$(div).dialog("close");
div.parentNode.removeChild(div);
}
"Cancel": function(){
$(div).dialog("close");
div.parentNode.removeChild(div);
}
}});
}
alex4321, твой код работает на вид так: выводится попап, затем, не дожидаясь селекта, происходит переход. По-видимому, надо чтобы функция вернула тру или фолс. В общем я подправил код. Теперь работает.
Подправил ссылку:
Подправил обработчик:
Подправил ссылку:
Код:
<a href="" id="confirm" onclick="clickHandle('somepage.html')">Link</a>
Код:
function link_click(url)
{
div = document.createElement('div');
div.innerText = "<message>";
var choice = false;
$(div).dialog({
modal: true,
resizable: false,
draggable: false,
buttons: {
"OK": function () {
choice = true;
window.location.href = url;
$(div).dialog("close");
div.parentNode.removeChild(div);
},
"Cancel": function () {
$(div).dialog("close");
div.parentNode.removeChild(div);
}
}
});
return choice;
}
function clickHandle(address) {
$(this).click(link_click(address));
}
{
div = document.createElement('div');
div.innerText = "<message>";
var choice = false;
$(div).dialog({
modal: true,
resizable: false,
draggable: false,
buttons: {
"OK": function () {
choice = true;
window.location.href = url;
$(div).dialog("close");
div.parentNode.removeChild(div);
},
"Cancel": function () {
$(div).dialog("close");
div.parentNode.removeChild(div);
}
}
});
return choice;
}
function clickHandle(address) {
$(this).click(link_click(address));
}