Javascript call back by function name in data attribute

Question

I am trying to provide a call back function for an ajax call, where the function name is saved under the "data-apply" attribute of a form.

jQuery(function($) {
    $('form[data-async]').on('submit', function(event) {
        var $form = $(this);
        var $target = $($form.attr('data-target'));
        var apply = $form.attr('data-apply');
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {
                var callBackFunc = new Function(apply);
                callBackFunc.call();
            }
        });

        event.preventDefault();
    });
});

function addBubble(){
    alert('a');
}

The form:

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble();"  action="/some/action/performed" method="POST">

I want to avoid using eval() in this case, since eval() might introduce security and performance issues. Not sure Function() is a safer method or there is a completely different way to handle this.

So is there anyway to pass in a function callback in order to handle difference situations?

The original code was borrowed from: https://gist.github.com/havvg/3226804

Marcos Casagrande · Accepted Answer · 2016-02-02 22:31:17Z

12

Since the function is globally defined, you can call it through the window object.

window["functionName"].call();

Remove the parentheses from addBubble

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble"  action="/some/action/performed" method="POST">

Javascript

jQuery(function($) {
    $('form[data-async]').on('submit', function(event) {
        var $form = $(this);
        var $target = $($form.attr('data-target'));
        var apply = $form.attr('data-apply');
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),

            success: function(data, status) {
                if(typeof window[apply] == "function")
                    window[apply].call(); //window[apply](); or window[apply].apply(); will work too
            }
        });

        event.preventDefault();
    });
});

function addBubble(){
    alert('a');
}

edited Feb 2, 2016 at 22:31

answered Sep 28, 2015 at 15:41

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gen_Eric Over a year ago

You can just do window[apply](). The .call() is used if you want to change the this value inside the function.

Marcos Casagrande Over a year ago

I know, I wanted to respect the way he was calling the callback function, that's all

arcyqwerty · Accepted Answer · 2015-09-28 15:42:09Z

5

If the function is defined globally (i.e. on the window object) you could use window[$form.attr('data-apply')]() to call the callback. Note that you would have to remove the () in data-apply

answered Sep 28, 2015 at 15:42

arcyqwerty

10.8k4 gold badges53 silver badges91 bronze badges

Collectives™ on Stack Overflow

Javascript call back by function name in data attribute

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related