Opening windows

[Esqulax]

Hiya,
Its probably something fundamental that I'm missing.. but I have this code:

<td><a href="javascript: window.open('customeradd.php', 'Add Customer', 'width =400, height = 400, scrollbars = 1');">Add customer</a></td>
<td><a href="javascript: window.open('custedit.php', 'Customers','width =400, height =400, scrollbars =1');">View/Edit Customer list</a>
<td><a href="javascript: window.open('addcar.php', 'Add Car', 'width =400, height = 150, scrollbars = 1');">Add a Car</a></td>

Fairly straightforward.

My problem is:
during normal operation these all work fine.
however, when the parent window (i.e the page that this code is written on) is in a window.open itself (as in i window.opened it from another page),
the Add Customer opens in the current window, not a new one...
the other links all open in a new window.. but i cant see any differences in the code.. any ideas what im missing?

[Fotiman]

The second parameter to window.open is the name of the window to open in. If a window with that name already exists, it opens in that window, otherwise it creates the new window. So in your case, the window already exists, and hence why it opens in the same window.

Note also that it's considered bad practice to put the fake "javascript" protocol in an href element, and will also not be accessible to people with JavaScript disabled (including search engines). A better approach is to use unobtrusive JavaScript with pure HTML links. This way it will still be accessible to those people with JavaScript disabled (it will just open in the same window in those cases).

There's a good example at ThinkVitamin [thinkvitamin.com] that uses the Yahoo UI Library [developer.yahoo.com].

[rocknbil]

Your parameters are url, window name, "window parameter list."

You want to generate a unique window name for each window. This one bases it on time, which is unique enough.

<script type="text/javascript"> 
function newWin(url) { 
 var day = new Date(); 
 var id = day.getTime(); 
 var params = 'width=400,height=400,scrollbars,resizable'; 
 window.open(url, id, params); 
 return false; 
} 
window.onload=function () { 
 if (document.getElementById('cust_add')) { 
   document.getElementById('cust_add').onclick= function() { return newWin('customeradd.php'); }; 
 } 
} 
</script> 

<a href="customeradd.php" id="cust_add">Add customer</a>

Note this moves all your JS off the page and leaves an "ordinary" link. (Try it, it works. :-) )

Return false is the most important addition here. When you return false, it tells the browser not to do what it normally does on that event - so onClick, return false prevents the parent page from going to the specified URL and allows Javascript to manage the event.

The advantage is, SE's and non-Javascript users can use the link, Javascript gets the new window. This is not likely to be an issue if the function is "add customer" but it's a bad habit to get into.