Jump to content
Larry Ullman's Book Forums

Window.Open And Php


Recommended Posts

Hi everyone

 

Regarding window.open (page 320 - 322), is there a way of using this function without declaring the window (first argument) when opening with <a href>? The reason I ask is that I am writing a program in php that allows clients to select a lawnmower by various criteria (e.g. lawn size, whether they need stripes, mulcher) which will then list, say, 6 models that are suitable. The client can then click on the highlighted model name to open a new window with all of the technical specifications, images etc. I can do this easily just using html but can't control the size of the destination window (I know you don't like us doing this, Larry, but if the new window opens to full size, the client is in danger of getting lost, as well as it being neater when the client has clicked on more than one model.)

I can insert the js code into the html using php but it seems a bit redundant and I would prefer to call the js file as recommended on the bottom of page 24 (unobtrusive javascript).

Link to comment
Share on other sites

Are you asking if it's possible to dynamically set the first argument (the URL) of the window.open method so that it depends on the link that was clicked on?

Yes, absolutely you can.

 

Before I explain how to do that though, I just want to verify whether that is indeed what you're asking or not.

Please let me know.

Link to comment
Share on other sites

Hi HartleySan

No, I can do that with php, but it seems unnecessary when we have set the URL using <a href=http://URL.com target = "_blank">. What I would like to happen is for html5 to call a js function that sets the window size and position without having to declare the first argument for every product listed. It probably won't make any difference at all to the user, I just would like to make the code more concise.

 

Would just like to comment that I think it is a great book.

Link to comment
Share on other sites

I think I see what you're saying, but if my assumption is correct, then perhaps you are slightly misunderstanding something here. (Either that, or I'm misunderstanding something.)

 

From what I can gather, it seems like you are thinking that you have to explicitly specify the URL for each link that you want to open in a new window, which is not the case. When you set up the onclick event for the links, you can easily use JS to get the URL of the applicable item. For example:

 

var aLinks = document.getElementsByTagName('a');

for (var i = 0, len = aLinks.length; i < len; i++) {

 aLinks[i].onclick = openNewWindow;

}

function openNewWindow() {

 alert(this.getAttribute('href')); // Alerts the href attribute of the link that was clicked on. You can do whatever you have to do with this href attribute value.

 return false;

}

 

Anyway, that should give you want you want. Basically, if you always use this.getAttribute('href') as the first argument to the window.open method, I think you'll be okay.

 

On a side note, if you're using the target="_blank" attribute for a links, you don't need any JS at all. The normal link behavior will open the new link in a new tab. Note that in tabbed browsers though, a new tab, not a new window, will be opened up.

 

Hope that's what you're asking. If not, please let me know.

  • Upvote 1
Link to comment
Share on other sites

Hi there HartleySan

 

Many thanks for that - as I am a newbie with js, I am having to work through it slowly to get my head round it! In the meantime, perhaps I can explain it better if I show you the code.....

 

This is the php

 

This is part of a while loop that selects all of the appropriate products from MySql

 

There is a heading for each column and then a listing as follows:..

 

echo '<tr style="background-color: #FFFFFF;" valign="top"><td>' . $findmower2['Ref'] . '</td><td><a href="' . $findmower2['Ref'] . '.html" target = "_blank">' . $findmanu2['Manufacturer'] . ' ' . $findmower2['Name'] . '</a></td><td>' . $price . '</td><td>' . $comments . '</td><td align = "center"><img src = "mowerimages/' . $findmower2['Ref'] . '.jpg" alt = "Sorry - no image" title = "' . $findmower2['Name'] . '" height = "100px" /></td></tr>';

 

which continues until...end of while

 

This is the resultant html source code......

 

<tr style="background-color: #FFFFFF;" valign="top"><td>532</td><td><a href="532.html" target = "_blank">Allen 215</a></td><td>£500</td><td>Test 215</td><td align = "center"><img src = "mowerimages/532.jpg" alt = "Sorry - no image" title = "215" height = "100px" /></td></tr>

 

...which works great but doesn't allow me to control the size of the emergent window (why doesn't <a...> have a height = "..." width = "..." facility???).

 

One alternative is to insert js.......

 

<tr style="background-color: #FFFFFF;" valign="top"><td>532</td><td><a href="javascript:location='532.html';window.open('532.html','215','height=500,width=500,scrollbars=yes')">Allen 215</a></td><td>£500</td><td>Test 215</td><td align = "center"><img src = "mowerimages/532.jpg" alt = "Sorry - no image" title = "215" height = "100px" /></td></tr>

 

...but this doesn't open into a new window.

 

I think I need to re-read a whole swathe of the book before I try any more of this. Thanks again.

Link to comment
Share on other sites

Hi there HartleySan

 

I seem to have the program working now, and it does all that I want EXCEPT it now leaves all of the subsequent windows (e.g. home, about us) in the same format i.e. with height=500,width=600,top=200,left=200,location=no,resizable=yes,scrollbars=yes.

------------php---------------

START WHILE.......

echo '<tr style="background-color: #FFFFFF;" valign="top"><td>' . $findmower2['Ref'] . '</td><td><a href="findmower/' . $findmower2['Ref'] . '.html" id="link" target = "PopUp"> ' . $findmanu2['Manufacturer'] . ' ' . $findmower2['Name'] . '</a></td><td>' . $price . '</td><td>' . $comments . '</td><td align = "center"><img src = "mowerimages/' . $findmower2['Ref'] . '.jpg" alt = "Sorry - no image" title = "' . $findmower2['Name'] . '" height = "100px" /></td></tr>';

......END WHILE

 

echo '<script src = "popups.js"></script>';

------------------------------

popups.js is Larry's popups script with a couple of modifications for new window size.

// Script 9.5- popups.js

// This script creates a popup window on every link.

// Function called when the link is clicked.

function createPopup(e) {

'use strict';

 

// Get the event object:

if (typeof e == 'undefined') var e = window.event;

// Get the event target:

var target = e.target || e.srcElement;

// Create the window:

var popup = window.open(target.href, 'PopUp', 'height=500,width=600,top=200,left=200,location=no,resizable=yes,scrollbars=yes');

 

// Give the window focus if it's open:

if ( (popup !== null) && !popup.closed) {

popup.focus();

return false; // Prevent the default behavior.

} else { // Allow the default behavior.

return true;

}

 

} // End of createPopup() function.

// Establish functionality on window load:

window.onload = function() {

'use strict';

 

// Add the click handler to each link:

for (var i = 0, count = document.links.length; i < count; i++) {

document.links.onclick = createPopup;

} // End of for loop.

}; // End of onload function.

 

-------------------------------------

 

I am still trying to get my head round your .js script - much of it doesn't seem to be in Larry's book so will have to get on internet when possible to search w3c.

Many thanks

Max

Link to comment
Share on other sites

Yeah, my little JS script was my own creation, so there may or may not be something like that in Larry's book. Also, please keep in mind that the sample script was not meant to be used as is. I wrote it to illustrate a point, and was hoping you'd modify it for your needs.

 

Most likely the reason all your links are opening in separate windows now is because you're applying the createPopup function to the onclick event for all the links on the page.

 

The simply solution would be to place all the links you want to apply the createPopup function to in a div with an ID, and then use that ID to restrict which links are opened in a pop-up window. For example:

 

HTML

 

<a href="home.php"></a>

<a href="search.php"></a>

<div id="productList">

 <a href="product-1-URL-here">Product 1</a>

 <a href="product-2-URL-here">Product 2</a>

 <a href="product-3-URL-here">Product 3</a>

</div>

 

JS

 

var productLinks = document.getElementById('productList').getElementsByTagName('a');

// Run the for loop on the productLinks array here.

 

Basically, you can chain the getElementById and getElementsByTagName method calls together to achieve what you want.

 

Anyway, I think that's what you asking, but please verify.

Thanks.

Link to comment
Share on other sites

 Share

×
×
  • Create New...