Jquery dialog not opening second time

Question

Before dismissing this as a question that has already been answered, please have a look. I have implemented pretty much all the solutions provided in the other posts, with no luck. The modal opens perfectly the first time, but fails the second time.

Modal is called from here:

function myFx(id){
  $.ajax(
    {
      type: "POST",
      url: "/mypath",
      data: { ZoneId: id },
      dataType: "json",
      success: function (data) {
        $('#dialog-form').dialog('open');
      }
    },
    error: function (response) {
    }
  });
 }

The function is inside $(document).ready(). No errors on firebug. On a button click, I call myFx() and pass id: <button onclick="myFx(id)" />.

And was initialised like this:

var myModal =  $('#dialog-form').dialog(
  {
    autoOpen: false,
    modal: true,
    height: 290,
    width: 475,
    buttons: {
      'Save': function () {
        $.ajax({
          type: "POST",
          url: $("#edit-book").attr('action'),
          data: $("#edit-book").serialize()+'&eZoneId=' +$('#eZoneId').val(),
          dataType: "text/plain",
          success: function (response) {
            var closeDialog = $('#dialog-form').dialog('close');
            $("#grid").load('mypath/ #grid', function () {
            $('tbody > tr:first')
              .effect("highlight", {}, 2000);
        });
      },
      error: function (response) {
        alert(response);
        $('#dialog-form').dialog('close');
      }
    });
  },
  Cancel: function () {
    $('#dialog-form').dialog('close');
  }
});

Please help.

Answer 1

you need to put the below line before ajax call.

$('#dialog-form').dialog('open');