This site may be using cookies to melk you with your own data. I, ben0bi, am not the owner of this web service and I also do not maintain their servers. But the EU and the owner of this service think, that the user (me) has the responsibility to inform the consumer (you), that this website uses cookies. Again: I, ben0bi, NEVER use cookies. I am not responsible for the setup of this web service. I just present some information here and do not intend to spy on you for whatever reason ever. But (also again), I do not host this website nor do I maintain any servers related to this website nor do I benefit from using the cookies maintained from this service. I hereby give the responsibility for using cookies on blogspot back to the owners of blogspot.

Dienstag, 12. Juli 2016

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 ="param1");
   var param2 ="param2");
   var param3 ="param3");

  ... do something with param1, param2 and param3

Hope that helps.

Keine Kommentare:

Kommentar veröffentlichen