If I am scrolling my page and the update gets triggered by the timer the page/scrollposition slightly jumps/jitters/lags. I am using MaintainScrollPositionOnPostBackon my pages and it works fine if I am stationary somewhere on the page, no jump/jitter/lag on update then. Any ideas on how to fix it while scrolling too? Maybe pause the timer while scrolling if possible?
There is workaround for that issue.
You pass to controller element you had focus on and then on page load you focus back to that element.
Find focus:
var focusedElement = document.activeElement;
focusedElement you send to server (controller or whatever) via post/get or something.
Focus back on page load:
$(document).ready(function() {
$("#" + recivedFocusedElement).focus();
}
recivedFocusedElement you recive from server.
Found a solution over here. For lazy people:
<script type="text/javascript">
window.scrollTo = function( x,y )
{
return true;
}
</script>
Just put this in your .aspx file.
I want to load two repeater controls after the asp.net page is loaded completely. These two controls are populated by a button click event. Instead of the button being clicked by the user, I want that to be clicked by an ajax call - or by any other means - after the page is loaded.
I have followed the technique described here: http://forums.asp.net/t/1452988.aspx?how+to+load+gridview+after+the+page+is+completely+loaded.
Essentially it uses Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded); Once the pageLoaded event handle is obtained, it uses javascript to call the button click event. While it sort of works, the issue is that the page loading and the button click events are executed repeatedly. Because of this, the page flickers constantly. Please let me know how to resolve this issue.
Note: The site has a master page which has the scriptmanager.
<asp:UpdatePanel>
...More code here...
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
var hdnLoadedPage = $get('<%= hdnLoaded.ClientID %>');
var btnApplyFilter = $get('<%= btnFilter.ClientID %>');
if (hdnLoadedPage != 'Yes') {
btnApplyFilter.click();
}
}
</script>
</asp:Content>
Thanks
I am looking for a way to change page url (change one of the url key's value) when the user refreshes the page. I am doing this to reflect changes on the contents of the page. I have tried several methods but they all have a loop problem. Below is one of the methods:
In my html page:
<body onLoad="CheckPageLoad();">
<input type="hidden" name="trial" id="trial" value="hello" />
</body>
In the page.asp page: (inside a script tag)
function CheckPageLoad() {
if ($("#trial").val() == "hello") {
// This is a fresh page load
alert('Load');
$("#trial").val("hi");
} else {
// This is a page refresh
window.location = url;
alert('Refresh');
}
}
Issues:
Every time the page is refreshed, the Load alert is always displayed. I thought the load is done once. It looks like every time the page is refreshed, it reloads so the value always remains to be hello.
I tried using the script tag only and the new url is opened but keeps looping. (This is the main problem)
Any suggestion to update the above method or use another method to do the refresh is appreciated. Below are other methods I also tried:
window.onbeforeunload = unloadPage();
function unloadPage() {
//do something
//works but loops
}
Thanks
I put the following code into a basic page and it demonstrates why you are getting the described behaviour:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function CheckPageLoad() {
if ($("#trial").val() == "hello") {
// This is a fresh page load
alert('Load');
$("#trial").val("hi");
} else {
// This is a page refresh
alert('Refresh');
window.location = window.location + '?id=1';
}
}
</script>
</head>
<body onLoad="CheckPageLoad();">
<input type="hidden" name="trial" id="trial" value="hello" />
</body>
</html>
When you set the window.location it changes the url (well duh!) which therefore means you are loading a new page. When the page is refreshed you get a "Refresh" alert before a "Load". This demonstrates that the page is posting back first, but the onload event causes the page to navigate to another location, therefore loading it again. It is my understanding that updating anything in the URL ultimately is a new request/newly loaded page.
You might find the following useful regarding the viewstate in asp (seeing as you suggested you are using an asp page): http://msdn.microsoft.com/en-us/library/ms972976.aspx
My suggestion would be to completely remove the window.location = url; part of your code in favour of looking at the data which was posted back instead. This means that you aren't unnecessarily loading the page twice on postback and allows you to access the data from any updated inputs.
I have an update panel with a runat server div inside,
this div isn't shown in the first load of the page. I used to show it after user input the search key then reload the update panel which contain the div and fill div controls then show it.
I have a CheckBox inside this div tag and I need to get the click event of this check box with jquery
I try to use direct .click or .live but all doesn't work !!
Any help will be appreciated.
Use this code
$(document).ready(function()
{
//This will add one function to be called on every request of the update panel
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler()
{
$('#checkboxID').change(function(){
//Your functionality
});
}
You need to introduce javascript into the page to simulate the click event again. Page.RegisterClientScriptBlock or Page.RegisterStartUpScript should do it.
or
place this inside the updatepanel
<script type="text/javascript">
Sys.Application.add_load(your jquery function);
</script>
I've just determined using Firebug that when Fancybox window is created it actually takes all of my ASP.NET controls (contained in DIV tag) and puts them outside FORM tag. So I guess this is the reason why then ASP.NET button doesn't do anything - it is placed outside form.
So, do you have any suggestions how I can prevent this (or make that ASP.NET button work), other than using completely different modal dialog?
EDIT: OK, people are reporting that some of the proposed fixes are working for them on certain versions. So, be sure to read all of the answers / scroll to the bottom for how to fix this issue on different Fancybox versions.
You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):
$('body').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
to
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
For anyone needing a simple answer to this problem using Fancybox version 2 theres a much easier way of doing it. All you have to do is add parent: "form:first" in the code eg
$(document).ready(function () {
$(".various").fancybox({
parent: "form:first",
fitToView: true,
width: '300px',
height: '100px',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
modal: false
});
});
then this will append the fancybox elements in the dom inside the form tag, rather than inside the body tag.
Fancybox Version 2.1.4
Change these 2 lines
Around Line 2069 :
document.all && !document.querySelector ? $('html') : $('body');
to
document.all && !document.querySelector ? $('html') : $('form:first');
and around Line 1960 :
this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');
to
this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');
You could also use appendTo but that's up to you. In my case I needed prependTo.
I've been trying to figure out this problem all week, I haven't really had any luck
I just came across this article
http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html
That explains how to get postback working with the jQuery UI Dialog box.
If it's not 100% necessary to use fancy box then this method is definitely worth a try, it's saved me a lot of hassle today.
Without altering the FancyBox source, put this after the FancyBox script (outside any load events!!!):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">
// Override $.fancybox.init to fix ASP.NET PostBack bug;
var fancyboxInitOld = $.fancybox.init;
$.fancybox.init = function () {
fancyboxInitOld.apply(arguments);
$("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
};
// Your code ...
</script>
jquery.fancybox-1.3.4.js line 1040
//$('body').append(
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
Works (my asp:Button does postback) for me on FF and IE9, thanks for the solution
The above update didn't work for me, the fancybox was still added outside the form. I then commented out those 6 lines in jquery.fancybox-1.3.2.js and found they weren't being used at all in my code.
I did a search on 'body' in the fancybox js files and changed it to 'form' in:
jquery.fancybox-1.3.2.js (ln 484)
jquery.fancybox-1.3.2.pack.js (ln 27, ln 41)
The fancybox is now getting added to the form and the server controls are working.
Fancybox Version: 2.1.2
Line 1782 of jquery.fancybox.js
Change this:
this.el = document.all && !document.querySelector ? $('html') : $('body');
To this:
this.el = document.all && !document.querySelector ? $('html') : $('form:first');
I use Fancybox 1.3.4 to show an aspx page as a popup page in fancybox iframe. But button in the popup page does not cause postback. I did not change anything as you said before. Rather I did the following.
function check()
{
var validated = Page_ClientValidate();
if (validated) {
__doPostBack('<%=bur.ClientID%>','');
parent.$.fancybox.close();
return true;
}
else
{
return false;
}
}
<asp:Button ID="bur" runat="server" Text="ser"
OnClientClick="check()" />
protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.
}
Fancybox 1.3.4 actually does postback.
But if is closed in OnClientClick that is before server side click event it wont postback .So The above is the solution to this problem.(Adding doPostBack in javascript function).
Normally Fancybox 1.3.4 does postback without any change in its .Js files. But to close it , need to write this line ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); in server side click event. Only then both serverside event gets called and fancybox also closes.
But Fancybox 2.1.3 (latest) does postback event after it is closed in OnClientClick.
If refreshing the parent is a solution which serves the purpose, you can refresh onClosed:
$(".fancybox").fancybox({
'onClosed': function() {
parent.location.reload(true);
}
});
Without any change in fancybox js library file, what works for me was below,
$('.your-selector').fancybox({
afterShow: function () {
$('.fancybox-overlay').appendTo('form');
}
});
I have moved the fancybox div inside the form tag, and now, server side button is working like a charm :)
All the best.. I hope this will work for you too. .:)
You don't need to change any code or any library... Just try this..
$('.fancybox').fancybox({
parent: "form:first", // jQuery selector
});
Heres the worst solution possible, however it worked for me. I needed faceybox and codebehind at the same time. Setup your fancy box to load when button clicked. Then onClosed pass values to another C# page and do the code behind on Page Load.
<script type="text/javascript">
$(document).ready(function () {
$(".fancy").fancybox({
onClosed: function () {
window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
"&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
"&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
}
});
});
and then just the "class=" thing here:
<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />