MVC 4 Ajax form post action always posts with values posted with first atttempt

Question

I am trying to create simple CRUD application. I have a partial view that populates the rows. In each row there is Edit link on click of which I am opening a jquery dialog. In this dialog I load another partial view for editing that corresponding row. On ok button I post the form(which is an ajax form).

The controller then return another partial view that is suppose to be replace the original list (the list partial view) because I am providing updateTargetId (this is the div in which list is rendered.

Here I am facing two problems,

1. This works for the first time ( i.e. first time in the session) I post the form. When I open another record for edit, the form is loaded correctly but when I post it, the form always has the values of the record that are posted in the first attempt.
2. The list is not updating after even after post is successful. I can see the post response in fiddler. The list is refreshed only after I refresh the browser.

I have tried clearing modelState but doesn't work. I have tried debugging the jquery code and I found that when I do form.serialize has old values so the controller always get those values.

I think somewhere it is caching the form. Then I turned off caching by adding

$.ajaxSetup({ cache: 'false' });

in document.ready. That also doesn't work.

Here is the jQuery code

this.bindOpenDialog = function () {
    $(".openDialog").click(function (e) {
        e.preventDefault();
        var height = $(this).attr("data-dialog-height");
        var width = $(this).attr("data-dialog-width");
        var data_postUrl = $(this).attr("data-postUrl");
        var data_returnUrl = $(this).attr("data-returnUrl");
        var data_updateTarget = $(this).attr("data-updateTarget");
        var data_form_id = $(this).attr("data-form-id");
        var callBack = $(this).attr("callBack");
        if (data_postUrl == '') {
            data_postUrl = this.href;
        }
        var div = $("<div></div>");
        div.addClass("ui-dialog")
        div.attr("id", $(this).attr("data-dialog-id"))
        var dialog = div.dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            height: height,
            width: width,
            modal: true,
            buttons: {
                'Save': function () {
                    var dialog = $(this);
                    var form = null;
                    if (data_form_id == '' || data_form_id == undefined) {
                        form = dialog.find('form').first();
                    }
                    else {
                        form = $("#" + data_form_id).first();
                    }

                    var req = $.post(data_postUrl, form.serialize(),
                        function (responseText, textStatus) {
                        }, "html");
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            dialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            dialog.dialog('destroy');
                        }
                    });
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            thisDialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            thisDialog.dialog('destroy');
                        }
                        //remove the form from the DOM.
                        //If I do not do this, it always posts the
                        // form which was posted for the first time.
                        $("#" + data_form_id).remove();
                    });
                    req.error(function (e) {
                        alert('error ' + e.toString())
                    });
                },
                'Cancel': function () {
                    var dialog = $(this);
                    dialog.dialog('destroy');
                }
            }

        });
        dialog.load(this.href);
    }
);

has any body faced this issue already?

One more observation of mine is that jQuery isn't updating the target. I also set the OnSuccess event on Ajax form which does not fire.

---

One more observation of mine is that jQuery isn't updating the target. I also set the OnSuccess event on Ajax form which does not fire.

Answer 1

I am not sure if it is the best way of doing it, but when I remove form from the DOM after I destroy the dialog in javascript. I think the jquery is not kiling the form instance

Now my javascript looks like

req.success(
            function (data) {
                if (callBack == '' || callBack == undefined) {
                    thisDialog.dialog('destroy');
                }
                else {
                    var cb = eval(callBack + "()");
                    thisDialog.dialog('destroy');
                }
                //remove the form from the DOM.
                //If I do not do this, it always posts the form which was posted for the first time.
                $("#" + data_form_id).remove();
            }
        );

Can anybody advice if there is any better approach?

Regards, Mahesh