Question

I have a jqGrid loaded by AJAX inside a jQuery UI Dialog. Everything is working fine, except the Dialog which is not closing. When I click in both buttons, it reaches the alerts, but the Dialog is not being closed.

buttons: {
    'Confirm': function() {
        alert('OK Confirm');
        $('#test-grid').dialog('close');
    },
    'Cancelar': function() {
        alert('OK Cancel');
        $(this).dialog('close');
    }
}

I’ve tried with $('#test-grid').dialog('close') and $(this).dialog('close'), but no one works. If I remove the jqGrid loaded by AJAX, everything works fine.
The error console on Firefox and Chrome is empty.

I’m loading the jqGrid page with:

$('#test-grid').load('/grid').dialog('open');

Can anyone help me?

UPDATE

I’ve tried to load a simple HTML snippet using AJAX and the problem persists.

Answer 1

The problem is that the call to load is interfering with the call to open the dialog. You can fix this by loading the AJAX content into a child element of test-grid. For example:

 $('#test-grid-child').load('/grid');
 $('#test-grid').dialog('open');

---

Update

I just read the docs for load and gave this a bit more thought. What is happening is that when the code $('#test-grid').load('/grid').dialog('open'); is executed, an AJAX request is started and the dialog is created immediately. But once the load‘s AJAX request finishes, jQuery comes back and overwrites the contents of #test-grid. This explains why the dialog could not be closed, because the underlying markup is modified out from underneath the dialog object.

Retrieving data to a child element eliminates this problem since load and dialog each now manipulates a different section of the DOM.

Note that if the AJAX request takes a long time to complete, you might want to consider implementing a complete function to give feedback to the user – maybe by displaying a spinner until the data is ready. For example:

$('#test-grid-child').load('ajax/test.html', function() {
  alert('Load was performed.'); // Perform any necessary UI action here
});

Anyway, more information than you probably needed, but I just wanted to update this question while it was still fresh in my mind…