How to add event listener and set path like in Twig in Javascript file

Question

This code works fine:

<a href="#" onClick="MyWindow=window.open('{{ path('metadata', {'id': q.id}) }}',
'MyWindow', 'toolbar=yes, location=no, directories=yes, status=yes, 
 menubar=yes, scrollbars=yes, resizable=no, width=600, height=800'); 
 return false;">Quotes Metadata</a>

but I don't want to have js in my html.

I tried to separate it, but I met some problems.

This is what I've done:

I added this to my template:

{% block javascripts %}

     <script src="{{ asset('bundles/acmequotes/js/popup.js') }}" type="text/javascript"></script>

{% endblock %}

and changed the code given above to this:

<a href="#" id="popup">Quotes Metadata</a>

My popup.js:

var popupObj = document.getElementById("popup");

popupObj.addEventListener('click', function () {

    window.open( "link", "myWindow", 
    "status = 1, height = 300, width = 300, resizable = 0" )

},false);

The first problem is that popupObj is null, because Firebug says that I cannot call addEventListener to null objects...

And the second - as this is a .js file how to set "link" to be
{{ path('metadata', {'id': q.id}) }} ?

I don't know a thing about js, so please help me to make it works! Thank you very much in advance!

Fabrizio Calderan · Accepted Answer · 2012-09-26 07:46:20Z

1

simply execute the code at domready event (or window.onload), e.g.

window.addEventListener('load', function() {

   var popupObj = document.getElementById("popup");    
   popupObj.addEventListener('click', function () {

         var url = this.getAttribute('href'); // see snippet below
         window.open(url, "myWindow", 
                     "status = 1, height = 300, width = 300, resizable = 0" );

         return false;

   },false);
});

and change your link into

<a href="{{ path('metadata', {'id': q.id}) }}" id="popup">...</a>

doing so your link will work even when javascript on user device is not available

edited Sep 26, 2012 at 7:46

answered Sep 26, 2012 at 7:33

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

7 Comments

Faery Over a year ago

Thank you verry much! It works now, but there is one problem - the content behind the popup Window is changing to {{ path('metadata', {'id': q.id}) }} and I prefer it to stay as it was and this link to be loaded only in the popup.

Fabrizio Calderan Over a year ago

add a return false; after window.open... - see my update (or search on MDN for preventDefault)

Faery Over a year ago

It still changes :( And I have a long list of links like this and only for the first in the page the popup appears.

Fabrizio Calderan Over a year ago

are you saying that you have a lot of elements in the page whose id is "popup" ?

Fabrizio Calderan Over a year ago

use a class instead of an id and then, at domready or window.onload, loop over the elements collection of class "popup" and attach your handler to every i-th element

|

Collectives™ on Stack Overflow

How to add event listener and set path like in Twig in Javascript file

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related