2010-08-07 5 views
2

내가이 jQuery 플러그인을 통해 아약스 툴팁을하려고 : http://jquery.bassistance.de/tooltip/demo/jQuery를 아약스 툴팁

좀 이런 일이 : 나는 비동기 Ajax 요청 함께 할

<p id="foottip"> 
    <span href="/last_votes/6">footnote</span>. 
</p> 

<script type="text/javascript"> 
    $(function() { 
    $("#foottip span").tooltip({ 
     bodyHandler: function() { 
     //dj ajax here and cache 
     var tip = '' 
     var url = $(this).attr("href"); 

     $.ajax({ 
      url:url, success:function(html){tip = html;}, async:false 
     }); 

     return tip 
     }, 

     showURL: false 
    }); 
    }) 
</script> 

, 그러나 해결책이있다 문제, 때로는 페이지를 리디렉션합니다. 그것은 버그 인 것 같습니다. 비동기 요청을 사용하여 Ajax 툴팁을 어떻게 처리 할 수 ​​있습니까? 결과를 비동기 적으로 툴팁에 전달할 방법을 찾을 수 없습니다.

답변

2

예, 코드가 비동기 방식으로 작동하지 않습니다

var tip = '' 
var url = $(this).attr("href"); 
$.ajax({ 
    url:url, success:function(html){tip = html;}, async:true 
}); 

// -- The problem here is that your bodyHandler function will return 
// -- immediately, before the AJAX callback is called. 
return tip 

이 문제를 해결하기 위해, 당신은 당신의 $.ajax 요청의 success 콜백 내부에 도구 설명 렌더링 코드를 삽입 할 수 있습니다.

+0

아약스가 호출 동기 (비동기 : 거짓) 위의 문제에 적용

. 그것은 돌아올 때까지 기다린다. 그러나 슬픈 것에 따라 그것은이 길에서 버그를 가지고있다. 나는 툴팁 초기화를 succes에 넣는 방법을 이해하지 못한다. 툴팁이 내 아약스 요청을 호출해야하기 때문입니다. – Evg

+0

조금 이상합니다. 처음으로 호버 이벤트에서 내 아약스를 바인딩해야하고 돌아 오는 툴팁 초기화를 수행해야합니다.하지만 시도해 보겠습니다.) – Evg

+0

onhover가 툴팁에서 작동하는지 확실하지 않습니다. 나는 마우스를 영역 위로 이동하고, onhover가 완료되고, ajax가 처리를 수행하고, init 툴팁을 나타내지 만, 툴팁을 가리 키지 않습니다 (allready가 완료 되었기 때문에). 그리고 실제 결과가 없습니다. 나는 tooltip init이 반드시 첫 번째 여야한다고 생각한다. – Evg

3

나는 같은 문제에 봉착했다. bodyHandler 콜백에 동적으로 요소를 생성 한 다음 AJAX 호출에서 요소를 동적으로 업데이트하여 원하는 효과를 얻는 영리한 기법 here을 발견했습니다.

$("#foottip span").tooltip({ 
    bodyHandler: function() { 
     var url = $(this).attr("href"); 
     var tip = $("<span/>").html("loading tip..."); 

     $.ajax({ 
      url: url, 
      success: function(html){ tip.html(html); } 
     }); 

     return tip; 
    }, 
    showURL: false 
});