I've noticed that after using <asp:panel> or <asp:UpdatePanel> my page is jumping/scrolling down after the page has finished rendering. Also after a asynchronous post back, the page moves to the same place instead of staying right where it is. I don't have any focus set in the code behind of my page.
It's probably worth mentioning that on page load I am updating some asp.net controls within the <asp:UpdatePanel>. Mostly database driven dropdowns.
I'm wondering if anyone knows of any reason why a page would jump down. Is there some default focus or something that happens to certain asp.net controls?
Thanks in advance for your help,
Things I've Tried:
How to keep whole page scroll position after asynchronous postback
Update1:
I've used David Stratton script to get the correct position. However the page still jumps down then jumps back to the correct position. My goal is to have the page not jump at all.
This is the mark-up of my page, there are control between these.
<asp:UpdatePanel ID="UpdatePanel9" runat="server">
<asp:Panel ID="tagpanel" runat="server" DefaultButton="btnAddTag">
</asp:Panel>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<asp:Panel ID="pnlIncidentInfo" runat="server">
</asp:Panel>
</asp:UpdatePanel>
Note The issue described here is NOT related to the MaintainScrollPositionOnPostback. I've had this issue myself and it's related to the UpdatePanel control.
From
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
First, set up a div just inside the ContentTemplate named "scrollDiv".
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="scrollDiv">
The rest of your page content goes here.
</div>
</ContentTemplate>
<asp:UpdatePanel>
and then the JavaScript, as the article says, goes after the ScriptManager on your page
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
</script>
Perhaps you're using MaintainScrollPositionOnPostBack?
Related
I have RadioButtonList & Listvie in my page. I am using update panel to avoid postback Now my radioButtonList works as filter for listview. My Problem is in my radiobuttonList I have to use clientIDmode=static but if I do that then my updatepanel has no use since there is full postback when radiobuttonList gets changed. How to solve this problem without removing clientIdmode=static. I seen some solution for kind of same post but really didn't understand. Please help me.
My code has following structure.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="areasList" CssClass="mark" AutoPostBack="true" runat="server" ClientIDMode="static" RepeatLayout="Flow">
</asp:RadioButtonList>
ListviewHere
</ContentTemplate>
</asp:UpdatePanel>
There is an issue with your script.
You script is not being called after postback.
So use as below,
<script type="text/javascript">
// below will execute after ajax postback
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//script
}
// executes after page load first time
//script
</script>
You can set the ClientIDMode of the RadioButtonList to AutoID (or not specify the attribute in the markup if that is the default value) and use a binding expression in client code to get the actual ID of the control:
$("#<%= areasList.ClientID %>")
or
document.getElementById('<%= areasList.ClientID %>')
I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().
Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.
How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?
Here is a mini project that shows the problem:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
edit
</div>
<div id="edit-div" style="display:none; border: 2px black solid;">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script>
$(document).ready(function(){
$('#edit-link').on('click', function () {
$('#edit-div').show();
});
});
</script>
The code for the submit button:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.UtcNow.ToString();
}
The simplest solution to this problem would be: -
don't use jQuery to show edit-div
make edit-div a server control
convert your edit to an <asp:LinkButton> control, and in its server-side click event, show your edit div
The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.
There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.
Hope that helps.
Within an asp.net webform I have some jquery that controls the positioning of elements on the page. Since this is a webform and some of these controls talk to the server to get jquery to work I have the controls nested in an AJAX UpdatePanel to prevent postbacks from resetting my controls.
aspx:
<asp:UpdatePanel ID="searchupdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="searchholder" >
<div id="searchoptions">
Close Advanced Search
<br />
Filters
</div>
<div id="search" class="searchcontainer">
<asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" />
<div class="buttons">
<asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch" OnClick="btnSearch_Click" />
<asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" />
<asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" />
</div>
</div>
<div id="divAdvSearch">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="divBody">
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="divSearchResults" visible="true" runat="server">
<uc:SearchResultsControl ID="SearchResultsControl" runat="server"></uc:SearchResultsControl>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When the search button is clicked I modify the css class for the search control to reposition my search div layer which is the update panel "searchudpatepanel"
searchcontrol.js
$(function () {
$("#searchupdatePanel").addClass("searchmenubar");
$("#btnClose").hide();
});
$(function () {
$("#btnSearch").click(function () {
$(".searchmenubar").animate({ "margin-top": "5px" }, "fast");
$("#btnAdvanceSearch").show();
$("#btnFilters").show();
$("#btnClose").hide();
$("#divAdvSearch").hide();
alert("search");
});
});
The button click also calls serverside code to retrieve and populate the results within a user control called SearchResultsControl ( second update panel)
Where I am confused is when the searchResult Control is loaded with the results all references to the jquery classes are lost. As a result every div element that is hidden or button click that is called ceases to work. Working through this in debug I can see when the user control is called the Page_Load for the default.aspx file is invoked as second time. I assume this partial load is dropping reference to the js files I just don't know how to correct this.
I tried a test within the page load using IsStartupScriptRegistered to see if the js was getting called
string csname = "PopupScript";
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
if (!cs.IsStartupScriptRegistered(cstype, csname))
{
StringBuilder cstext1 = new StringBuilder();
cstext1.Append("<script type=text/javascript> alert('Hello World!') </");
cstext1.Append("script>");
cs.RegisterStartupScript(cstype, csname, cstext1.ToString());
}
Here on the initialization of the page I would see the pop up occur however when the UserControl was loaded I would pass through this a second time in the page load but the alert never displayed( I assume this is due to a partial load so the browser thinks the script is already registered).
The only other thing I can think of is I am overriding the rendering of the UserControl being loaded as it loads a custom result set.
protected override void Render(HtmlTextWriter htw)
{
if (IsPostBack)
{
QueryResponse qr = iu.GetSearchResults(SearchTerm);
int num = qr.TotalMatchesReturned;
SearchData sd = new SearchData();
htw.Write("<table style='width: 100%; height:100%'><tr ><td style='width: 50%'>");
htw.Write("<div id='divResultDetail' runat=server >");
htw.Write("<script type='text/javascript' src='../js/paging.js'></script><div id='pageNavPosition'></div><table id='results'>");
for (int i = 0; i < num; i++)
{
...edited for brevity.
Any suggestions or guidance as to why I am losing reference to the jquery functions? I am not using master pages so I haven't used the ASP ScriptManager.
This all worked fine prior to using UpdatePanels. I define "fine" as: the postback was reloading/registering the js files each time, so they were being reset (which was okay). However, now with some other changes needed I need to look at leveraging UpdatePanels.
Thanks for any suggestions or ideas.
You can use the live or delegate jQuery methods to get your handlers to be bound to any elements added to the page.
Alternatively, if you need some setup to always happen after every partial postback in addition to original page load, you can put it in a pageLoad method instead of document.ready. ASP.NET calls this on page load, and after every partial postback.
function pageLoad()
{
// Setup code here
}
Check this article for more:
http://encosia.com/document-ready-and-pageload-are-not-the-same/
You need to use delegate for the button click. It will assure that all elements present and future will be bound to the event handler.
http://api.jquery.com/delegate/
$("body").delegate("#btnSearch", "click", function () {
$(".searchmenubar").animate({ "margin-top": "5px" }, "fast");
$("#btnAdvanceSearch").show();
$("#btnFilters").show();
$("#btnClose").hide();
$("#divAdvSearch").hide();
alert("search");
});
You need to rebind the elements when the update panel finish updating. Like this,
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('#add').click(function () {
});
$('#addPrevious').click(function () {
});
});
Hope this helps.
I've got a page where I have a ModalPopUpExtender which I want to show from code.
This is my site structure which is a web form within a nested masterpage:
...
<asp:Content ID="con" ContentPlaceHolderID="mainContent" runat="server">
<asp:MultiView ID="tabMultiView" runat="server">
<asp:View ID="generalTab" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="newAddressModalPopup" CancelControlID="newAddressDialogCancelButton"
BackgroundCssClass="modalBackground" TargetControlID="newAddressLink" PopupControlID="newAddressDialogDiv"
runat="server">
</ajaxToolkit:ModalPopupExtender>
...
open dialog
<script type="text/javascript">
function openNewAddressDialog() {
$find('<%= newAddressModalPopup.ClientID %>').show();
}
</script>
...
The find method always returns null. I also tried findComponent, etc. It's always null. When I debugged the method I noticed that the components collection (which is kind of a dictionary with the control ID as key) is empty.
What could the problem be? BTW, I am using jQuery stuff on the page as well.
Thanks a lot!
Ok I found it. The TargetControl was not rendered in HTML because it was in another view.
In your JavaScript function try using document.getElementById("ctl00_ContentPlaceHolder1_newAddressModalPopup"). Maybe it works. Let me know if you get issues.
Or try Setting BehaviorID="someid" to the modal popupextender and use this JavaScript code:
function changeValue()
{
var myBehavior = $find("myBehavior1");
myBehavior.show();
}
Or:
var modalDialog = $find("newAddressModalPopup");
// Get reference to modal popup using the Ajax API $find() function.
if (modalDialog != null) {
modalDialog.show();
}
I had a bunch of controls that I displayed, hid, enabled and disabled based on actions in the web page. Everything worked until i put them into an accordian. Now I can't get the Javascript to be able to update their state. I have a small example
this is the Javascript
<script type="text/javascript">
var ctrl = document.getElementById('<%= btmRocp.ClientID %>');
function ShowPanel(control)
{
alert('<%= btmRocp.ClientID %>');
ctrl.disabled = true;
}
</script>
This is the Accordian
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="MyAccordion"
runat="Server"
SelectedIndex="0"
>
<Panes>
<cc1:AccordionPane ID="accordianPane0" runat=server>
<Header>Create New Report </Header>
<Content>a
<asp:Button ID="Button1" onmouseup="ShowPanel('') " runat="server" Text="Button" />
<asp:Button ID="btmRocp" runat="server" Text="Button" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="accordianPane1" runat=server>
<Header>Create New Report </Header>
<Content>b</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
I would love to know what i am doing wrong here the Alert prints out the right ID.
If i do something where i pass the "this" Object to the function i can disable that button but I truly need it to disable, or hide like 10 objects
Does anyone have an idea?
Sample Code at http://www.riconllc.com/accordian.zip
What is the default state of the Accordion? collapsed? I have no idea how the Accordion works, but I'm suspecting that it is modifying the HTML DOM such that when the page first loads "btmRocp" is not actually present on the page itself, until it becomes "visible". That is, it might be injecting controls into and out of the page, based on the accordion status.
Your best bet in figuring out this behavior is to insert "debugger;" statements into your page at appropriate points, to inspect the live DOM at those points in time.
<textbox id="debugbox" onblur="this.value = eval(this.value);"></textbox>
Is a good way to monkey with script on your page as well.