Cakephp 1.3, Weird behavior on firefox when using $this->Html->link ...

Question

Greetings,

I am getting a very weird and unpredictable result in firefox when using the following syntax:

$this->Html->link($this->Html->div('p-cpt',$project['Project']['name']) . $this->Html->div('p-img',$this->Html->image('/img/projects/'.$project['Project']['slug'].'/project.thumb.jpg', array('alt'=>$project['Project']['name'],'width'=>100,'height'=>380))),array('controller' => 'projects', 'action' => 'view', $project['Project']['slug']),array('title' => $project['Project']['name'], 'escape' => false),false);

OK I know it is big but bear with me.

The point is to get the following output:

<a href="x" title="x">
<div class="p-ctp">Name</div>
<div class="p-img"><img src="z width="y" height="a" alt="d" /></div>
</a>

I'm not sure if this validates correctly both on cakephp and html but it works everywhere else apart from firefox. You can actually see the result here: http://www.gnomonconstructions.com/projects/browser To reproduce the result use the form with different categories and press search. At some point it will happen!!

Although most of the time it renders the way it should, sometimes it produces an invalid output like that:

<a href="x" title="x"></a>
<div class="p-cpt">
<a href="x" title="x">name</a>
</div>
<div class="p-img">
<a href="x" title="x"><img src="x" width="x" height="x" alt="x" /></a>
</div>

Looks like it repeats the link inside each element.

To be honest the only reason I used this syntax was because cakephp encourages it.

Any help will be much appreciated :)

Answer 1

I am guessing that the name of some projects is null. According to the documentation, if you pass null as the second argument to the div() method, it will not generate the closing tag (and the resulting markup will be invalid).

The example of invalid markup that you pasted above appear to have come from Firebug rather than Page Source. Use Page Source to view the actual markup sent to the browser. The anchor tag is not repeated.

I rewrote your code to better see what happens. Copy it into one of your views, change 'My Project' to null, and notice how it will affect the $name_div variable:

<div class="p-cpt">My Project</div> will turn into <div class="p-cpt">.

<?php

$project['Project']['name'] = 'My Project';
$project['Project']['slug'] = 'my-project';

$image = $this->Html->image(
    '/img/projects/' . $project['Project']['slug'] . '/project.thumb.jpg',
    array(
        'alt' => $project['Project']['name'],
        'width' => 100,
        'height' => 380
    )
);

$name_div = $this->Html->div('p-cpt', $project['Project']['name']);

$image_div = $this->Html->div('p-img', $image);

$link = $this->Html->link(
    $name_div . $image_div,
    array(
        'controller' => 'projects',
        'action' => 'view',
        $project['Project']['slug']
    ),
    array(
        'title' => $project['Project']['name'],
        'escape' => false
    )
);


var_dump($image);
echo 'Notice what happens below if project name is null.';
var_dump($name_div);
var_dump($image_div);
var_dump($link);

echo $link;