ajax.beginform onsucess updatetargetid hidden input

Question

I am trying to call a jquery ui dialog by attaching the function to the onsuccess property of the ajaxoptions on a ajax.beginform..

<script type="text/javascript">
    // Dialog
    $(document).ready(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script> 

In a seperate script file I have this..

function EmailResult() {
   $('#dialog').dialog('open');
}

Then I have a contact form that is not actually wired up yet, the controller just responds with one of two string responses.

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "ContactResult",  OnSuccess="EmailResult" }))
{ %>

If I take out the OnSuccess="EmailResult" from the Ajax.BeginForm or simply remove $('#dialog').dialog('open'); from my EmailResult function the error goes away so obvisouly this is an issue with the OnSuccess property and a Jquery UI Dialog.

My first question is am I doing something wrong that is causing this not to work and/or if this won't work then is there a better solution.

I am trying to create a dialog that comes up and says whether the message was sent. I do not want to use the alert dialog box.

I guess the error would help, in the IE 8 debugger it comes up with an undefined error in the MicrosoftAjax.js library

The finally block of this code is causing the problem and under the locals tab in IE 8 it says b is undefined.

    this._onReadyStateChange = function () {
    if (a._xmlHttpRequest.readyState === 4) {
        try {
            if (typeof a._xmlHttpRequest.status === "undefined") return
        } catch (b) {
            return
        }
        a._clearTimer();
        a._responseAvailable = true;
        try {
            a._webRequest.completed(Sys.EventArgs.Empty)
        } finally {
            if (a._xmlHttpRequest != null) {
                a._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
                a._xmlHttpRequest = null
            }
        }
    }
};

What it was updating was

<%= Html.Hidden("ContactResult") %>

Which turns out was the whole problem, I changed the Hidden Input to a div and it works perfectly. Not sure why but... if anyone else runs into this there you go...

Answer 1

So I guess this is what I figured out.. I started a new mvc project with two inputs and started just using an alert box as it turns out it was not related to the jquery.ui dialog plugin. I got it to work correctly with the alert box coming up after it was run using the ajax.beginform.

So long story short.. You can't use a Hidden Input for the UpdateTargetID in the Ajax.BeginForm? I guess this is kind of a question and the answer but changing the UpdateTargetID to the ID of a "div" fixed it and it works appropriately. You can even set the Div visibility to hidden and it works.