Cluetip AJAX с данными таблицы

Question

Этот вопрос похож на этот Cluetip для каждой динамически генерируемой строки в таблице , но я не знаю, как мне применить в моем сценарии.

В моей таблице:

1. У каждой строки есть одна якорная ссылка с именем "show feedback"
2. При наведении курсора на ссылку show link на вид должна быть отправлена ​​ссылка Candid_id.функция с использованием ajax
3. Соответствующий отзыв должен отображаться в cluetip

Вот мой код:

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(){
        $(.feedback_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>

У кого-нибудь есть идеи?

Спасибо

Этот работает для меня.Может быть, это поможет любому новичку, как я.

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>

Answer 1

Я вижу 2 ошибки.

1) У вас нет кавычек в селекторе «.feedback_link».

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

2) Вы получите неожиданные переменные в этой конструкции:

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

У вас есть 3 способа получить фактический результат здесь:

1. Добавить данныеАтрибуты -id и data-name связывают и используют их для получения идентификатора и имени, используя функцию $ .data.
2. Добавить атрибут rel к ссылке, которая указывает на связанную с этой ссылкой '.table_cell'

3. Использовать ужасную конструкцию

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

Надеюсь, это поможет вам.