I have an
anchor tag inside listview that expands/hides a row inside the listview both are inside an updatePanel.
the anchor tage javascript code is the following:
<a onclick=" $(this).parent().parent().next().find('#notesTd').toggle();" href="#" id="notes_anch"><img src="../img/notes1.png" class="wiringImg" runat="server" id="notesImg" visible="false" width="40" /></a>
This is the row that the anchor tag show/hide:
<td colspan="6" style="display: none;" id="notesTd" class="showHideNotes">Notes
<div id="divScroll">
<asp:ListView runat="server" ID="notesView" DataSource="<%# Eval("NOTES", "{0}").Split('|') %>">
<LayoutTemplate>
<ul> <li runat="server" id="itemPlaceholder" style="list-style: none;"></li>
</ul> </LayoutTemplate>
<EmptyItemTemplate>no notes to display</EmptyItemTemplate>
<ItemTemplate> <li style="list-style: none; color: #000 !important;"> <%#string.Format("{0}",Container.DataItem) %>
</li> <asp:Label runat="server" ID="lblNotes" Visible="false" Text='<%#string.Format("{0}",Container.DataItem) %>'></asp:Label> </ItemTemplate> </asp:ListView> </div>
</td>
It's working very well show/hides BUT the problem is I want the page to stay in the same position after anchor click but it keeps going to the top. I tried many solutions with no luck
any help will be very much appreciated
Thanks in advance
What I have tried:
1-design / C# solution
MaintainScrollPositionOnPostback="true" OR Page.MaintainScrollPositionOnPostBack = true;
2-JavaScript solution:
<script type="text/javascript">
function SetScrollerPosition() {
if (document.getElementById("XPos").value != "") {
var x = document.getElementById("XPos").value;
var y = document.getElementById("YPos").value;
window.scrollTo(x, y);
}
document.getElementById("XPos").value = "0";
document.getElementById("YPos").value = "0";
}
function GetScollerPosition() {
var scrollX, scrollY;
if (document.all) {
if (!document.documentElement.scrollLeft)
scrollX = document.body.scrollLeft;
else
scrollX = document.documentElement.scrollLeft;
if (!document.documentElement.scrollTop)
scrollY = document.body.scrollTop;
else
scrollY = document.documentElement.scrollTop;
}
else {
scrollX = window.pageXOffset;
scrollY = window.pageYOffset;
}
document.getElementById("XPos").value = scrollX;
document.getElementById("YPos").value = scrollY;
}
</script>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />
3- another javascript solution (similar to #2)
<script type="text/javascript">
var xPos, yPos;
var prm = sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=UpdatePanel1.ClientID%>') != null) {
xPos = $get('<%=UpdatePanel1.ClientID%>').scrollLeft;
yPos = $get('<%=UpdatePanel1.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=UpdatePanel1.ClientID%>') != null) {
$get('<%=UpdatePanel1.ClientID%>').scrollLeft = xPos;
$get('<%=UpdatePanel1.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_beginRequest(EndRequestHandler);
</script>