Loading Ajax for each node in Drupal view with nid argument

Question

I have a view of teasers in Drupal. Each teaser has a click() handler which is supposed to send its node id as an argument to load a view via ajax. I've tried 2 different jquery approaches, but am having no luck.

The first example sends the nid for only the last node in the view. So that no matter what teaser I click only the nid for the last teaser gets sent.

Drupal.behaviors.ajaxview = function(context) {
    $(".ajaxclick").click(function(){
    $(".container").load(Drupal.settings.basePath + "myajax/" + <?php echo $node->nid;?>;);
});
}

In the second approach, a click on a button of class "ajaxview" will send the correct nid but but instead of sending for just the one clicked button to it's corresponding div, it will send a nid for EACH button with a class of "ajaxview" into EACH div with a class of "container". So I end up with the contents of every single view generated from every single teaser into every single div. WAAAAY too much!

$(document).ready(function() {
$(".ajaxclick").click(function(){
    $(".container").load(Drupal.settings.basePath + "myajax/" +  <?php echo  $node->nid; ?>);

});
});

Here is the button;

<button class="ajaxclick">click</button>

And the div:

<div class="container"></div>

Any idea how I can get each click to send the nid of that teaser clicked upon as the argument and load only that view?

Answer 1

Your code is javascript. You can't use:

<?php echo  $node->nid; ?>

You will have to use jQuery approach to get the nid you want. For example, if you have the nid in a hidden filed like:

<input type="hidden" id="ID" value="100" />

You can use the following jQuery to get the nid:

var nid = $("#ID").val();

Answer 2

Turns out I was able to get it working using a revision of Ionut.A's suggestion;

Drupal.behaviors.ajaxview = function(context) {
    $(".ajaxclick").click(function(){
    var nid = $(".mynid").eq($('.ajaxclick').index( $(this) )).val();
    $('.container').eq($('.ajaxclick').index( $(this) )).load(Drupal.settings.basePath + 'myajax/' + nid);
    return false;
});
}

and for the html;

<input type="hidden" class="mynid" value=<?php echo $node->nid;?> />

I had to use class instead of id as the id would only return the id from the first node.