Ajax.Beginform : Error: 'id' is null or not an object on form submit

Question

I have a popup where a user is asked to act on something (accept or decline). My goal is that in this case they can have more than one of these pending items, so after they act on one, it refreshes the popup data with the next pending item.

It works, except there is one error. Error: 'id' is null or not an object on form submit. The kicker is that if I click no to debug, everything works just fine. The flag is set in the back. I don't have any javascript variables called id (that I'm aware of).

When I run in debug, it will not stop on any break points. But, I checked the database when the js error is encountered (in MicrosoftAjax.js). With alerts in my javascript, I have pinpointed the error somewhere in submitting the form to get the next pending item.

I do not believe it is a server error because server errors are reported to e-mail and I have received none.

So, here is the code in question.

View:

<div id="pendingPaymentDialogBox" style="z-index:500; display:none; width:493px; height:auto; position:absolute; top:115px; left:0px;">

 <% Html.RenderPartial("PaymentOfferControl", Model); %>

</div>

        <% using (Ajax.BeginForm("AcceptPayment", "Payment",
                new AjaxOptions() { HttpMethod = "Post", OnComplete = "loadNext" }))
            { %>
            <%= Html.Hidden("acceptedPaymentId") %>
            <input type="submit" id="acceptFormButton" style="display:none;" />
        <% } %>

        <% using (Ajax.BeginForm("DeclinePayment", "Payment",  
                new AjaxOptions() { HttpMethod = "Post", OnComplete = "loadNext" }))
            { %>
            <%= Html.Hidden("declinedPaymentId") %>
            <input type="submit" id="declineFormButton" style="display:none;" />
        <% } %>

        <% using (Ajax.BeginForm("NextPendingPayment", "Payment",
               new AjaxOptions()
               {
                   HttpMethod = "Get",
                   UpdateTargetId = "pendingPaymentDialogBox",
                   OnSuccess = "completeLoading" }))
           { %>
            <input type="submit" id="nextPendingButton" style="display:none;" />
        <% } %>

        <script type="text/javascript">
            $().ready(function () {
                tgl('pendingPaymentDialogBox', 1);

                $('#popupWindowCloseLink').live('click', function () {
                    tgl('pendingPaymentDialogBox', 0);
                });

                $('#acceptLink').live('click', function () {
                    var pendingId = $('#pendingPaymentId').val();
                    $('#acceptedPaymentId').val(pendingId);
                    $('#acceptFormButton').click();
                });

                $('#declineLink').live('click', function () {
                    var pendingId = $('#pendingPaymentId').val();
                    $('#declinedPaymentId').val(pendingId);
                    $('#declineFormButton').click();
                });
            })

            function loadNext() {
                $('#nextPendingButton').click();
            }

            function completeLoading() {
                var pendingCount = Number($('#pendingCount').html());

                if (pendingCount == 1) {
                    $('#waitingnumber').css('display', 'none');
                    tgl('pendingPaymentDialogBox', 0);
                } else {
                    $('#pendingCount').html(pendingCount - 1);
                }

            }
        </script>

Controller:

[HttpPost]
        [Authorize]
        public ActionResult AcceptPayment(Guid acceptedPaymentId)
        {
            paymentService.AcceptPayment(acceptedPaymentId);
            return new EmptyResult();
        }

        [HttpPost]
        [Authorize]
        public ActionResult DeclinePayment(Guid declinedPaymentId)
        {
            paymentService.DeclinePayment(declinedPaymentId);
            return new EmptyResult();
        }

        [HttpGet]
        [Authorize]
        public ActionResult NextPendingPayment()
        {
            PaymentOfferModel model = new PaymentOfferModel();

            model.PendingCount = paymentService.GetPending().Count();
            model.Payment = paymentService.GetNextPending();

            return View("PaymentOfferControl", model);
        }

The payment offer control isn't anything special, but there is a hidden on that page that is loaded with the id of the pending payment. I use that to pull it up right before submitting the accept/decline forms with the right id.

The accept/decline is working. The error occurs inside loadNext and before completeLoading is fired. Any ideas?

EDIT:

I tried Firefox, and it behaves like it should, and in the error console there is an error pointing to this code in MSAjax.Javascript.Insertion.js

Sys.Mvc.MvcHelpers.AjaxLoadedContentScriptFix._globalEvalScriptInElementId = function GlobalEvalScriptInElementId(element) {
    if (jQuery) {
        // jQuery.globalEval($("#" + element.id).find("script").text());

        // It seems jQuery 1.4.1 & 1.4.2 has a problem in IE with .text() on script nodes… so do the loop ourselves…
        var scripts = $("#" + element.id).find("script");
        var allScriptText = "";
        for (var i = 0; i < scripts.length; i++) {
            allScriptText += scripts[i].text;
        }
        jQuery.globalEval(allScriptText);

    } else {
        alert("Error: jQuery must be loaded in order to use Sys.Mvc.MvcHelpers.AjaxLoadedContentScriptFix");
    }
}

The line that is highlighted is var scripts = $("#" + element.id).find("script"); saying that element is null.

There is another error that fires, which is "No element found" pointing to /Payment/AcceptPayment. I think that may be normal since that action returns an empty result.