How To: PHP + Javascript Pop-up Window

Question

I have the following code that gives me a list of items on the front-end, but I want those links to open in a new pop up window. Is there a way I can do this? Thank you.

echo '<div class="item_row_header">';
 for($i=0;$i<count($this->fields);$i++) {
 echo '<div class="item_cell jdheader'.$this->fields[$i]->cssclass.'">';
 //to display the header with/without sorting option
 if(in_array($this->fields[$i]->type, array(10,11,12,13)))
 echo $this->fields[$i]->name;
 else
 echo JHTML::_('jdgrid.sort', $this->fields[$i]->name, 'field_'.$this->fields[$i]->id, @$this->cparams->filter_order_Dir, @$this->cparams->filter_order );
 echo '</div>';
 }
 echo '<div class="clr"></div></div>';
 }
echo '<div class="itemlist itemlist_type'.$this->type->id.'">';
if(count($this->items)) {
 //all the item list part display here
 for($i=0;$i<count($this->items);$i++) {
 $item = $this->items[$i];
 require(dirname(__FILE__).DS.'default_item.php');
 }

Here is what I get on the front-end with the code above:

 <div class="item_row_header">
 <div class="item_cell jdheader"><a href="javascript:void(0);" id="sort" class='field_70 desc' title="Clique para ordenar por coluna">Título</a></div>
 <div class="item_cell jdheader">Fotos</div>
 <div class="item_cell jdheader"><a href="javascript:void(0);" id="sort" class='field_63 desc' title="Clique para ordenar por coluna">Cidade</a></div>
 <div class="item_cell jdheader"><a href="javascript:void(0);" id="sort" class='field_64 desc' title="Clique para ordenar por coluna">Estado</a></div>
 <div class="item_cell jdheader"><a href="javascript:void(0);" id="sort" class='field_60 desc' title="Clique para ordenar por coluna">Tipo do Imóvel</a></div>
 <div class="item_cell jdheader"><a href="javascript:void(0);" id="sort" class='field_67 desc' title="Clique para ordenar por coluna">Valor R$</a></div>
 <div class="clr"></div>
</div>
<div class="itemlist itemlist_type15">
 <div class="item_row_bg featured itemrow_type15">
 <div class="item_content">
 <div class="item_cell "><a href="/joomla/temporada/imoveis/itens/ver/temporada-destaque">Temporada Destaque</a></div>
 <div class="item_cell "><img src="http://mysite.com.br/joomla/images/joomd/thumbs/1350654862temporada-destaque.jpg" alt="Fotos" /></div>
 <div class="item_cell ">Exemplo de Cidade</div>
 <div class="item_cell ">São Paulo</div>
 <div class="item_cell ">Casa</div>
 <div class="item_cell ">600</div>
 <div class="clr"></div>
 </div>
 </div>
 <div class="item_row itemrow_type15">
 <div class="item_content">
 <div class="item_cell "><a href="/joomla/temporada/imoveis/itens/ver/temporada">Temporada</a></div>
 <div class="item_cell "><img src="http://mysite.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></div>
 <div class="item_cell ">Exemplo de Cidade</div>
 <div class="item_cell ">São Paulo</div>
 <div class="item_cell ">Casa</div>
 <div class="item_cell ">800</div>
 <div class="clr"></div>
 </div>
 </div>
</div>

---

Here is how I solved it:

I opened the default_item.php and found this:

if($j==0) {
echo '<a href="'.JRoute::_('index.php?option=com_joomd&view=item&layout=detail&typeid='.$item->typeid.'&id='.$item->id).'">';
echo $this->field->displayfieldvalue($item->id, $this->fields[$j]->id, true);
echo '</a>';

}

Then I could call the pop up using jQuery [http://swip.codylindley.com/popupWindowDemo.html][1]

Here is how my working code looks like now:

echo '<a class="propriedade" href="'.JRoute::_('index.php?option=com_joomd&view=item&layout=detail&typeid='.$item->typeid.'&id='.$item->id).'">';

Thank you all so much for the help.

• Brad: target="_blank" in your <a> tags.
• pathurs: @Brad this won't work in all browsers, a lot will open in a new tab where as the question specified a new window, see my answer for specifications
• Alex: what you need to know is that PHP is used only to generate HTML.. you don't use php to open a window... you use HTML... PHP has to do with server side...
• surfmuggle: Hi mah2602 could you add a sample of the resulting html? Since you wrote pop up window i assume that you are talking about a javascript pop up window (quirksmode.org/js/popup.html). If you want the link to open an new browser window see the answer below (<a href .. target="_blank") or do you want something like a modal window (jqueryui.com/dialog/#modal-confirmation)?
• mah2602: Yes it must be a pop up window, because it's a real estate site and the window would open a listing.

Answer 1

As Alex noted, this isn't possible with just PHP. PHP is a server-side language that happens before the page is loaded. You can achieve this with HTML and JavaScript.

You should look into the JavaScript function open() which allows you to open a new window with an exact width/height and URL specified.

Read more about open() here

EXAMPLE CODE :

myWindow=window.open('http://google.com','','width=200,height=200')

This will open Google in a new window with dimensions of 200x200 pixels

To use this code, you must insert this in either a <script> tag or in an external JavaScript file. I suggest using this as a function like so:

function newWindow(url, width, height)
{
 myWindow=window.open(url,'','width=' + width + ',height=' + height);
}

You can then call this with:

newWindow('http://google.com', 200, 200)

you can implement this in your code with the onCLick attribute:

<a href="#" onclick="newWindow('http://google.com', 200, 200)">Click Me</a>

Demo of my function with HTML and JavaScript

The reason I suggest this function is that using the target="_blank" attribute on some browsers just opens in a new tab, which you can use, but I assumed you wanted a whole new window

Now that you have added some code to your question, I can see you have a lot of list items, you can simple add an anchor tag to make my function work, example:

<div class="item_cell "><img src="http://alii.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></div>
<div class="item_cell ">Exemplo de Cidade</div>
<div class="item_cell ">São Paulo</div>
<div class="item_cell ">Casa</div>
<div class="item_cell ">800</div>

would become:

<div class="item_cell "><a href="#" onclick="newWindow(URL, WIDTH, HEIGHT)"><img src="http://alii.com.br/joomla/images/joomd/thumbs/1350654792temporada.jpg" alt="Fotos" /></a></div>
<div class="item_cell "><a href="#" onclick="newWindow(URL, WIDTH, HEIGHT)">Exemplo de Cidade</a></div>
<div class="item_cell "><a href="#" onclick="newWindow(URL, WIDTH, HEIGHT)">São Paulo</a></div>
<div class="item_cell "><a href="#" onclick="newWindow(URL, WIDTH, HEIGHT)">Casa</a></div>
<div class="item_cell "><a href="#" onclick="newWindow(URL, WIDTH, HEIGHT)">800</a></div>

• mah2602: Thanks, but I'm a beginner with PHP, where exactly do I insert this code on the one I posted? Thank you so much.
• mah2602: Thank you so much for you support! There aren't any <a href="#">item link</a> on my code, the links for the items are generated only on the front-end I think. So is there a way I can insert the onClick function anywhere on the code I posted so that every link gets this function?
• pathurs: Can you update your question with some sample of these links you talk about?
• mah2602: Sorry, I've included more of the PHP and the resulting HTML now.
• mah2602: The problem is that the <div class="item_cell "><a href="#">800</a></div>only appears on the front-end, I can't edit it because the only way I could get this HTML code was opening my page and getting its souce code on Chrome. All I have on the back-end is the PHP code :(

Answer 2

add target="_blank" in tour tag or use window.open method.

e.g.: 
<a href="http://google.com" target="_blank">Google</a>
or
<script>window.open('http://google.com','','width=200,height=200'); </script>

• pathurs: This is an exact copy my my answer but very simplified, you obviously stole the code from me as well