This question is similar to this one Cluetip for every dynamically generated row in table but i don't know how should i apply in my scenario.

In my table:

1. Every row has one anchor link named "show feedback"
2. On mouseover event on show feedback link candidate_id should be send to the view function using ajax
3. The appropriate feedback should show in cluetip

Here is my code:

HTML:

<td>
<a href="/recruit/show_feedback/ class="feedback_link">Show Feedback</a>
</td>
<td class="table_cell">
<input type="hidden" name="candidate_id" class="candidate_id" value="1">

<input type="hidden" name="candidate_name" class="candidate_name" value="abc&nbsp;xyz">
</td>

jquery:

<script type="text/javascript">
    $(document).ready(function(){
        $(.f开发者_开发问答eedback_link).mouseover(function(){
        var candidate_id=$('.candidate_id').val();
        var candidate_name=$('.candidate_name').val();
        var level=$("#level_id").val();
        $.getJSON("/recruit/viewable_feedback", 
            {level:level,candidate_id:candidate_id}, 
            function(user_feedback){
                $('td>a').attr('title','Candidate:&nbsp;' + candidate_name+ '&nbsp;|' + user_feedback);

                $('td>a').cluetip({
                    closePosition : "title",
                    sticky : false,
                    mouseOutClose : true,
                    tracking:true,
                    waitImage: true, 
                    ajaxCache:false,
                    splitTitle: '|'
                });
           }); 
      });
});
</script>

Does anyone have any idea ?

Thanks

This one worked for me. May be this will help any newbie like me.

var level=$("#HR"+candidate_id).children("input").val();

$('.show_link').cluetip({
waitimage:true,
 mouseOutClose:true,
 tracking:true,
 ajaxSettings : {
      type : "GET",
      data : "level="+level+"&candidate_id="+candidate_id
    },
    ajaxProcess : function (user_feedback) {
    user_feedback=user_feedback.replace(/^"|"$/g,"");
     return user_feedback;
    },
    onShow : function (ct, c) {
    $("#cluetip-title").prepend("Candidate: "+candidate_name);
     $(candidate_name).remove(".title");
    }

});

HTML

<td id="HR{{candidate_record.id}}">
<a href="" class="show_link" id="{{candidate_record.id}}|{{candidate_record.first_name}}&nbsp;{{candidate_record.last_name}}|title" rel="/recruit/viewable_feedback/">Show Feedback</a>
<input type="hidden" name="level" value="4" id="level_id">
</td>

I see 2 mistakes.

1) You haven't quotes in '.feedback_link' selector.

$(.feedback_link).mouseover(function(){

2) You will get unexpected variables in this construction:

var candidate_id=$('.candidate_id').val();
var candidate_name=$('.candidate_name').val();
var level=$("#level_id").val();

You have 3 ways to get actual result here:

1. Add data-id and data-name attributes to link and use them to get id and name using $.data function.
2. Add rel attribute to link, that points to related to this link '.table_cell'

3. Use terrible construction

   $(this).parent().parent().find('.table_cell > .candidate_id').val();

Hope this will help you.