CODEWITHSUNDEEP
javascriptpopup
Will Sam
Will Sam

Reputation: 355

Using Javascript to dynamically create links that trigger popup windows

I've searched high and low, and have not been able to find a solution for what I am trying to do.

I am adding dynamic rows, and doing it by element id, using code such as this:

  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = '';
  el.name = 'description' + iteration;
  el.id = 'description' + iteration;
  el.size = 55;
  cellRight.appendChild(el);

I have one field where I would like to add a text link, and have it open a new sized window. A popup, basically. I have tried many different code snippets I have found, and none of them have done that. The closest I have come is a new tab in a full page.

  var cellRight = row.insertCell(3);
  var el = document.createElement("td"); 
  var cell=document.createElement('td');
  var link=document.createElement('a');
  link.setAttribute('href','http://www.domain.com/page.php');
  link.setAttribute('target','_blank');
  link.setAttribute('height','400');
  link.setAttribute('width','500');
  link.appendChild(document.createTextNode('Page'));
  cell.appendChild(link);
  el.appendChild(cell);
  cellRight.appendChild(el);

I have also tried things like: 

link.onclick(window.open('http://www.domain.com/page.php','popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

and

el.html('<a href="JavaScript:newPopup(\'http://www.domain.com/page.php\');">Page</a>');

I can make it work in regular javascript with this code, but I use this in the first "row" of inputs, and the element id is being used to create the subsequent dynamic rows.

<script type="text/javascript">
    function newPopup(url) {
    popupWindow = window.open(
url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="JavaScript:newPopup('http://www.domain.com/page.php');">Page</a></td>

I hope there is either a link, or an example that someone can offer to help me make this work.

Thanks in advance for your help.

Upvotes: 0

Views: 2984

Answers (1)

unclenorton
unclenorton

Reputation: 1625

The proper way to achieve what you need would be the event delegation. That is, you assign the event handler to a parent element (like <body>), and check the event target inside.

For example, you may have the following HTML:

<div id="container">
  <a href="http://www.domain.com/page.php">Page 1</a>
  <a href="http://www.domain.com/page2.php">Page 2</a>
</div>

<button id="addBtn">Add a new link</button>

Note that every link has a proper href attribute that will be used for popup windows. It will also serve as a fallback for the case when Javascript is disabled.

And the (simplified — I don't check for element type, nor the existence of href property) script would be:

var container = document.getElementById('container');

container.addEventListener('click', function (e) {
   if (e.preventDefault) {
     e.preventDefault();
   } else {
     e.returnValue = false; // For IE
   }

   var target = e.target;
   var popupWindow = window.open(target.href,'popUpWindow',
       'height=400,
       width=500,
       left=10,
       top=10,
       resizable=yes,
       scrollbars=yes,
       toolbar=yes,
       menubar=no,
       location=no,
       directories=no,
       status=yes'
   );  
});

// The following code creates links dynamically upon clicking the button
document.getElementById('addBtn').addEventListener('click', function (e) {
    var index = container.getElementsByTagName('a').length + 1;
    var newLink = '<a href="http://www.domain.com/page' + index +'.php">Page ' + index +'</a>';

    container.innerHTML += newLink;
});

See the example here: http://jsfiddle.net/C53cd/3/. Works for me in FF16 and Chrome. Note that you might need to implement a simple polyfill for event binding to work in IE (MSIE and addEventListener Problem in Javascript?). Alternatively, you can use jQuery for the same purpose.

UPD: Added default action prevention for IE.

UPD 2: Added the code to create the new links dynamically.

Upvotes: 3

Related Questions