how to pass dynamic parameters to jquery function

Question

I want to pass some dynamic paramters to jquery onClick event. Before, I used this HTML and JavaScript:

<!-- HTML -->
<a id="link123" href="link1" onClick="javascript:func1(${param1},${param2});">123</a>

/* JavaScript */
func1(param1,param2) {
   // do something
}

The parameters param1 and param2 come from backend code and are dynamic. How I get this is not important here.

After using jQuery, I have this HTML and JS:

<a href="link123">
<input type="hidden" id="param1" value="${param1}"/>
<input type="hidden" id="param2" value="${param2}"/>

$(document).ready(function() {
  $("#link123").click(function() {
    var param1 = $("#param1")[0].value;
    var param1 = $("#param1")[0].value;
    func1(param1,param2);
  });
});

func1(param1,param2) {
  //do something
}
function func1 is there as before.

I'm not happy with this solution (passing params as inline hidden values). What are other, better ways to pass dynamic parameters to jQuery, in situation like this?

${param1} is actually JSTL expression – newcoderintown Jan 18 '12 at 11:10 — newcoderintown, Jan 18 '12 at 11:10

score 4 · Answer 1 · answered Jan 18 '12 at 10:58

4

You could inline those parameters like you did before.

  $("#link123").click(function() {
    func1(${param1}, ${param2});
  });

That is, your PHP (or whatever) generates javascript with already substituted param values.

answered Jan 18 '12 at 10:58

Sergio Tulentsev

226,338
43
373
367

In my case, ${param1} is JSTL expression which is send by framework from java code to jsp. Is this variable also accessible in javascript like you did before. Jsp file can read these variables, but can javascript file as well do so ? – newcoderintown Jan 18 '12 at 11:11
Oh, I thought it's a PHP syntax. I'm not too familiar with JSP. – Sergio Tulentsev Jan 18 '12 at 11:15

score 4 · Accepted Answer · edited Jun 25 '14 at 15:56

4

Data attributes are advised for this purpose. Use:

<input data-param1="${param1}" />

And then:

$('input').click(function(){
   $(this).attr('data-param1');
});

edited Jun 25 '14 at 15:56

MrLore

3,759
2
28
36

answered Jan 18 '12 at 10:58

Slavic

1,891
2
16
27

Sorry, if this is beginner stupid question. Data attributes are HTML5 standards, so does this work also in old browsers ? – newcoderintown Jan 18 '12 at 11:14
This particular functionality is supported all the way to IE 7 ( maybe also 6, hadn't checked, to be frank). It's all due to jQuery doing all the standardization issues on it's side, so you don't have to worry about much. See http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 for details. – Slavic Jan 18 '12 at 11:16
@Slavic - data attributes are really backwards compatible. No sure how backwards, but definitely IE6, and maybe even older. – Anurag Jan 18 '12 at 12:24
close the paranthesis – Arun Feb 20 '14 at 13:18

score 0 · Answer 3 · answered Jan 18 '12 at 11:00

I assume you are trying to pass variable values from backend scripting language to Javascript? One possible way is to output them directly to the javascript

<script language='JavaScript'>
//it's a good idea to have all those vars collected in a single object in order to not overpopulate the global scope
var scriptOutput = {
    param1 : ${param1},
    param2 : ${param1}
}
$(document).ready(function() {
    $("#link123").click(function() {
        func1(scriptOutput.param1,scriptOutput.param2);
    });
});
</script>

how to pass dynamic parameters to jquery function

3 Answers3