Возвращаемое значение из диалогового окна подтверждения с помощью диалогового окна JQuery UI

Я использую диалог jQuery UI, чтобы отобразить диалог подтверждения при нажатии кнопки. Я хочу вернуть true, когда нажата кнопка "ОК" и false в противном случае.

Связывание диалога с открытым вызовом в onClick (как указано здесь, $dialog.dialog('open');) событие не служит цели. Итак, в качестве обходного пути я последовал подходу, похожим на это: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. Существуют два различия между этим подходом и моим:

  • В примере используется якорный тег и
  • Он не использует диалоговое окно пользовательского интерфейса jQuery.

Я изменил код, указанный в ссылке примера, но он не работает. Интересно, что я делаю неправильно. Есть ли более дешевый способ сделать это?

Вот код, все CSS/JS ссылаются на jQuery CDN, поэтому вы можете скопировать код, чтобы увидеть поведение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <link type="text/css" href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css'; return false;" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Control Panel</title>
  </head>

  <body>
    <form action="http://google.com">
      <button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span>
      </button>
    </form>
    <div title="Why so serious?" id="id3" style="display:none;">
      <p>You are about to start a war.
        <p>Click OK to confirm. Click Cancel to cancel this action.</p>
    </div>
  </body>
  <script type="text/javascript">
    $('#id2').click(function (event) {

      if ($(this).data('propagationStopped')) {
        //alert('true');
        $(this).data('propagationStopped', false);
        return true;
      } else {

        event.stopImmediatePropagation();

        $('#id3').dialog({
          //autoOpen: false,
          width: 600,
          buttons: {
            "Ok": function () {
              $(this).dialog("close");
              $('#id2').data('propagationStopped', true);
              $('#id2').triggerHandler(event);
            },
            "Cancel": function () {
              $(this).dialog("close");
              return false;
            }
          }
        });
        //alert('false');
        return false;
      }
    });
  </script>

</html>

Уточнение: обратите внимание, что это очень просто (см. решение от bryan.taylor), чтобы отправить форму. То, что я хочу сделать, это имитировать подачу нажатием кнопки. Скорее, как JavaScript подтвердить() метод.

Ответы

Ответ 1

JavaScript является асинхронным. Вызов

$myDialog.dialog('open');

не будет блокироваться, а скорее вернется сразу.

Вместо этого нужно использовать обратные вызовы событий, которые вы предоставляете в диалоговом окне buttons .

Этот почти дубликат дает хороший пример:

диалоговое окно jquery ui должно возвращать значение, когда пользователь нажимает кнопку, но не работает

Ответ 2

Ваш код немного запутан, я думаю, что есть намного более простой способ сделать это. Вы должны сначала создать диалоговое окно, а затем открыть его в событии клика для своей кнопки. Код будет выглядеть примерно так:

<script>
$(document).ready(function () {
  var $myDialog = $('<div></div>')
    .html('You are about to start a war.<br/>Click OK to confirm.  Click Cancel to stop this action.')
    .dialog({
    autoOpen: false,
    title: 'Why so serious?',
    buttons: {
      "OK": function () {
        $(this).dialog("close");
        window.open('http://google.com/');
        return true;
      },
      "Cancel": function () {
        $(this).dialog("close");
        return false;
      }
    }
  });

  $('#myOpener').click(function () {
    return $myDialog.dialog('open'); //replace the div id with the id of the button/form
  });
});
</script>

<div id="myOpener"></div>

Вот описание API-интерфейса jQuery UI Dialog, поэтому вы можете увидеть все свои варианты:

http://api.jqueryui.com/dialog/