Question

Here is my View:

@using (Ajax.BeginForm("Accept", "FriendRequest", new { id = m.FriendRequest.Id }, new AjaxOptions { OnSuccess = "DoSomthing" })) {
    <input type="button" value="Accept" onclick="submitAjaxform(this);" />
}

Here is the signature of the DoSomething function:

function DoSomthing(a,b,c) {
    alert(a.Status);
}

Here is my javascript function which submits the request:

function submitAjaxform(btn) {
    var form = btn.form;
    var data = $(form).serialize();
    var action = $(form).attr('action');
    var onsuccess = $(form).attr('data-ajax-success');
    $.post(action, $(form).serialize(), function (data, status, xhr) {
         var x = onsuccess + ".apply([" + data + "]);";
         eval(x);
    });
}

Here is my action method:

public JsonResult Accept(long id) {
    return Json(new {status=true,message="some message"});
}

When I run the code. The posting works well, but the onsucess of the jQuery function gives the following error in the console:

missing ] after element list

I don’t understand how to fix it. Help will be appreciated.

Edit: Thanks to Rich, here is what worked finally

function submitAjaxform(btn) {
    var form = btn.form;
    var data = $(form).serialize();
    var action = $(form).attr('action');
    var onsuccess = $(form).attr('data-ajax-success');
    $.post(action, $(form).serialize(), function (data, status, xhr) {
         window[onsuccess](data);

    });
}

Found the answer from here Calling a JavaScript function named in a variable

Answer 1

Your data variable is different inside the scope of the success callback, since you are not using the one declared outside I assume your code should be:

function submitAjaxform(btn) {
  var form = btn.form;
  var data = $(form).serialize();
  var action = $(form).attr('action');
  var onsuccess = $(form).attr('data-ajax-success');
  $.post(action, $(form).serialize(), function () {
     var x = onsuccess + ".apply([" + data + "]);";
     eval(x);
  });
}

Alternatively, the data passed as the first parameter of the callback is already an object so you only need to eval your onsuccess, like so:

function submitAjaxform(btn) {
  var form = btn.form;
  var action = $(form).attr('action');
  var onsuccess = $(form).attr('data-ajax-success');
  $.post(action, $(form).serialize(), function (data) {
     eval(onsuccess).apply([data]);
  });
}

As an aside, I would recommend not using eval wherever possible, it is expensive and allows potentially untrusted javascript to run in a browser. If it is possible to refactor your code to not require it, then you should.