Passing a Javascript function through inline data- attributes

Question

I'm working with a Javascript file upload library, and one of it's features is that it uses HTML5 inline data- attributes to pass information to the plugin.

This is working great for anything data related, strings, numbers etc., however the plugin has some callback methods you can assign function to. My problem is that when trying to pass a javascript function through these inline data attributes, like this:

<input type="file" name="test" data-on-finish="alert();">

The plugin picks up the reference to the onFinish() callback method fine, but when it tries to execute whatever javascript I put in there I get the error:

Uncaught TypeError: Object alert(); has no method 'call'

I'm assuming it's reading the alert(); as a string. Any idea how I can pass through executable javascript to the plugin?

I believe the plugin I'm using is an extension to the jQuery file upload plugin: https://github.com/blueimp/jQuery-File-Upload/wiki/Options

Update: I've also tried using globally defined functions, like this:

<script type="text/javascript">
    function myTesting(){
       alert('yay');
    }
</script>
<input type="file" name="test" data-on-finish="myTesting">

I've tried changing the data-on-finish attribute to myTesting, myTesting(), still had no luck...

I think the eval() will do the job but can be dangerous : stackoverflow.com/questions/86513/… — user1705628
– user1705628, Commented Sep 28, 2012 at 7:56

Joseph · Accepted Answer · 2012-06-23 00:26:42Z

20

why not place the name of the callback instead? something like

//for example, a global function
window['someFunctionName'].call();

//a namespaced function
//similar to doing ns.someFunctionName()
ns['someFunctionName'].call();

answered Jun 23, 2012 at 0:26

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

2 Comments

petehare Over a year ago

I tried this to no avail unfortunately. It is still trying to call the call() method on a string it seems

Joseph Over a year ago

@petehare no, its not calling a string. the answer uses that string to point to that function in a certain namespace.

Vinyl Windows · Accepted Answer · 2012-06-23 00:30:15Z

0

It looks like it is trying to call a function back, as in, myfunction.call(

Try passing is a function like this.

<input type="file" name="test" data-on-finish="myFunction;">

function myFunction(){
 alert('I am alerting');
};

answered Jun 23, 2012 at 0:30

Vinyl Windows

5031 gold badge7 silver badges19 bronze badges

1 Comment

petehare Over a year ago

Similar thing happening, it's reading myFunction; as a string and trying to run the "myFunction;".call() method on the string...

user1297556 · Accepted Answer · 2016-07-24 04:51:05Z

0

Use something like this:

$(function() {
  function test() {
    alert("ok");
  }

  $(".test").data("test", test);
  $(".test").data("test")();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="test">
</div>

answered Jul 24, 2016 at 4:51

user1297556

Collectives™ on Stack Overflow

Passing a Javascript function through inline data- attributes

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related