title: Catch Jquery UI dialog box event
body: <p>I am having an ajax call. In that ajax call I am passing a json to the server. This happens when the person clicks on the delete button. So, before deleting I am creating a Jquery UI dialog box. In that I am asking user whether he is sure to delete. </p>
  
  <p>Now, my problem is when the user clicks I am not able to catch the event. I am assigning  a variable ok to have value when yes or no is clicked in jquery dialog box. But the problem is where I am checking if (ok == 1 ) is called first before the user clicks on yes or no. So in any case if user clicks yes or no the ajax call won't happen.</p>
  
  <p>Both the function is in different scripts file.</p>
  
  <p>The function which does the ajax call is -</p>
  
  <pre><code>$("#delete")
      .click(
          function() {
              var sendData = {};
              deleteClicked = 1;
              var passedJSON = null;
              if (null != selectedRowData) {  // if the id in table is not null
                  if (null != selectedRowId) {
                      console.log("ID exists --&gt; " + newId);
                      if (rowclickable == 1 ) {          //checking whether row should be deleted or not
                          var testDate = $("#FromDate").val();
                          sendData["FromDateStr"] = testDate;
                          console.log(sendData);
                          passedJSON = JSON.stringify(sendData);
                          console.log(passedJSON);
                          ok = showModalBoxForDelete(ok);            // calling the modal box and storing the value
                          console.log(ok);
                          if (ok == 1) {
                              $
                                  .ajax({
                                      type: "POST",
                                      cache: false,
                                      url: deleteURL,
                                      data: passedJSON,
                                      dataType: "json",
                                      cache: false,
                                      async: "true",
                                      contentType: "application/json",
                                      success: function(
                                          data) {
                                          if (1 == data.responseCode) {
  
                                              $(
                                                      "#FromDate,delete")
                                                  .attr(
                                                      "disabled",
                                                      "disabled");
                                              $("#FromDate").datepicker("disable");
                                              table.ajax.reload(null, false); // To load the table
                                              showModalBoxForSuccessfulUpdate("The Goal is Deleted");
                                          } else {
                                              alert(data.responseMessage);
                                          }
                                      },
                                      error: function(data) {
                                          console.log("Server Failure");
                                      }
                                  });
                          }
                      }
                  }
              }
  </code></pre>
  
  <p>The function which calls the modal box is -</p>
  
  <pre><code>function showModalBoxForDelete(ok){
      $("#modelView").dialog({
          autoOpen : false,
          modal : true,
           draggable: false,
          buttons : [ {
              text : "Yes",
              icons : {
                  primary : "ui-icon-heart"
              },
              click : function() {
                  var ok = 1;
                  $(this).dialog("close");
                  return ok;
              }
          }, {
              text : "No",
              icons : {
                  primary : "ui-icon-heart"
              },
              click : function() {
                  $(this).dialog("close");
                  console.log("Retaining the page...");               
              }
          } ]
      });
      $("#modelView" ).dialog("open");
      $("#modelView").text("This will delete the goal. Do you still want to continue?");
      return ok;
  }
  </code></pre>
  
  <p>Here the line which checks <code>if (ok == 1)</code>  is causing a problem as it will get run before user clicks yes or no.</p>
  
  <p>I am not able to understand what to do now. Can anyone please help?</p>