I've got a view of teasers; each teaser has 3 clickable <a>
elements:
"morelink" toggles an extra row in a table.
"noderef" loads the referenced node into a div.
"ajaxview" sends the node id as an argument to ajax load a view into a
<div>
. This view contains a view of teasers which in turn each have 3 clickable<a>
elements thus creating a nested view of teasers which in turn each have 3 clickable<a>
elements.
This is the JavaScript code.
Drupal.behaviors.morelink = function(context) {
$("a.morelink").click(function (e) {
e.preventDefault();
$('.xtrarow').eq( $('a.morelink').index( $(this) ) ).toggle();
});
}
Drupal.behaviors.ajaxview = function(context) {
$("a.ajaxclick").click(function(){
var nid = $(".mynid").eq($('a.ajaxclick').index( $(this) )).val();
$('.container').eq($('a.ajaxclick').index( $(this) )).load(Drupal.settings.basePath + 'myajax/' + nid);
return false;
});
}
Drupal.behaviors.noderef = function(context) {
$("a.nrefclick").click(function(e){
e.preventDefault();
var nref = $(".mynref").eq($('a.nrefclick').index( $(this) )).val();
$('.container').eq($('a.nrefclick').index( $(this) )).load('node/' + nref );
return false;
});
}
This is the HTML code.
<input type="hidden" class="mynref" value=<?php print $node->field_noderef[0]['nid']; ?> />
<a class="nrefclick" href = "<?php print url('node/' . $node->field_noderef[0]['nid']); ?>">
<img src="http://mysite/smallpinkarrowback.png" ALT="Back"></a>
<a class="morelink" href = "<?php print url('node/' . $node->nid); ?>">
<img src="http://mysite/smallyellowarrowdowninfo.png" ALT="Forward"></a>
<a class="ajaxclick" href="<?php print url('myajax/' . $node->nid); ?>">
<img src="http://mysite/smallpinkarrowforward.png" ALT="Forward"></a>
The behavior is erratic: The "morelink" works consistently and is fine; the ajaxview works intermittently, and seems to load ok for the first few clicks, but once you've clicked a few, the JavaScript stops working.
Can anyone spot the problem?