issues with ajax form inside jquery UI popup in IE8

I was experimenting with jQuery UI and MVC3 and I stumbled upon the following issue:

I have very basic page that uses AJAX

<%: Ajax.开发者_开发知识库ActionLink("Edit", "Edit", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "dialog", OnSuccess = "DisplayPopup" }, null)%>

<div id="dialog" title="Location">

</div>

This is the controller code:

    public ActionResult Edit(int id)
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult Edit()
    {
        return Content("Saved!");
    }

and partial view edit:

<b>whatever</b>

<% using (Ajax.BeginForm("Edit", "Home",
    new AjaxOptions()
    {
        UpdateTargetId = "editForm",
        HttpMethod = "POST"
    }))
{%>
<div id="editForm">
    <input type="submit" value="Save" />
</div>
    <% } %>

the code above works fine.

now I add the jquery UI popup code:

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog('open');
    }

    $('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });
</script>

after that in Firefox and Chrome it works fine, whereas in IE8 I see the following issue:

1. click edit - makes AJAX call to Edit(int id) action and shows the edit view inside a popup
2. click save - makes AJAX call to Edit() and shows the text "Saved!"
3. close the popup
4. click edit - AJAX call to Edit(int id) - again
5. click save - this time it makes FULL postback (only in IE)

any ideas?

Thanks!

---

Try this seeing it works the first time but not the second. Create the dialog new every time and destroy it when you are done.

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog({
        autoOpen: true,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }, close: function() {
                $(this).dialog("destroy");

            }
    });
    }


</script>

---

I had the same trouble: worked in FF, but not in IE8.

Try adding something to the partial view response.

I was having this same trouble in IE and ended up adding @ViewBag.Message to the partial view response, where ViewBag.Message = "Submitted " + DateTime.Now.ToLongTimeString(); was assigned in the controller on Post.

This suddenly and surprisingly caused the partial view to render in the correct target element instead of loading the view as a new page in IE8.