How to get jquery dialog box to close after one click

Question

My dialog box only closes after two clicks and not one. I am not sure why it won't close on the first button click. Does the dialog box need to be hidden? I tried dialog.dialog.hide(); as well right after close, but that gives me no luck. This is what I have for my dialog.

var dialog = $('<p>Cannot post. </p>').dialog({
  height: 150,
  width: 300,
  buttons: {
    "Ok": function(event) {
      event.preventDefault();
      dialog.dialog('close');
      $(this).display = 'none';
    }
  }
});

Answer 1

Consider the following: https://jsfiddle.net/Twisty/eo4z5gaj/

JavaScript

$(function() {
  var dialog = $('<p>Cannot post. </p>').dialog({
    height: 150,
    width: 300,
    buttons: {
      "Ok": function(event) {
        $(this).dialog('close');
      }
    }
  });
});

It's better to refernce $(this) for .dialog() . Essentially they are the same.

If this code is still requiring two clicks of "Ok", then you should look at your browser or console. Code above works with single click in FireFox.

You may also consider: https://jsfiddle.net/Twisty/eo4z5gaj/8/

JavaScript

$(function() {
  var dialog = $('<div>', {
    title: "Error"
  }).html("<p>Cannot Post.</p>").dialog({
    height: 160,
    width: 300,
    buttons: {
      "Ok": function(event) {
        $(this).dialog('close');
      }
    }
  });
});

Hope that helps.