2009-09-04 5 views
2

Моя проблема связана с использованием плагина Tooltip инструментов JQuery Tools (http://flowplayer.org/tools/tooltip.html) на элементах с подсказками, обновленными в элементах управления UpdatePanel asp.net. Проблема заключается в том, что после добавления всплывающих подсказок любая частичная обратная передача из UpdatePanel заставит всплывающие подсказки перестать работать в любой обновленной обновленной папке. Всплывающие подсказки отлично работают до частичной обратной передачи. Ниже приведен пример того, как я добавляю всплывающие подсказки к изображениям (и другим элементам управления) на странице. Некоторый код был пропущен для простоты:JQuery Tools Tooltip with UpdatePanel

<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() вручную после частичной обратной передачи ничего не делает, чтобы всплывающая подсказка снова работала.

Пожалуйста, дайте мне знать, если у вас есть идеи или требуется разъяснение. Заранее спасибо!!

ответ

1

Как сказал jakejgordon, элементы кеширования не будут работать, потому что после частичного обновления они уже не одни и те же элементы.

Считаете ли вы использование модели делегирования событий? Вам не нужно связывать события каждый раз, когда происходит частичное обновление. Вот интересная статья - http://www.learningjquery.com/2009/12/simple-tooltip-for-huge-number-of-elements

+0

Я убираю старые вопросы, которые у меня были открыты, и я считаю, что использование .live() - правильный ответ (известный тем, что я знаю сейчас). Закрывая вопрос! – jakejgordon

1

Я закончил тем, что изменить всплывающую подсказку .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; } 

Короче говоря, он возвращался до последующего кода, который будет установка подсказка, потому что она не понимала, что элементы были обновлены панелью обновления. В то время как мы, вероятно, принимаем небольшой удар по производительности, он действительно решил проблему на данный момент.

2

Вы можете вставить этот код в секции кузова:

<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); 
} 
-1

Вы должны изменить CausesValidator из TextBox или ... что на Updatepanel от False to True, Только это.

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