UpdatePanel을 사용한 JQuery 도구 도움말 설명

문제점은 asp.net UpdatePanel 컨트롤에서 새로 고쳐지는 툴팁이있는 항목에 JQuery 도구 설명 도구 플러그인 (http://flowplayer.org/tools/tooltip.html)을 사용하는 것과 관련이 있습니다. 문제는 툴팁이 추가 된 후 UpdatePanel에서 부분 포스트 백이 발생하면 툴팁이 업데이트 된 UpdatePanels에서 작동하지 않는다는 것입니다. 툴팁은 부분 포스트 백이 될 때까지 훌륭하게 작동합니다. 다음은 페이지의 이미지 (및 다른 컨트롤)에 툴팁을 추가하는 방법의 예입니다. 일부 코드는 간단하게하기 위해 ommitted되었습니다UpdatePanel을 사용한 JQuery 도구 도움말 설명

매우 흥미

<script type="text/javascript"> 
//--call this to add tooltips to any element with a class of "tooltipHandle" 
function createTooltip(){ 

    // select all desired input fields and attach tooltips to them 
    $(".tooltipHandle").tooltip({ 
    // place tooltip on the right edge 
    position: ['center', 'right'], 
    // a little tweaking of the position 
    offset: [-2, 10], 

    // use a simple show/hide effect 
    effect: 'toggle', 

    // custom opacity setting 
    opacity: 0.7 
    }); 

} 

//--add tooltips after every postback (including partial AJAX postbacks) 
function pageLoad(sender, args) { 
    createTooltip(); 
} 
</script> 

<html> 
<!-- assume this UpdatePanel is updated from the code behind--!> 
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="upPanelPrivateMediaList"> 
    <ContentTemplate> 
    <img class="tooltipHandle" src="/images/questionMark.gif"/> 
    <div class="tooltip">SOME GREAT TOOLTIP CONTENT</div> 

    </ContentTemplate> 
</asp:UpdatePanel> 

</html>

것은 내가 처음으로 페이지가로드 ") (createToolTip"를 호출하지 않는 경우, 부분 다시 게시가 제대로에 툴팁을 추가 할 것입니다 내 이미지와 두 번째 다시 게시 할 때까지 작동합니다. 즉, 툴팁이 이미있는 경우 부분 포스트 백이 툴팁을 위로 올리는 것을 의미합니다. 부분적인 포스트 백 후에 createToolTip()을 수동으로 호출하면 툴팁이 다시 작동하지 않습니다.

아이디어가 있거나 설명이 필요한 경우 알려주십시오. 미리 감사드립니다 !!

출처

2009-09-04 jakejgordon

jakejgordon으로 말하면 캐싱 요소는 부분 업데이트 후에 더 이상 같은 요소가 아니기 때문에 작동하지 않습니다.

이벤트 위임 모델을 사용 해본 적이 있습니까? 부분 업데이트가있을 때마다 바인딩 이벤트를 유지할 필요가 없습니다. 여기에 흥미로운 기사입니다 - http://www.learningjquery.com/2009/12/simple-tooltip-for-huge-number-of-elements

출처

2009-12-23 03:16:38

내가 열어 본 몇 가지 오래된 질문을 정리하고 .live()를 사용하는 것이 올바른 대답 (현재 내가 아는 바를 알고 있음)이라고 생각합니다. 질문을 마치자! – jakejgordon

나는 다음과 같이 툴팁의 .js 파일 (tools.tooltip-1.1.0.js)을 변경할 필요 끝났다 :

// jQuery plugin implementation 
$.prototype.tooltip = function(conf) { 

// return existing instance 
var api = this.eq(typeof conf == 'number' ? conf : 0).data("tooltip"); 
//-- Caching up the api does not work with .NET AJAX postbacks. 
//if (api) { return api; }

길고도 짧은 이야기, 그것은 이후의 코드 이전에 반환 된

있는 설정 것 요소가 업데이트 패널에 의해 새로 고쳐 졌음을 알지 못했기 때문에 툴팁. 우리는이 문제로 인해 약간의 성능 저하를 겪었지만 지금은 문제를 해결했습니다.

출처

2009-09-04 20:34:09 jakejgordon

당신은 본문 섹션 내부에이 코드를 붙여 넣을 수 있습니다 :

<script> 
$(document).ready(function() { 
    $("#demo a[title]").tooltip(); 
}); 
</script>

는 .cs 파일 안에 아래 코드를 붙여 넣기 :

protected void Page_Load(object sender, EventArgs e) 
{ 
    string javaScriptFunction = 
     "$(document).ready(function() {" + 
       "$('#demo a[title]').tooltip()" + 
     "});"; 
    Page.ClientScript.RegisterStartupScript(typeof(Page), "ajaxTrigger", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", true); 
    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "EndRequest", "function EndRequestHandler(sender, args){" + javaScriptFunction + "}", true); 
}

출처

2012-07-10 07:30:27 VTechnology

-1

당신은 CausesValidator을 변경해야 TextBox 또는 ... 업데이트 패널의 해당 에서 거짓으로 True로, 그냥 그것.

<asp:TextBox ID="TextBox4" runat="server" ToolTip="tooltip" " AutoPostBack="True" CausesValidation="True"></asp:TextBox>

출처

2013-07-01 15:45:36

UpdatePanel을 사용한 JQuery 도구 도움말 설명

답변

관련 문제