How to use a button's "data-" attribute to call a selected JavaScript function

Question

I'm trying to set some data on my buttons such that it can be accessed onclick. I'm having no problem using JSON in a button's data attribute where the key value is a string. However, I can't figure out how to set the values to be a function.

What I'd like to happen upon clicking the button in this demo code is for the click event to call the function option1() which will alert the string "hello outside".

The error I'm getting is this:

Uncaught TypeError: Property 'option1' of object #<Object> is not a function

HTML (JSFiddle is here: http://jsfiddle.net/NDaEh/32/):

<button type='button' data-button='{"option1": "option1", "option2": 
"option2"}'>click1</button>

JS:

var data='hello outside';
var option1=function(data){
    alert(data)
}  

$('button').click(function(){
  //var data='hello inside';
  $(this).data('button').option1(data); // should alert 'hello outside'
});

Thoughts?

tim peterson · Accepted Answer · 2012-10-12 11:55:10Z

31

Use the following code to get the values in your HTML:

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));
  alert(data.option1)
});

This code is specifically for your requirement. By this way, you can store data in HTML and retrieve in JavaScript code.

Updated the JSFiddle code, working code is available at: http://jsfiddle.net/NDaEh/51/

EDIT:

Solution to call a function dynamically: http://jsfiddle.net/NDaEh/70/ HTML:

<button type='button' data-button='{"func": "func1"}'>click1</button>
<button type='button' data-button='{"func": "func2"}'>click2</button>

JS:

var myFuncs = {
  func1: function () { alert('Function 1'); },
  func2: function () { alert('Function 2'); },
};

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));

  myFuncs[data.func]();
});

edited Oct 12, 2012 at 11:55

tim peterson

24.4k63 gold badges188 silver badges304 bronze badges

answered Oct 11, 2012 at 9:35

IvenMS

5355 silver badges20 bronze badges

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

6 Comments

tim peterson Over a year ago

thanks @IvenMS but the key thing I want is that data.option1 is itself a function and not just a string. So writing data.option1(data) calls the alert function and not vice versa.

IvenMS Over a year ago

Try this:

var alert_data='hello outside';  function option1 (data){         alert(data)     }          $('button').click(function(){   var data = $.parseJSON($(this).attr('data-button'));   window[data.option1](alert_data); });

IvenMS Over a year ago

The idea is to run the function declared in your document with window["function_name"](arguments);. Please check....

tim peterson Over a year ago

I understand the concept but your code is not working, its giving same error of option1 not being a function as I was first getting

IvenMS Over a year ago

Try this link: jsfiddle.net/NDaEh/66 It is working. The concept is little different, but the same logic.

|

Johan · Accepted Answer · 2012-10-11 10:29:45Z

7

Dont save objects as JSON strings in the html tag property value. Use the data() method instead.

$('input[type="button"]').data({ option1: 'o1', option2: 'o2' });

Also, when youre writing this:

$(this).data('button').option1(data);

option1 would need to be a plugin in order to be chained on to the data method (or any jquery method for that matter). You would need tomething like this:

jQuery.fn.option1 = function () {

   alert($(this).data('option1'));

   return this;
}

Fiddle

edited Oct 11, 2012 at 10:29

answered Oct 11, 2012 at 8:59

Johan

35.4k62 gold badges191 silver badges309 bronze badges

9 Comments

tim peterson Over a year ago

why can't i save objects as JSON strings? also i don't want to generate this data using JS b/c it will be highly variable across my app and i've already spent the time to generate it with server side code (logic is wired in my mysql database)

Johan Over a year ago

@timpeterson Well, html tags property values should be wrapped with double quotes. JSON strings should be as well. So I wouldnt recommend it. You would end up with either invalid html or json.

Johan Over a year ago

@timpeterson How are you fetching the data from the server? By ajax? Or are you just printing it directly in to the html? And what serverside language are you using?

Johan Over a year ago

@timpeterson Sorry about the delay, i went for lunch. Check out the fiddle that i posted. Is this what you need?

Johan Over a year ago

@timpeterson If you want to write a custom jquery method (aka plugin), thats how its done (In other words, as long as you want to use your method directly on the jquery object). If you dont want to do that you could extract the data object and pass it to your regular function and handle it there.

|

udidu · Accepted Answer · 2012-10-11 09:03:33Z

2

Use the jQuery data as shown below:

$('input[type=button]').data('button-data', { option1: 'option1', option2: 'option2});

Use:

$('input[type=button]').data('button-data');  //{ option1: 'option1', option2: 'option2}

In order to get the data from the element

answered Oct 11, 2012 at 9:03

udidu

8,6167 gold badges53 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to use a button's "data-" attribute to call a selected JavaScript function

3 Answers 3

6 Comments

Fiddle

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related