ASP.Net Post-back Breaks jQuery FancyBox
I have a FancyBox help link, on an ASP.Net aspx page, that is registered as such:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
});
</script>
It works fine, but after 2 post backs (still works after 1) an exeption is thrown here (in fancybox.js) saying 'wrap' is not an object, when I click the help link:
$.fancybox.center = function() {
var view, align;
if (busy) {
开发者_JAVA百科 return;
}
align = arguments[0] === true ? 1 : 0;
view = _get_viewport();
if (!align && (wrap.width() > view[0] || wrap.height() > view[1])) {
return;
}
After the third post back, an error is thrown before the page is completely loaded within the jquery.js file Microsoft JScript runtime error: Object doesn't support this property or method
pointing no where in peticular.
Any ideas why post backs would be breaking fancybox?
The solution is add "lazy_loader".
This will load your fancybox classes in each postback
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(lazy_loader);
lazy_loader();
});
function lazy_loader() {
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
}
</script>
This should work just fine
精彩评论