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!

Answer 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