关于 asp.net:partial postbacks 和 jquery

partial postbacks and jquery

我遇到了一个问题，在部分回发时，我的一些 jquery 已停止工作。我有一个带有两个单选按钮的页面，一个用于显示数据，另一个用于显示图片库。我使用 jquery 来显示和隐藏其中一个。

我还有一个模态弹出扩展器，它位于更新面板内。当我关闭 mpe 并切换回图片库时，一些代码停止工作。基本上它是一个画廊，可以在一定时间间隔内切换图像。还有一些缩略图可以做同样的事情(打开一个间隔)和它的缩略图不起作用。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<%@ Register Src="~/User_Controls/modify_image_table.ascx" TagName="IMG" TagPrefix="uc2" %>
<%@ Register Src="~/User_Controls/ImageLoaderUC.ascx" TagName="ImageLoader" TagPrefix="uc8" %>

<asp:RadioButtonList ID="selectionby" runat="server" Font-Bold="true" RepeatDirection="Horizontal"
RepeatColumns="2" CssClass="bodycopy">
</asp:ListItem>
</asp:ListItem>
</asp:RadioButtonList>

<uc2:IMG ID="IMG1" cssclass="bodycopy" runat="server" />

<uc8:ImageLoader ID="ImageLoader" runat="server" />

<ProgressTemplate>

Loading…
<img align="middle" src="../images/Ajax/loading_1.gif" />

</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

$(document).ready(function (e) {
// Execute the slideShow
slideShow(6000);
thumbInt(); // Assign int to thumbnail list items
clearShowClass(); // Prevents multiple li having .show

function clearShowClass() {
setTimeout(timedInterval, 1000);
};

function timedInterval() {
$(‘ul.slideshow li’).not(‘.show’).css("opacity", 0);
clearShowClass();
}

$(‘#footer img’).mouseover(

function () {
$(this).animate({
opacity: 3.7
})
});

$(‘#footer img’).mouseout(
function () {

$(this).animate({
opacity: 0.7
})
});

function thumbInt() {
for (i = 1; i <= $(‘ul.slideshow li’).length; i++) {
$(‘#footer .thumbnail’ + i).bind(‘click’, { iteration: i }, function (event) {
$(‘ul.slideshow li’).removeClass(‘show’).css("opacity", 0).add($(‘ul.slideshow li:nth-child(‘ + event.data.iteration + ‘)’).addClass(‘show’).css("opacity", 0.0).animate({
opacity: 1.0
}, 1000));

$(‘#footer li’).removeClass(‘highlight’).add($(‘#footer li:nth-child(‘ + event.data.iteration + ‘)’).addClass(‘highlight’).add($(‘#footer li:nth-child(‘ + event.data.iteration + ‘) img’)));

});
};
};
});

function slideShow(speed) {

//Set the opacity of all images to 0
$(‘ul.slideshow li’).css({
opacity: 0.0
});

//Get the first image and display it (set it to full opacity)
$(‘ul.slideshow li:first’).css({
opacity: 1.0
}).addClass(‘show’);

//Get the first thumbnail and change css
$(‘#footer li:first’).css({
opacity: 1.0
}).addClass(‘highlight’);

//Call the gallery function to run the slideshow
var timer = setInterval(‘gallery()’, speed);

//Pause the slideshow on mouse over content
$(‘#footer, ul.slideshow’).hover(

function () {
clearInterval(timer);
},

function () {
timer = setInterval(‘gallery()’, speed);
});
}

function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(‘ul.slideshow li.show’) ? $(‘ul.slideshow li.show’) : $(‘#ul.slideshow li.first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr(‘id’) == ‘slideshow-caption’) ? $(‘ul.slideshow li:first’) : current.next()) : $(‘ul.slideshow li:first’));

//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 4.0
}).addClass(‘show’).animate({
opacity: 4.0
}, 1000);

// Hide the current image
current.animate({
opacity: 0.0
}, 1000).removeClass(‘show’);

//if no thumbnails have the highlight class, grab the first thumbnail
var currentThumb = ($(‘#footer li.highlight’) ? $(‘#footer li.highlight’) : $(‘#footer li:first’));

var nextThumb = ($(‘#footer li:last’).hasClass(‘highlight’)) ? $(‘#footer li:nth-child(1)’) : $(‘#footer li.highlight’).next($(‘#footer li’));

nextThumb.addClass(‘highlight’);
currentThumb.removeClass(‘highlight’);
}

基本上我想知道更新面板会如何影响 $(document).ready？

谢谢

$(document).ready 中的代码不会再次被调用以进行部分回发；如果您需要 $(document).ready 函数中的某些功能，那么我建议将这些代码重构为一个函数(例如 initAll())并在部分回发后，从服务器端(在您的事件处理程序中)使用 ClientScriptManager.RegisterClientScriptBlock 函数调用该功能如：

1
2
3
4

…
// last line in your partial postback handler

ScriptManager.RegisterClientScriptBlock(Upd1,typeof(UpdatePanel),"__updp__","initAll();", true);

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268793.html

关于 asp.net:partial postbacks 和 jquery

partial postbacks and jquery

相关推荐

发表回复