Empty htmlOptions and link href problem

Yii 1.1 General Discussion
1

Hi there,

If I’m not mistaken, there were some change not so long ago to the framework code, that cause not to print out these htmlOptions array elements that points to an empty value. If I’m again not mistaken, the same goes to CHtml:link, i.e. if one provide empty string as url, the href="" part will not be printed out.

Seems that this causes some problems with links, which the only job is to fire jQuery or JavaScript code. For example this piece of code:


echo(CHtml::link($child['text'], '', array('onclick'=>"configTreeClickHandler('".$child['id']."');")));

generates HTML code like this:


<a onclick="configTreeClickHandler('option-a6');">Option A6</a>

As you may notice, there is href="" part missing which causes (tested under FF 3.6 and IE 8) link to be incorrectly rendered by browser - i.e. without underline, in black instead of default blue color and without handpoint cursor. Even if such link is correctly styled, styles are ignored for it (i.e. there is no hovering effect, if such was defined). However, clicking works fine - proper JS function is fired.

My first question is, isn’t that a bug that href="" part is not rendered, when URL is empty?

And second question: Assuming that using “#” is not an option (would scroll page to the top) and that attaching onClick outside link (via jQuery) also isn’t an option (and I’m not sure, if this would change anything in this particular case), does anyone knows a solution or workaround for this?

2

You could use "#" as long as your onclick function returns false (this will avoid going up to the top).

3

Thanks Antonio, completely forgot about this! :] I also figured out that I can add ‘href’=>’’ to htmlOptions of CHtml:link and proper section href="" will be rendered, making this fully operational link. Therefore I was wrong about first statement.

I also figured something odd. I was not getting underlines/blue color/hand point cursor, when I was testing my code directly in the application I wrote it for - that is inside a module (which is inside another module to make things a little bit more complicated! :]). But when I extracted this code (widget) out of that place to freshly new generated application, everything turned out to be OK! Beautiful, blue, underlined links with handpoint cursor, not jumping to top page (As no href="" inside), JS fires, nothing to add, nothing to remove.

EDIT: And the really, really odd thing is that for CTreeview, incorrect link (no color, underline, pointer) is only for last any node of main branch and only if that last node has no children. Every other nodes ([color="#ff0000"]having children or not being part of main branch[/color]) are driven correctly. I can’t imagine how it is possible that one node looks different then other ones, if every node is rendered using the same piece of code and every node HTML code looks exactly the same. But it looks like it looks - tested in both mentioned browsers.

I have no idea, why inside my app/module it reacts that odd?

4

When I have those problems I always check to the automated HTML code on the page. Check what is the difference between the other children and the last… I use to find silly coding bugs like this.

5

I’m no different. The problem is that code for both correctly (having children) rendered link (treeview node) and for incorrectly rendered one (not having children) is the same and it is generated by CTreeview, not me!

Look for yourself (kind of big and kind of dirty):


<ul id="yw0" class="treeview">

 	<li id="one"><a title="One" onclick="configTreeClickHandler('one');return false;" style="padding-left: 3px;">One</a>

 	</li>

 	<li id="two" class="collapsable lastCollapsable"><div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div><a title="Two" onclick="configTreeClickHandler('two');return false;" style="padding-left: 3px;" class="">Two</a>

  	<ul>

       	<li id="three"><a title="Three" onclick="configTreeClickHandler('three');return false;" style="padding-left: 3px;" class="">Three</a>

       	</li>

       	<li id="four" class="last"><a title="Four" onclick="configTreeClickHandler('four');return false;" style="padding-left: 3px;" class="">Four</a>

       	</li>

  	</ul>

 	</li>

</ul>

Maybe you notice something, that I can’t?