Question

I am having a problem with a form that is inside of a jquery dialog not posting in IE.

It works fine in chrome and FF, sending data to my MVC controller, but send null values from IE.

I did get it to work one way though by calling an alert to display the serialize result. That causes the form to serialize correctly and the send values to the server.

$("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 800,
                        position: [300, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).dialog('destroy').remove(); window.location.reload(true); },
                        modal: true,
                        buttons: {
                            "Save": function () {
                                var formdata = $("#timeForm").serialize();
                                $.post("/TimeTracker/AddTime",
                                    $("#timeForm").serialize());
                                alert(formdata);
                                $(this).dialog("close");
                                $(this).dialog("destroy");
                                window.location.reload(true);
                                return false;
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                                $(this).dialog("destroy");
                            }
                        }
                    })
                .load(this.href);

Once I remove the alert, the form no longer has serialized values.

Is this an error in my JQuery scripting? Or something else?

Answer 1

You have close event handler for dialog box which is reloading the page window.location.reload(true) whenever you close the dialog.

And on button Save you are doing so many things, posting the form, closing the dialog and again reloading the page.

If you really want to reload the page after posting the form then wait until post responds. You can write your code inside its success handler. Also reloading the page will anyways close the handler so you don’t have to call $(this).dialog("close") which will trigger the close event and again reload the page.

Try this.

          buttons: {
                        "Save": function () {
                            var formdata = $("#timeForm").serialize();
                            $.post("/TimeTracker/AddTime",
                                formdata, function(){
                                window.location.reload(true);
                            });
                            //alert(formdata);
                            //$(this).dialog("close");
                            //$(this).dialog("destroy");
                            //window.location.reload(true);
                            return false;
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                            $(this).dialog("destroy");
                        }
                    }