title: Ajax call after jQuery UI Confirmation Dialog
body: <p>I am working on a module for users to verify their mobile numbers using the 3 usual steps:</p>
  
  <p>Enter mobile number -> Receive pin -> Enter pin for verification</p>
  
  <p>My form contains:</p>
  
  <ul>
  <li>2 Textboxes:
  
  <ul>
  <li>Mobile Number (Visible on page load)</li>
  <li>Pin (Replaces "Mobile #" after AJAX response)</li>
  </ul></li>
  <li>1 "Next" Button</li>
  </ul>
  
  <p>My code looks something like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="" method="post" enctype="multipart/form-data" id="form-product"&gt;
    &lt;div id="dob_form"&gt;
      &lt;label for="input-phone-number"&gt;Mobile Number&lt;/label&gt;
      &lt;input type="text" name="phone_number" value="" id="input-phone-number" /&gt;
    &lt;/div&gt;
    &lt;input type="button" value="Next" id="button-next" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <p><em>(the actual code contains additional condition checking that don't serve a purpose here so I stripped it down for clarity)</em></p>
  
  <pre><code>$('#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 &amp;&amp; json['valid-number']) { //api returns that it's the phone number step and the number is valid
  
              $('#dob_form').html('' +
              '&lt;label for="input-pin"&gt;Pin Code&lt;/label&gt;' +
              '&lt;input type="text" name="pin_code" value="" id="input-pin"  /&gt;');      
  
         } else if (json['pin-step'] == 1 &amp;&amp; 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 }
  
     }
  });
  
  });
  </code></pre>
  
  <p>This is all working fine.</p>
  
  <p>However, what I want to add is a modal <strong>confirmation dialog</strong> that appears <strong>only before sending the "PIN" AJAX call</strong>.</p>
  
  <p>In other words, clicking "NEXT" the first time sends the call directly, but in the second step, when the user enters the pin and clicks "NEXT", I want to display a confirmation dialog. 
  If he/she clicks "OK" the AJAX call would be sent; on "Cancel" it simply closes the dialog box and wouldn't send the call.</p>
  
  <p>I managed to do that using an <strong>if statement</strong> and a <strong>confirm() dialog</strong>; however, I want to add a customized dialog using <strong>jQuery UI</strong>.</p>
  
  <p>I couldn't figure out how to do that because I couldn't find a way to get a response from the jQuery UI dialog.</p>
  
  <p>Any ideas are appreciated.
  Thanks.</p>