JavaScript的块不更新面板回发后运行的，更复杂 [英] Javascript block won't run after update panel postback, more complicated

问题描述

我在用户控件的工作称为TimePicker，

I'm working on usercontrol called 'TimePicker',

该用户控件使用jQuery的timepicker，并把它封装，使之简单在asp.net中使用。

This usercontrol utilizes the jquery timepicker, and wraps it to make it simple to use in asp.net.

我用一个简单的脚本jQuery的timepicker绑定到一个文本框：

I'm binding the jquery timepicker to a textbox using a simple script:

$('#<%= timepicker_textbox.ClientID %>').timepicker({
    onClose: function() {
        __doPostBack('<%= timepicker_textbox.ClientID %>', '');
    }        
});

我也选择了把这个文本框的更新面板内，以避免整页刷新后，用户选择了时间，造成回发。

I also chose to put this textbox inside an update panel, in order to avoid full page refresh after that the user chose a time and caused a postback.

问题是，在这之后的UpdatePanel重新加载，页面中的任何脚本不再运行，因此jQuery的timepicker不应用到文本框。

The problem is that after that updatepanel reloaded, any script in the page is not running again, and therefore the jquery timepicker is not applied to the textbox.

我设法通过添加以下code来解决这个问题：

I managed to fix this by adding the following code:

Sys.Application.add_load(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%= timepicker_textbox.ClientID %>_onControlLoad());
});


function <%= timepicker_textbox.ClientID %>_onControlLoad()
{
    $('#<%= timepicker_textbox.ClientID %>').timepicker({
        onClose: function() {
            __doPostBack('<%= timepicker_textbox.ClientID %>', '');
        }        
     });
}

这导致函数进行注册，然后在每个局部回传再次运行。

This causes the function to be registered and then run again on each partial postback.

的问题是，这解决了这一问题仅此特定timepicker，
而不是用于在同一页面中的任何其它元素！

The problem is that this fixed the problem only for this specific timepicker, and not for any other elements in the same page!

这是主要的问题给我，因为我有一个页面内多个timepicker，
并在一个timepicker选择的时候，其他人没有工作...

This is major issue to me, since I'm having more than one timepicker inside a page, And when choosing time on one timepicker, the others aren't working...

任何建议都欢迎。

谢谢，

埃坦。

推荐答案

一个简单的办法就是上课=timepicker添加到你想要的功能的任何文本框，然后用这个：

A simple solution is to add class="timepicker" to any text box you want the functionality on, and then use this:

$(document).ready(function(){
    $('.timepicker').timepicker({
        onClose: function() {
            __doPostBack($(this).attr('id'), '');
        }        
     });
});

在一般情况下，学会了从服务器驱动客户端行为得到了，因为这种心态不摇摆与jQuery的非常简单的选择/添加行为范式。整个更新面板/回传的事情是真的老同学为好，但如果必须使用，你必须注册功能我上面显示Sys.WebForms.PageRequestManager.getInstance（）。add_endRequest 像你在干什么。或者只是把 $（文件）。就绪更新面板内，可能工作了。

In general, learn to get away from driving client side behavior from the server because that mentality doesn't jive with jQuery's extremely simple select/add behavior paradigm. The whole update panel / postback thing is really old school as well, but if you must use that, you'd have to register the function I showed above with Sys.WebForms.PageRequestManager.getInstance().add_endRequest like you were doing. Or just put the $(document).ready inside the update panel, that might work too.

这篇关于JavaScript的块不更新面板回发后运行的，更复杂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！