JQuery Ajax Timing

Question

I have a larger JQuery UI dialog. Inside this I have some larger PHP Scripts, which fills the dialog content. On ESCAPE I close the dialog. After every:

$('.editbtn').click(function() {
  $id        = $(this).attr('name');
  var $tabid = $id.split("|");
  var $url   = "ajax/edit.php?....";

  $("#dialog-confirm").load($url);
  $("#dialog-confirm").dialog("option", "width",  $tabid[4]);
  $("#dialog-confirm").dialog("option", "height", $tabid[5]);
  $("#dialog-confirm").dialog('open');

  $("#dialog-confirm").first().focus();
});

I set the focus.

Sometimes it works somtimes not. It depends obviously on the execution of the PHP scripts. I see the dialog with the old content (after close) and after a short gap of time the new selected content. As long as the new selected content is not shown, ESCAPE works. if the dialog is filled with new content, ESCAPE doesn't work. This means in fact, the dialog screen lost the focus.

How can I make shure, that the dialog is only shown, if the PHP script ends?

Thanks in advance.

Answer 1

You can simply do this with defining complete callback function.

$('.editbtn').click(function() {
  $id        = $(this).attr('name');
  var $tabid = $id.split("|");
  var $url   = "ajax/edit.php?....";

  $("#dialog-confirm").load($url, function() {
    $("#dialog-confirm").dialog("option", "width",  $tabid[4]);
    $("#dialog-confirm").dialog("option", "height", $tabid[5]);
    $("#dialog-confirm").dialog('open');

    $("#dialog-confirm").first().focus();
  });
});

And, I would suggest you to define a variable for the jQuery object for better performance.

var confirm = $("#dialog-confirm");

confirm.dialog("option", "width",  $tabid[4]);
confirm.dialog("option", "height", $tabid[5]);
confirm.dialog('open');

confirm.first().focus();