-2

I do have a input type checkbox which has a data attribute on that. data attribute contains a javascript method which need to be executed on click of that textbox.

<input type="checkbox" id="id001" data-display="checkDisplayOption(p1,p2,p3);">

Now in jQuery -

$("#id001").click(function(){
     $("#id001").data("display");
});

I am looking for $("#id001").data("display"); to trigger checkDisplayOption method but it is not happening.

Sajal Saxena
  • 191
  • 1
  • 3
  • 16
  • 3
    Calling a function in JS needs `()` at the end. – CBroe Apr 28 '23 at 12:29
  • 3
    And the ID selector needs the `#` prefix. – CBroe Apr 28 '23 at 12:31
  • 3
    Just to be clear, jQuery _is JavaScript_ – evolutionxbox Apr 28 '23 at 12:32
  • Does this answer your question? [How to call javascript function inside jQuery](https://stackoverflow.com/questions/41813339/how-to-call-javascript-function-inside-jquery) – joshii_h Apr 28 '23 at 12:33
  • 2
    You got no actual function here though, you got a string value that contains some code, but that code has _not_ been parsed as JavaScript. You would actually need to eval this ... – CBroe Apr 28 '23 at 12:33
  • What have you tried to resolve the problem? Where are you stuck? – Nico Haase Apr 28 '23 at 12:35
  • Thanks CBroe . i can use eval but it is against content security policy . is there any other way ? https://csp.withgoogle.com/docs/strict-csp.html#:~:text='unsafe%2Deval'%20allows%20the,and%20have%20a%20safer%20policy. – Sajal Saxena Apr 28 '23 at 12:37
  • Can you give us some more specifics? Is it always the function `checkDisplayOption` that needs calling, or are there different ones - or might it even be completely arbitrary? Could you change anything about the HTML? – CBroe Apr 28 '23 at 12:44
  • Yes that all is dynamic. I am generating that checkBox in a Java code and params are totally dynamic. But method name and number of parameters remains same. – Sajal Saxena Apr 28 '23 at 12:45
  • And the parameters are always variable names like in the given example, or can they be plain values as well? (Meaning, would you also need to be able to call `checkDisplayOption("foo",5,p3)` at some point?) If it is only variable names, then it would perhaps make more sense to only put those onto the LI element. Then you would grab those with `let param1 = $("#id001").data("display-parameter-1")`, and call `checkDisplayOption(window[param1], .., ..)` directly in your click handler. (They would all have to be global variables then, but I suppose that was the case here to begin with.) – CBroe Apr 28 '23 at 12:57
  • Hi @Alivetodie-Anant , It is against Content Security Policy. That is the reason i cant use that. – Sajal Saxena Apr 28 '23 at 13:04
  • Thank you @CBroe , I think i will be able to make it work the way you explained. – Sajal Saxena Apr 28 '23 at 13:24

1 Answers1

0

The selector in the jQuery code is missing the # symbol to select the checkbox by its ID. It should be $("#id001").click(function(){...

A better approach would be to store the function name as the value of the data-display attribute.

Try below code

$("#id001").click(function () {
    var functionName = $(this).data("display");
    var params = $(this).data("params").split(",");
    window[functionName].apply(this, params);
});

function checkDisplayOption(p1, p2, p3) {
    console.log("checkDisplayOption called with params:", p1, p2, p3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="id001" data-display="checkDisplayOption" data-params="p1,p2,p3">
Mahesh Thorat
  • 1
  • 4
  • 11
  • 22