Question

I have a jquery dialog box that is used to edit and update a certain record on a list.
When a certain record is clicked ‘..and the jquery dialog is open, I want the parent window ‘at the background’ to reload without closing the jquery dialog box so when I close the dialog box, the list will be updated. I tried to put window.location.reload(); before opening a new dialog box but it doesn’t seem to work. Instead, it refreshes the whole parent page and closes the dialog box..
Any ideas?..
Here’s part of my code..

$('.pricesave').live('click', function() {
var id = $(this).attr('rel');

$("#addprice_1").dialog('close');

 var qq = $("#mainForm2").serialize();

   $.ajax({  
        type: "POST",  
        url: "partprice2.php",  
        data: qq,  
        success: function(){  
    window.location.reload();
             $("#edit_number").data('num_id', id).dialog('close').dialog('open');
            return false;

        }  
    });  

});

Answer 1

Unfortunately, you are going to have to come up with something smarter than telling the page to reload because of the way jQuery UI dialogs work.

Unlike traditional popups, they are actually just an absolutely positioned <div> added to the page dynamically. So reloading the page will remove that markup and it will have to be re-added (i.e. the call to open the dialog will have to be made in Javascript).

So the easiest (but worst from a user experience) approach might be to serialise the current state of the dialog, save it to a cookie, reload the page and on page load, check for that cookie and if you find it, reopen the dialog and restore the previous state then delete the cookie. Obviously, this will create a ‘flash’ while the page reloads, and is not fast or efficient.

If it has to be seamless, you are going to need to come up with a way of updating the rest of the page without affecting the jQuery dialog’s markup.