How to get the form or div by name which the AJAX.

Question

I have called Ajax.BeginForm inside a div element, so I want to get the div element which the form is in. i.e. I want an equivalent of

function function1(event){
var table = $(event.target).parents("table");
}

which can be used from the Ajax.beginform's onsuccess function. Can anyone help here?

Answer 1

MVC4 seems to have broken it. Horribly "this" is now the XHR. To workaround, use this nasty hack:

$(function() {

    var lastEvent = null;
    $("body").on("submit", "form[data-ajax=true]", function(e) {

        lastEvent = e;

    });
    window.TagXhrWithEventTarget = function(xhr) {

        xhr.capturedSubmitEvent = lastEvent;

    }

});

and in begin form:

@using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "ProcessResponse",
    OnBegin = "TagXhrWithEventTarget"
}

and then in ProcessResponse:

function ProcessResponse(data, status, xhr) {

    var e = xhr.capturedSubmitEvent;
    var control = e.target;
    . . .

Answer 2

It turned out that, within the onsuccess function, "this" refers to the form element. So I could easily use,

$(this).find("mydiv");

or

$(this).parent("table").find("mydiv");