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...

Also the modal dialog works perfectly when you wire it up to a link, it does not work in the example above. Actually if you wire it up to the OnComplete instead of OnSucces, the modal dialog will then come up but you still get the same error. — Casey

Casey Casey · Accepted Answer · 2010-07-07T03:40:02

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.

ajax.beginform onsucess updatetargetid hidden input

1 Answers