Question

I have an MVC3 application doing AJAX edit of a grid line using JQUERY popup dialog and then immediately refreshing the grid using another Ajax call.
Please see below the JQuery part.I want to have a single function to popup edit entities like phone# and emails and wanted to standardize hence the dynamic Dialog.

Now the popup works and the update/create and grid refresh work correctly. However I have recurring issues with the Popup displaying older values and while investigating I found the lines

  success: function (r) {
                $("#" + listEditElement).html(r.data);
                alert("Grid done");
                $("#" + resultElement).dialog('close');
            },

to be causing the problem.If I remove $("#" + listEditElement).html(r.data); whic is populating the Grid using ajax return data the issue of displaying older values in Popup disappers. Another oddity is that the Popup is not closed by the ‘Close’ call. However if I move the ‘Close’ call to before the .html() line the dialog closes successfully.
Any clues what I could be doing wrong ?

function openPopup(elementId, popupFormName) {
    $("#" + elementId).dialog({
        autoOpen: false,
        title: 'Title',
        title: $("#" + elementId).attr('title'),
        width: 500,
        cache: 'false',
        height: 'auto',
        modal: true,
        buttons: {
            "Save": function () {
                $("#update-message").html('hhhhhhhhhhhhhhha'); //make sure there is nothing on the message before we continue                         
                $("#" + popupFormName).submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#" + elementId).dialog("open");
    return false;
}

function closePopup(resultElement, listEditElement, actionURL) {

    //   var itemId = element.attr("data-tododb-itemid");

    var d = null;

    //      $("#ajax-progress-dialog").dialog("open");

    $.ajax({
        type: "POST",
        url: actionURL,
        data: d,
        success: function (r) {
            $("#" + listEditElement).html(r.data);
            alert("Grid done");
            $("#" + resultElement).dialog('close');
        },
        complete: function () {
            $("#ajax-progress-dialog").dialog("close");
            $("#" + resultElement).dialog("destroy");
        },
        error: function (req, status, error) {
            //do what you need to do here if an error occurs

        }
    });

Answer 1

Sounds to me like the line

  $("#" + listEditElement).html(r.data);

Was failing (eg r.data was not valid html) and throwing an error thus

 $("#" + resultElement).dialog('close');

Was never getting called.

You could wrap it in a try/catch to see if that stops it from not running the close line.