Develop Reference

error"JavaScript runtime error: Unable to get property 'scrollLeft' of undefined or null reference" while finding scroll position

I am using below code to retrieve the scroll position of panel and gridview inside the content page after postback. I also use update panel. Below code work properly but it's throwing runtime javascript error like "JavaScript runtime error: Unable to get property 'scrollLeft' of undefined or null reference" on line 7, due to that autocomplete extender in the same page not functioning properly. Please help me to get rid of this javascript error so that both functions will work properly. Thanks in advance..
`
<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('ctl00_ContentPlaceHolder2_Panel1').scrollLeft;//line 7
yPos = $get('ctl00_ContentPlaceHolder2_Panel1').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('ctl00_ContentPlaceHolder2_Panel1').scrollLeft = xPos;
$get('ctl00_ContentPlaceHolder2_Panel1').scrollTop = yPos;
}
</script>`

You can clearly tagged this against JQuery, SO I am assuming you are using JQUERY.
you should be looking to do some thing like this
xPos = $('#ctl00_ContentPlaceHolder2_Panel1').scrollLeft;

Thanks to all for sharing all your valuable ideas..
I have added one validation before executing each function, that resolved my issue. Please find the updated code below;`
<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) {
if ($get('ctl00_ContentPlaceHolder2_Panel1') != null) {
xPos = $get('ctl00_ContentPlaceHolder2_Panel1').scrollLeft;
yPos = $get('ctl00_ContentPlaceHolder2_Panel1').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('ctl00_ContentPlaceHolder2_Panel1') != null) {
$get('ctl00_ContentPlaceHolder2_Panel1').scrollLeft = xPos;
$get('ctl00_ContentPlaceHolder2_Panel1').scrollTop = yPos;
}
}
</script>

Attach code when IFrame content button clicked?

I have a modal popup that shows an IFrame. The IFrame then points to an aspx that has a button. The button's class is schedule-submit.
When I click that button in the IFrame, I want it to close the modal on my page.
I tried this in the document ready of the page that has the IFrame:
$('.schedule-submit').bind('click', function() {
closeEditModal();
});
But it is not having any effect.
What should I do to get this working?
Thanks

You need to call it from the parent page where you have the modal popup with iFrame:
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var btn = frameBody.find('.schedule-submit');
btn.on('click', function() {
closeEditModal();
});
});

Button Click not working in update panel only in IE9

Currenly i am working on asp.net c# project.
I use select2 in update panel.
My button Click is not working after Postback.
I use this Code to rebind this JQuery Plugin in update panel.
<script type="text/javascript">
var frm = document.getElementById("aspnetForm");
if (frm) {
frm.onsubmit = function () { return false; };
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
bind();
}
}
function bind() {
$(document).ready(function () {
$(".chzn-select").select2();
$(".option-listing").select2();
});
}
</script>
After postback button click is not working only in IE9. No Console Error..
In other browser work properly.
If i Comment this Bind() function my button is work properly.

You can check here if your jquery framework is compatible with ie9
http://msdn.microsoft.com/en-us/library/ie/hh180175%28v=vs.85%29.aspx

Maintain Scroll Bar position of a div within a gridview after a PostBack

I used the following piece of code in the web.config in order to maintain the scrollbar position after a server postback:
<pages maintainScrollPositionOnPostBack="true" >
</pages>
All is working fine, but now i have a gridview encapsuled within a div with a scrollbar in the div (internal scrollbar).
When an event occur on one of the rows inside the gridview, the internal scrollbar doesn't maintain its original position unlike the outer one.
Any ideas?

For future reference:
The normal procedure is to write the following in the web.config file:
<system.web>
<pages maintainScrollPositionOnPostBack="true" >
</pages>
</system.web>
This will preserve the scroll bar position of all web pages.
If you have a scroll bar within a gridview (or div) then use the following script:
<script type="text/javascript">
window.onload = function () {
var strCook = document.cookie;
if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition() {
var intY = document.getElementById("grdWithScroll").scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
And the div must be as follows:
<div id="grdWithScroll" ………… onscroll="SetDivPosition()">
http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20

Try this,
<script type="text/javascript">
window.onload = function () {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
}
function SetDivPosition() {
var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
h.value = intY;
}
function afterpostback() {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
}
</script>
<asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
<div id="scrollArea" onscroll="SetDivPosition()" runat="server" style="height:225px;overflow:auto;overflow-x:hidden;">
In the Page_Load
if (Page.IsPostBack) {
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
}

I dont have a long long explanation and any explanation, the most important part is these codes work on my project.
<script type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
</script>
this is from http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid

You can do what you want, but it will need to be done client-side with something like jQuery. The following tutorial uses jQuery to determine the value of the scrollbar within your GridView control and then restore that value every time the $(document).ready function is called. In this manner your scroll bar will be reset to it's position before the postback as you wish.
Easily maintaining scroll position in GridView using jQuery

jQuery form validation and Update Panel

I am using updatepanel in asp.net web form with .net framework 4.0. In between, I implemented jquery form validation. It's working well with the form validation but the problem occurred with the update panel cannot do partial postback but fully postback. Appreciate for any reply.
I have something like this, do validation on form and do show some image when update panel initialize request.
<script type="text/javascript">
$(document).ready(function () {
$(".logForm").validate();
$('#main_UpdatePanelAccount').initializeRequest(function (options) {
$("#flashAcc").show();
$("#flashAcc").fadeIn(400).html('<img src="/image/load.gif" align="absmiddle">');
});
});
</script>
After this, I have this 2 blocks of code (one with commented and another with uncommented) to determine whether postback or not. However this 2 blocks of code also end with the update panel fully postback.
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (!Validator()) {
args.set_cancel(true);
}
}
// $(function () {
// Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
// //Re-initialize jquery after an auto post back.
// function EndRequestHandler(sender, args) {
// //Do work after update panel fires.
// var prm = Sys.WebForms.PageRequestManager.getInstance();
// if (!Validate()) {
// prm.abortPostBack();
// args.set_cancel(true);
// }
// else {
// prm.add_beginRequest();
// args.set_cancel(false);
// }
// }
// });
</script>

Firstly if your code is inside the updatepanel, it's going to get wiped out on postback. Unrelated to your question but just a side note. Secondly unless you set updatepanel to updatemode="conditional", it will also update all content in other update panels as well. If you are still getting a full page refresh, I would try doing it this way instead:
<script type="text/javascript">
<!--
function Post() {
__doPostBack('<%= UpdatePanel1.ClientID %>', '');
}
-->
</script>