jQuery (+Twig) Tricks: Parameter Mayhem

So, you want to call your JS function out of a link, but it has so many parameters that you cannot see the forest out of trees?

I found out this little trick to "externalize" the parameters of my functions in the link.

For this one, jQuery is required. I do not explain here how to use jQuery.

Example Function ("Wrong"):

function myFunction(param1, param2, param3)
{
  ... do something with param1, param2 and param3
}

And this is the example link:
<a href="#" onclick="myFunction('text', 2, 'anothertext');">go</a>

With Twig it would look like this:
<a href="#" onclick="myFunction('{{ twigparam1 }}', {{ twigparam2 }}, '{{ twigparam3 }}');">go</a>

I do not want to use an event-trigger because the page must be built up to register the event on some elements. (e.g. $("div").click())
If you build another div after this event was registered, this new div will not trigger the event, except you register the event again. That is, why I use functions directly in the link. It's not good practice, but on the other side, we don't have to care, where and when our events have to be registered or not.

If you have more and more parameters, this will look uglier and uglier and you cannot see where this " starts and this ' ends. ;)

Fortunately, we can add data to the link with the data-xxx parameters:
<a href="#" onclick="myFunction()" data-param1="text" data-param2="2" data-param3="anothertext">go</a>

You can add as many data as you want, just use the prefix data- and your desired parameter name.

In the function below, you will see how to get this data. But first we need to give the link itself to the function, so it can get the data out of the link. For that we just use $(this) from jQuery as function parameter in the link:
<a href="#" onclick="myFunction($(this))" data-param1="text" data-param2="2" data-param3="anothertext">go</a>

And with Twig it would look like this:

<a href="#" onclick="myFunction($(this))" data-param1="{{ twigparam1 }}" data-param2="{{ twigparam2 }}" data-param3="{{ twigparam3 }}">go</a>

All we need to do now, is rewrite our function to use the data from the link:

function myFunction(link)
{
   var param1 = link.data("param1");
   var param2 = link.data("param2");
   var param3 = link.data("param3");

  ... do something with param1, param2 and param3
}

Hope that helps.