Search code examples
javascriptjqueryfunctionjquery-callback

run javascript function from string variable and pass parameters


I need to call a user defined javascript function from within my costom jquery plugin and pass parameters to it, for example:

function test(data)
    {
      var myfunc="function(data){alert(data);}"; //this is user defined function I   retrieved from html tag attribute
      var fn=new Function("("+myfunc+")();");
      fn.apply(this,arguments);
      return fn;
} 
test("hello");

The result is undefined, how can I pass data parameter from test function to user defined function? thanks in advance!

question update:

I'm writing a jquery plugin to handle ajax request, much like asp.net mvc unobtrusive ajax, I get the ajax callfack function from html tag attrbute, for example:

<div data-ajax-success="function(data,status,xhr){alert(data);}"....

the value of data-ajax-success attribute is user defined function, it can be following formats:

data-ajax-success="function(data,status,xhr){alert(data);}"
data-ajax-success="function(data){alert(data);}"
data-ajax-success="function(){alert('hello');}"
data-ajax-success="functionName"

I need to parse this attribute value as javascript function and pass jquery ajax callback parameters to this function, where data-ajax-success value is function name, I could call it correctly using following method defined in Micrsoft jquery-unobtrusive-ajax.js:

function getFunction(code, argNames) {
        var fn = window, parts = (code || "").split(".");
        while (fn && parts.length) {
            fn = fn[parts.shift()];
        }
        if (typeof (fn) === "function") {
            return fn;
        }
        argNames.push(code);
        return Function.constructor.apply(null, argNames);
    }

but when data-ajax-success is function body, I could not pass parameter to it, here's my sample code that handle ajax callback:

loadData: function (index, options) {
complete: function (xhr,status) {
            $(context.loading).hide(context.loadingDuration);
            getFunction(context.onComplete, ["xhr", "status"]).apply(this, arguments);
            },
        success:function (data, status, xhr) {
            $(context.updateTarget).html(data);
            getFunction(context.onSuccess, ["data", "status", "xhr"]).apply(this, arguments);
            },
            error: getFunction(context.onFailure, ["xhr", "status", "error"])
});

      $.ajax(options);
  }

anyone can help me? thank you very much!


Solution

  • I solved it by modifying this microsoft method:

      function getFunction(code, argNames) {
        var fn = window, parts = (code || "").split(".");
        while (fn && parts.length) { fn = fn[parts.shift()]; }
        if (typeof (fn) === "function") { return fn; } //onSuccess="functionName"
        if ($.trim(code).toLowerCase().indexOf("function")==0) { return new Function("return (" + code + ").apply(this,arguments);");} //onSuccess="function(data){alert(data);}"
        argNames.push(code);
        try {return Function.constructor.apply(null, argNames); //onSuccess="alert('hello');return false;"
        }catch(e){alert("Error:\r\n"+code + "\r\nis not a valid callback function");}
    }