jquery диалоговое сообщение, если верно - PullRequest
1 голос
/ 08 марта 2020

У меня есть следующий пример кода, и я пытаюсь сделать запрос на публикацию, только если пользователь нажимает кнопку Да. Если пользователь нажимает кнопку Нет, ничего не должно происходить. Спасибо за любую помощь и подсказки.

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
        rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <form action="" method="post">
        <button id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
    </form>

<script>
    function ConfirmDialog(message) {
        $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '?</h6></div>')
            .dialog({
                modal: true,
                title: 'Delete message to use',
                zIndex: 10000,
                autoOpen: true,
                width: 'auto',
                resizable: false,
                width: 400,
                buttons: {
                    Yes: function () {
                        // $(obj).removeAttr('onclick');                                
                        // $(obj).parents('.Parent').remove();

                        //$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
                        $(this).dialog("close");
                        return true;
                    },
                    No: function () {
                        //$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
                        $(this).dialog("close");
                        return false;
                    }
                },
                close: function (event, ui) {
                    $(this).remove();
                }
            });
    };
</script>     
</body>
</html>

1 Ответ

1 голос
/ 08 марта 2020

Проблема в том, что ваша кнопка по умолчанию имеет значение type="submit", вы можете изменить ее на type="button" и нормально выполнять свои функции:

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Delete message to use',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      width: 400,
      buttons: {
        Yes: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
          $(this).dialog("close");
          return true;
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
          $(this).dialog("close");
          return false;
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="" method="post">
  <button type="button" id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...