$ ajax-> link () not working in Firefox?
I am reading "Getting Started CakePHP" and in order to get you to vote on comments, you are encouraged to create a couple of AJAX links:
<?=$ajax->link('<li>up</li>',
'/comments/vote/up/'.$comment['Comment']['id'],
array('update' => 'vote_'.$comment['Comment']['id']),
null, false);?>
<?=$ajax->link('<li>down</li>',
'/comments/vote/down/'.$comment['Comment']['id'],
array('update' => 'vote_'.$comment['Comment']['id']),
null, false);?>
This works fine in IE, but it does nothing in FF. It doesn't even get to the controller or model, because the links it creates don't do anything.
The generated HTML looks like this:
<a id="link2128392960" onclick=" event.returnValue = false; return false;" href="/blog/comments/vote/up/1"/>
<li>
<a id="link2128392960" onclick=" event.returnValue = false; return false;" href="/blog/comments/vote/up/1">up</a>
</li>
<script type="text/javascript">
//<![CDATA[
Event.observe('link2128392960', 'click', function(event) { new Ajax.Updater('vote-1','/blog/comments/vote/up/1', {asynchronous:true, evalScripts:true, requestHeaders:['X-Update', 'vote-1']}) }, false);
//]]>
</script>
source to share
First, the rendered HTML output is not accurate. It looks like you copied this from Firebug or something instead of your browsers to the View Source page. CakePHP doesn't actually create self-closing anchor tags in this script ( <a />
unlike <a></a>
), as your example shows.
I believe this indicates your problem. The fact that your HTML browser (or Firebug's) was trying to fix the code at runtime indicates that your HTML is incorrect. In particular, you cannot put a block-level element ( <li>
) inside an inline element ( <a>
).
<div class="actions">
<ul>
<li>
<?php echo $ajax->link('up', array(
'controller' => 'comments',
'action' => 'vote',
'up',
$comment['Comment']['id']
), array(
'update' => 'vote_' . $comment['Comment']['id']
), null, false); ?>
</li>
<li>
<?php echo $ajax->link('down', array(
'controller' => 'comments',
'action' => 'vote',
'down',
$comment['Comment']['id']
), array(
'update' => 'vote_' . $comment['Comment']['id']
), null, false); ?>
</li>
</ul>
</div>
The above example will generate valid HTML because inline elements <a>
will be fully nested within <li>
block level elements . This will hopefully fix the functionality of your page in standards-compliant browsers.
source to share
I dont think this is the correct HTML to bind a tag without an end anchored tag, like in your first link:
<a id="link2128392960" onclick=" event.returnValue = false; return false;" href="/blog/comments/vote/up/1"/>
Maybe Firefox is mad at you for this.
You also have two tags with the same ID, which is also invalid HTML, but could also mean that your Javascript is looking for clicks on the second link, but that link gets eaten up on the first link because you never finished it.
Just throw out ideas, p
source to share