Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Диалоговое окно: как ожидать закрытия? (https://javascript.ru/forum/dom-window/48152-dialogovoe-okno-kak-ozhidat-zakrytiya.html)

Veterinar 21.06.2014 18:25

Диалоговое окно: как ожидать закрытия?
 
При удалении записи в таблице для защиты от случайного нажатия, открывается диалоговое модальное окно.
Перед открытием окна выбранная строка выделяется другим цветом.
Теперь, после открытия окна, надо ожидать кода нажатой кнопки: "Ок" или "Cancel" и соответственно сбросить выделение строчки.

Только почему-то действие происходит сразу, не ожидая действия пользователя в модальном окне.

Как заставить ожидать завершения открытия диалогового окна?
Или передать в функцию закрытия окна дополнительные данные?
function deleteRecord(numrow, id, name){
$('#tr'+numrow).css('background-color','red');
$('#ondelete').dialog({ title: name });
$('#ondelete').dialog('open');
$('#tr'+numrow).css('background-color','#ffffff'); // выполняется сразу! а надо после закрытия мод.окна
}


Или как передать в функцию внешние значения?
$("#ondelete").dialog({
autoOpen: false,
resizable:false,
modal:true,
buttons:{
"Удалить выбранную запись?": function(id){ // в функцию передать ID???
 isdel=true;
 $(this).dialog( "close" );
},
Cancel: function(){
 isdel=false;
 $('#tr'+id).css('background-color','#FFFFFF'); // сюда бы передать id
 $(this).dialog( "close" );
}
}
});


Спасибо!

рони 21.06.2014 19:12

Veterinar,
<!DOCTYPE HTML>
<html>
<head>
    <title>dialog demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  	$(function ()
  	  {
  	    $('.open').click(function ()
  	      {
  	        var name = 'test', id = 100, numrow = 17;
  	        $('#ondelete').dialog("option", "title", name);
  	        $('#ondelete').dialog("option", "buttons",
  	          {
  	            "Удалить выбранную запись?": function(e) {
  	              alert(id)
  	              // в функцию передать ID???
  	              isdel = true;
  	              $(this).dialog("close");
  	            },
  	          "Cancel": function(e) {alert(id);
  	              isdel = false;
  	              // $('#tr'+id).css('background-color','#FFFFFF'); // сюда передать id
  	              $(this).dialog("close");
  	            }
  	          }
  	        );
            $('#ondelete').on( 'dialogclose', function(event, ui){
             alert(numrow)
            //$('#tr'+numrow).css('background-color','#ffffff'); // выполняется сразу! а надо после закрытия мод.окна

             });
  	        $('#ondelete').dialog('open');
  	      }
  	    );
  	    $("#ondelete").dialog(
  	      {
  	      autoOpen: false,
  	      resizable: false,
  	      modal: true
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>
<div id="ondelete" title="Basic dialog"  class="image">
</div>
<button id="opener" class="open" data-image='#dialog'>Open Dialog</button>
</body>
</html>

Veterinar 21.06.2014 19:15

мда... через жопу, в смысле, через глобальную переменную, передал.
Тока так чот не нравится... Как бы в функции на события диалогового окна передавать по-нормальному?

Veterinar 21.06.2014 19:17

рони, спасибо!
Так и сделал до вашего ответа )))

рони 21.06.2014 19:31

Veterinar,
вы код свой непокажите? а то что-то меня сомнения терзают ))) 14 строка в у меня в коде просто для примера

Veterinar 21.06.2014 21:49

рони, ой, спасибо! Не, всё работает! )))

Veterinar 21.06.2014 22:26

рони, подскажите, будьте добры, после добавления строки в таблицу, я хочу её при необходимости убрать.

Количество записей в таблице после добавления показывается тоже самое, что и было и, соответственно, по индексу удаление не срабатывает.
$('#editDataRefs').after('<tr><td>Ку-ку</td></tr>');
alert('Записей='+document.getElementById('editDataRefs').getElementsByTagName('tr').length);


Alert выводит то же количество строк, что и было до добавления новой.

Спасибо!

рони 21.06.2014 23:25

Veterinar,
то есть вы добавили строки после таблицы а ищите их в таблице?

рони 21.06.2014 23:28

Veterinar,
$('#editDataRefs tr:last').after('<tr><td>Ку-ку</td></tr>');

Veterinar 22.06.2014 00:58

рони, спасибо!

Да, ступил я :(


Часовой пояс GMT +3, время: 16:09.