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
– newcoderintown

2012-01-18 11:10:19 +00:00
Commented Jan 18, 2012 at 11:10 — newcoderintown
– newcoderintown, Commented Jan 18, 2012 at 11:10

MrLore · Accepted Answer · 2014-06-25 15:56:32Z

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, 2014 at 15:56

MrLore

3,7822 gold badges30 silver badges37 bronze badges

answered Jan 18, 2012 at 10:58

Slavic

1,9822 gold badges17 silver badges31 bronze badges

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

4 Comments

newcoderintown Over a year ago

Sorry, if this is beginner stupid question. Data attributes are HTML5 standards, so does this work also in old browsers ?

Slavic Over a year ago

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 stackoverflow.com/questions/2412947/… for details.

Anurag Over a year ago

@Slavic - data attributes are really backwards compatible. No sure how backwards, but definitely IE6, and maybe even older.

Arun Over a year ago

close the paranthesis

Sergio Tulentsev · Accepted Answer · 2012-01-18 10:58:22Z

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, 2012 at 10:58

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

2 Comments

newcoderintown Over a year ago

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 ?

Sergio Tulentsev Over a year ago

Oh, I thought it's a PHP syntax. I'm not too familiar with JSP.

J0HN · Accepted Answer · 2012-01-18 11:00:47Z

0

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>

answered Jan 18, 2012 at 11:00

J0HN

27.1k5 gold badges59 silver badges88 bronze badges

Collectives™ on Stack Overflow

how to pass dynamic parameters to jquery function

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related