VPF::DialogBox не ждет ответа пользователя.

t77

Дата 28.8.2011, 15:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

Доброе время суток.
При попытке удаления элемента из системы, показываю пользователю окно с вопросом если он уверен, что хочет продолжить процесс удаления...
В окне отображаются 3-и кнопки:
"Нет"
"ОК"
"Отменить"
Код ожидает получить ответ пользователя и в зависимости от выбора, проделать определенные действия.
Тоесть если пользователь выбирает:
"Нет" - возвращаю 0
"ОК" - возвращаю 1
"Отменить" - возвращаю 2
Пользуюсь библиотекой jQuery, для отображения окна:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Testing jQuery Dialog Box</title>

    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.css" />     
    <script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-ui-1.8.7.min.js"></script>    
    <script type="text/javascript">
    function deleteItem()
    {           
        var del_y_n = showDeleteDialog();
        
        //Почему код не остановился и не подождал выбора пользователя ?
        //...
        if(del_y_n == "0")
        {
            //...
        }
        else if(del_y_n == "2")
        {
            //...
        }
        else
        {
            //...
        }
        
        alert('End process');
    }
    
    function showDeleteDialog()
    {
        var messageToShow = '';
        var sysDirection = 'ltr';
        var winTitle = 'Delete Item';
        var winTitle = 'Delete Item...';
        var closeCaption = 'Close';
        var okCaption = 'Ok';
        var cancelCaption = 'Cancel';
        var deleteDialogWindow = '<div id="deleteDialog" dir="'+ sysDirection +'">';
    
        if(top.$('#deleteDialog').length == 0)
        {
            messageToShow = 'Are you sure that you want to delete the item?';
            deleteDialogWindow += messageToShow;
            deleteDialogWindow += '</div>';
            top.$('body',window.parent.document).append(deleteDialogWindow);
         
            top.$('#deleteDialog').dialog({
             autoOpen: false,
             title: winTitle,
             height: 300,
             width: 350,
             modal: true, 
             resizable: false,
             draggable: false,
             close:  function(){top.$('#deleteDialog').remove();},
             buttons: [{
                 text: closeCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     return "0"; 
                    }
             },
             {
                 text: okCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     return "1"; 
                    }
             },
             {
                 text: cancelCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     return "2"; 
                    }
             }]        
         });
        }
     
        top.$('#deleteDialog').dialog('open');    
    }
    
    $(document).ready(function(){              
    });        
    </script>    
</head>
<body id="myBody">
    <input type="button" value="Delete Item" onclick="deleteItem();" />
</body>
</html>

Дело в том, что код не останавливается и не ожидает выбор пользователя... а продолжает бежать и соответственно должный функционал не выполняется! smile

Что нужно сделать для того, чтобы код остановился и ждал выбора пользователя..??
Что я делаю не так ?

нуп

Дата 28.8.2011, 15:18 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Либо использовать confirm(код будет ждать пока юзер не нажмет кнопку), либо что-бы по нажатию на ваши кнопки(ок, нет, отмена), вызывалась функция, которая и будет получать 0-1-2

t77

Дата 28.8.2011, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп..., Если выбирать второй вариант... Только вот создание вызывание функций для каждой из кнопок бессмысленно так как мне необходимо вернуть число(0 или 1 или 2), при нажатии на одну из кнопок. Почему это так важно, создание функций для клика каждой кнопки..?? Разве не достаточно того, что я прописал для каждой кнопки? Объясните пожалуйста чем проблема..? Что мне сделать чтобы моя функция возвращала число ?

нуп

Дата 28.8.2011, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Код


    function deleteItem(del_y_n)
    {           
        if(del_y_n == "0")
        {
            //...
        }
        else if(del_y_n == "2")
        {
            //...
        }
        else
        {
            //...
        }
        
        alert('End process');
    }
    
    function showDeleteDialog()
    {
        var messageToShow = '';
        var sysDirection = 'ltr';
        var winTitle = 'Delete Item';
        var winTitle = 'Delete Item...';
        var closeCaption = 'Close';
        var okCaption = 'Ok';
        var cancelCaption = 'Cancel';
        var deleteDialogWindow = '<div id="deleteDialog" dir="'+ sysDirection +'">';
    
        if(top.$('#deleteDialog').length == 0)
        {
            messageToShow = 'Are you sure that you want to delete the item?';
            deleteDialogWindow += messageToShow;
            deleteDialogWindow += '</div>';
            top.$('body',window.parent.document).append(deleteDialogWindow);
         
            top.$('#deleteDialog').dialog({
             autoOpen: false,
             title: winTitle,
             height: 300,
             width: 350,
             modal: true, 
             resizable: false,
             draggable: false,
             close:  function(){top.$('#deleteDialog').remove();},
             buttons: [{
                 text: closeCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     deleteItem(0);
                    }
             },
             {
                 text: okCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     deleteItem(1); 
                    }
             },
             {
                 text: cancelCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     deleteItem(2);
                    }
             }]        
         });
        }
     
        top.$('#deleteDialog').dialog('open');    
    }

Код


<input type="button" value="Delete Item" onclick="showDeleteDialog();" />

Я знаю только такой вариант, либо confirm

Это сообщение отредактировал(а) нуп - 28.8.2011, 15:48

t77

Дата 28.8.2011, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

При выборе пользователя, устанавливаю с помощью функции, значения глобальной переменной...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Testing jQuery Dialog Box</title>

    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.css" />     
    <script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-ui-1.8.7.min.js"></script>    
    <script type="text/javascript">
    var del_y_n;
    
    function getUserChoice(userChoise)
    {
        del_y_n = userChoise;
    }
    
    function deleteItem()
    {   
        
        //данная функция задает значение глобальной переменной del_y_n      
        showDeleteDialog();
        
        //Почему код не остановился и не подождал выбора пользователя ?       
        //почему del_y_n равно undefined
        if(del_y_n == "0")
        {
            //...
        }
        else if(del_y_n == "2")
        {
            //...
        }
        else
        {
            //...
        }
        
        alert('End process'); 
    }
    
    function showDeleteDialog()
    {
        var messageToShow = '';
        var sysDirection = 'ltr';
        var winTitle = 'Delete Item';
        var winTitle = 'Delete Item...';
        var closeCaption = 'Close';
        var okCaption = 'Ok';
        var cancelCaption = 'Cancel';
        var deleteDialogWindow = '<div id="deleteDialog" dir="'+ sysDirection +'">';
    
        if(top.$('#deleteDialog').length == 0)
        {
            messageToShow = 'Are you sure that you want to delete the item?';
            deleteDialogWindow += messageToShow;
            deleteDialogWindow += '</div>';
            top.$('body',window.parent.document).append(deleteDialogWindow);
         
            top.$('#deleteDialog').dialog({
             autoOpen: false,
             title: winTitle,
             height: 300,
             width: 350,
             modal: true, 
             resizable: false,
             draggable: false,
             close:  function(){top.$('#deleteDialog').remove();},
             buttons: [{
                 text: closeCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     getUserChoice("0");
                    }
             },
             {
                 text: okCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     getUserChoice("1");
                    }
             },
             {
                 text: cancelCaption,             
                 click: function() { 
                     top.$(this).dialog("close"); 
                     getUserChoice("2");
                    }
             }]        
         });
        }
     
        top.$('#deleteDialog').dialog('open');    
    }
    
    $(document).ready(function(){              
    });        
    </script>    
</head>
<body id="myBody">
    <input type="button" value="Delete Item" onclick="deleteItem();" />
</body>
</html>

неа, не работает... Не понимаю, почему? smile

Неужели нет другой возможности..??
Если нет, то как можно использовать confirm для моего случая ?

нуп

Дата 28.8.2011, 16:48 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Только confirm блокирует js код, пока не нажать на кнопку ok-cancel код дальше не выполняется. Ваш код открывает диалог, и сразу идёт дальше. Для того чтобы вернуть результат из вашего диалога, надо повесить на кнопки функцию(я вам привел пример выше).
Пример для confirm

Код


function deleteItem()
    {   
        var del_y_n = 0;
        if(confirm('бла бла бла') )
             del_y_n = 1; //нажата ок

        if(del_y_n == "0")
        {
            //...
        }
        else if(del_y_n == "1")
        {
            //...
        }
        
        alert('End process'); 
    }

Это сообщение отредактировал(а) нуп - 28.8.2011, 16:49

t77

Дата 28.8.2011, 16:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

нуп, на счет блокировки JavaScript кода понял, спасибо. Получается, другого варианта нет...

А вот confirm, хочется красивый, который подстраивается под выбранный стиль jQuery.
http://tutorialzine.com/2010/12/better-con...ox-jquery-css3/
Как вы думаете юзать плагин jQuery..??

Добавлено через 44 секунды
Вы знаете, что то лучше..?

нуп

Дата 28.8.2011, 17:09 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Просто пропишите функцию на удаление, ничего трудного здесь нету

t77

Дата 28.8.2011, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »