web-dev-qa-db-ja.com

JQuery UIダイアログを使用して確認ダイアログから値を返す

jQuery UI dialog を使用して、ボタンがクリックされたときに確認ダイアログを表示しています。 OKをクリックするとtrueを返し、それ以外の場合はfalseを返します。

onClick（ here 、$dialog.dialog('open');）のイベントでダイアログのオープン呼び出しを関連付けることは、目的を果たしません。回避策として、これに似たアプローチに従いました： http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery 。このアプローチと私のアプローチには2つの違いがあります。

  1. この例ではアンカータグを使用し、
  2. JQuery UIダイアログは使用しません。

例のリンクに記載されているコードを変更しましたが、機能しません。何が間違っているのだろうか。これを行うより安価な方法はありますか？

コードは次のとおりです。すべての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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" 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の confirm（） メソッドに似ています。

javascriptjqueryhtmljquery-ui
19
Nishant

JavaScriptは非同期です。への呼び出し

$myDialog.dialog('open');

ブロックしませんが、すぐに戻ります。

代わりに、buttonsダイアログのオプション で提供するイベントコールバックを使用する必要があります。

このほぼ複製は良い例を提供します：

ユーザーがボタンを押したが動作していない場合、jquery uiダイアログボックスは値を返す必要があります

49
Eric J.

あなたのコードは少し複雑です。これを行うにはもっと簡単な方法があると思います。最初にダイアログをインスタンス化し、次にボタンのクリックイベントでダイアログを開く必要があります。コードは次のようになります。

<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>

JQuery UIダイアログAPIのドキュメントは次のとおりです。すべてのオプションを確認できます。

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

8
bryan.taylor