How can I call a function whose name is an attribute value in a template?

Question

I have a form which has a lot of attributes.

One of them is a callback, which contains the of the callback function what I want to call.

<form  id="placeOrder" method="post" class="ajax" popupclass="order-created"  callback="orderCreated" action="url" >

and the JS part is:

    function popupHandler(sender){
    var popupclass  = $(sender).attr('popupclass');
    var callback    = $(sender).attr('callback');

    if ((typeof popupclass== "undefined") )
    {
        $("#pageContent").clickPopup('saved');
    }
    else
    {
        if ((typeof callback!= "undefined") )
        {
            //TODO: call the function , function name is in callback attr

        }
        $("#pageContent").clickPopup(popupclass);
    }
    } 

function orderCreated(){
    $('#basketquantity').html('0');
    $('#placeOrderButton').disableButton();
}

I have checked this page , but the name of the functions are predefined there , so that is not suitable for me.

hey, I've no other way to communicate to you. go undelete your recent answer. it's the only right answer so far. just check for these .. and . in the code, Not a big deal — Your Common Sense, Sep 21 '11 at 10:20

score 4 · Answer 1 · answered Jun 08 '11 at 13:34

4

Assuming the function is global it is within the window. So you can call it like this:

window[callBackAsString]();

answered Jun 08 '11 at 13:34

James Montagne

77,516
14
110
130

JAAulde · Accepted Answer · 2011-06-08T13:44:39.500

3

If the string in the attr represents the name of a globally scoped function, you can call it via window[callback]();

Although I wouldn't use custom attrs like you plan to, if I were to do what you propose it would look like:

var orderCreated = function()
    {
      $( '#basketquantity' ).html( '0' );
      $( '#placeOrderButton' ).disableButton();
    },
    popupHandler = function( sender )
    {
      var $sender = $( sender ),
          $pageContent = $( '#pageContent' ),
          popupclass = $sender.attr( 'popupclass' ),
          callback = $sender.attr( 'callback' );

      if( typeof popupclass === 'undefined' )
      {
        $pageContent.clickPopup( 'saved' );
      }
      else
      {
        if( typeof callback !== 'undefined' && typeof window[callback] === 'function' )
        {
          window[callback]();
        }

        $pageContent.clickPopup( popupclass );
      }
    };

edited Jun 08 '11 at 13:44

answered Jun 08 '11 at 13:34

JAAulde

19,250
5
52
63

the problem is that , what happen, if I call the different callback? Can I use this one? window[callback](); – tildy Jun 08 '11 at 13:37
Ok, I will check it. Can you tell me , why do you use a var before the function name? It seems like a Jquery plugin . – tildy Jun 08 '11 at 13:47
function statements, such as `function foo(){}` are modified by JavaScript's hoisting mechanism at run time such as to break them into a var declaration (`var foo;` -which is moved to the top of the scope), and an assignment of the function definition (`foo = function(){};`) which is moved to just below the var declarations. By avoiding function statements and explicitly declaring my vars and assigning functions into them, I avoid the pitfalls which hoisting can cause. – JAAulde Jun 08 '11 at 13:53
window.orderCreated=function(){ $('#basketquantity').html('0'); $('#placeOrderButton').disableButton(); } i need to define the orderCreated function like this , then it works with your code :) – tildy Jun 08 '11 at 16:33
Yes, this all depends on the callback function being scoped to the window. I have no way of knowing where your posted code is run to know what scope it would have ended up in. Glad you resolved it. – JAAulde Jun 08 '11 at 16:42
Otherwise eval(callback); makes a same thing I think. Thank you your help again, thank you. – tildy Jun 08 '11 at 17:15

How can I call a function whose name is an attribute value in a template?

2 Answers2