2011-07-22 5 views
1

この質問はこの1つに似ていますCluetip for every dynamically generated row in tableしかし、私は私のシナリオでどのように適用すべきかわかりません。私のテーブルでテーブルデータを持つcluetip ajax

  1. すべての行は、showフィードバックリンクcandidate_id上​​のmouseoverイベントで「ショーのフィードバック」
  2. という名前のアンカーリンクが適切な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> 

誰がどんな考えを持っていますか?

ありがとうございました

これは私のために働いた。これは私のような初心者に役立つかもしれない。私は2つの過ちを参照してください

<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> 

答えて

1

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:&nbsp;"+candidate_name); 
    $(candidate_name).remove(".title"); 
    } 

}); 

HTML。

1) '.feedback_link'セレクタで引用符を使用していません。

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

2)あなたはこの建設に予想外の変数を取得します:

  1. は、データIDとデータ名の属性を追加します。

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

    はあなたがここに実際の結果を得るための3つの方法がありますそれらをリンクして$ .data関数を使ってIDと名前を取得するために使用します。

  2. このリンクに関連するポイントは
  3. 使用ひどい建設

    $(この).parent( ').table_cell' ことを、リンクするのrel属性を追加します。親()。「(見つける。table_cell> .candidate_id ')。val();

希望すると、これが役立ちます。

関連する問題