javascript - jQuery UI 确认对话框后的 Ajax 调用

Question

我正在开发一个模块，供用户使用 3 个常用步骤验证他们的手机号码:

输入手机号码 -> 接收 PIN 码 -> 输入 PIN 码进行验证

我的表单包含:

• 2 个文本框:
  • 手机号码(页面加载时可见)
  • Pin(在 AJAX 响应后替换“手机号”)
• 1 个“下一步”按钮

我的代码看起来像这样:

HTML

<form action="" method="post" enctype="multipart/form-data" id="form-product">
  <div id="dob_form">
    <label for="input-phone-number">Mobile Number</label>
    <input type="text" name="phone_number" value="" id="input-phone-number" />
  </div>
  <input type="button" value="Next" id="button-next" />
</form>

JS

(实际代码包含额外的条件检查，但这些检查在这里不起作用，因此为了清楚起见，我将其删除)

$('#button-next').bind('click', function() {

$.ajax({
    url: (api url),
    type: 'post',
    data: $('#dob_form :input'),
    dataType: 'json',
    cache: false,

    success: function(json) {

        if (json['phone-step'] == 1 && json['valid-number']) { //api returns that it's the phone number step and the number is valid

            $('#dob_form').html('' +
            '<label for="input-pin">Pin Code</label>' +
            '<input type="text" name="pin_code" value="" id="input-pin"  />');      

       } else if (json['pin-step'] == 1 && json['valid-pin']) { //api returns that it's the pin validation step and the pin is valid

          window.location.href = json['redirect'];

       } else { //show error }

   }
});

});

一切正常。

但是，我想要添加的是一个模式确认对话框，它仅在发送“PIN”AJAX 调用之前出现。

换句话说，第一次单击“NEXT”会直接发送调用，但在第二步中，当用户输入 pin 并单击“NEXT”时，我想显示一个确认对话框。 如果他/她单击“确定”，则会发送 AJAX 调用；在“取消”时，它只是关闭对话框并且不会发送调用。

我设法使用if语句和confirm()对话框来做到这一点；但是，我想使用 jQuery UI 添加自定义对话框。

我不知道如何做到这一点，因为我找不到从 jQuery UI 对话框获取响应的方法。

任何想法都值得赞赏。 谢谢。

Answer 1

我设法制作了一个工作示例，并在此过程中学习了一些 jQuery UI!

我必须将事件处理程序和数据发送功能提取到单独的函数中以提高可读性。基本上，每次单击 #button-next 时，我都会检查 HTML 中是否存在 #input-pin，并使用它来确定电话号码是否已发送。如果没有，我会显示一个对话框。否则，我会发送数据，这可能是一个电话号码。

为了使下面的示例正常工作，我必须添加一个小复选框，让您假装在发送电话号码后收到了有效的响应。您可以删除 HTML 和 JS 中的这些行，而不会破坏其余功能。

$('#button-next').bind('click', function() {
    if ($('#input-pin').length) {
        $('#confirm-send-pin').dialog({
            height: "auto",
            width: 500,
            modal: true,
            buttons: {
                'Send PIN': function () {
                    sendData()
                    $(this).dialog('close')
                },
                'Cancel': function () {
                    $(this).dialog('close')
                }
            }
        })
    } else sendData()
})

function sendData() {
    console.log('Data sent!')
    $.ajax({
        url: 'http://api.example.com/api-path',
        type: 'post',
        data: $('#dob_form :input'),
        dataType: 'json',
        cache: false,
        success: onDataReceived
    })
}
      
      
function onDataReceived (json) {
    if (json['phone-step'] == 1 && json['valid-number']) {
        $('#dob_form').html('' +
            '<label for="input-pin">Pin Code</label>' +
            '<input type="text" name="pin_code" value="" id="input-pin" />')
    } else if (json['pin-step'] == 1 && json['valid-pin']) {
        window.location.href = json['redirect'];
    } else {
        // error handling
    }
}

// This is just to make the example work

$('#test-dialog').on('change', function () {
    onDataReceived({ 'phone-step': 1, 'valid-number': 1 })
    this.disabled = true
})

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<form action="" method="post" enctype="multipart/form-data" id="form-product">
  <div id="dob_form">
    <label for="input-phone-number">Mobile Number</label>
    <input type="text" name="phone_number" value="" id="input-phone-number" />
  </div>
  <input type="button" value="Next" id="button-next" />
</form>
<div id="confirm-send-pin" title="Send PIN?" style="display:none">
  <p>Are you sure you want to send this PIN?</p>
</div>


<!-- Makes the example work -->
<label for="test-dialog">Pretend you sent a phone number</label>
<input type="checkbox" id="test-dialog" />