New to Javascript, can someone explain this code line by line?

Question

I used this code to maintain scroll position and don't have a clue of what it means. If someone has the time, can you provide me with an step by step explanation of what it is doing. Here it is:

<script language="javascript"  type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

        function BeginRequestHandler(sender, args) {

        if ($get('<%=lstAuctions.ClientID %>') != null) {

            xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft;
            yPos = $get('<%=lstAuctions.ClientID %>').scrollTop;
        }
    }

    function EndRequestHandler(sender, args) {

        if ($get('<%=lstAuctions.ClientID %>') != null) {

            $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos;
            $get('<%=lstAuctions.ClientID %>').scrollTop = yPos;
        }
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

</script>

Answer 1

var xPos, yPos; // global variable declaration
var prm = Sys.WebForms.PageRequestManager.getInstance(); // Some webforms javascript manager

/*
* Begin function with 2 arguments
*/
function BeginRequestHandler(sender, args) {

    // check if the element generated by .net with id 'lstAuctions.ClientID' exists
    if ($get('<%=lstAuctions.ClientID %>') != null) {

        // get its scroll left and top position and
        // assign it to the global variables
        xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft;
        yPos = $get('<%=lstAuctions.ClientID %>').scrollTop;
    }
}

/*
* this method gets executed last, it uses the 
* already set global variables to assign the old scrollpositions again
*/
function EndRequestHandler(sender, args) {

    if ($get('<%=lstAuctions.ClientID %>') != null) {
        // assign the previous scroll positions
        $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos;
        $get('<%=lstAuctions.ClientID %>').scrollTop = yPos;
    }
}

// first function gets executed on the beginning of a request
prm.add_beginRequest(BeginRequestHandler);
// second function gets executed on the end of the request
prm.add_endRequest(EndRequestHandler);

Answer 2

Sys.WebForms.PageRequestManager is an ASP.Net AJAX construct.

Specifically in your code, there are some allocated variables (xPos,yPos,prm) and two defined functions (BeginRequestHandler,EndRequestHandler). At the end of the code are two function calls (prm.add_beginRequest,prm.add_endRequest) that are assigning those functions as event handlers.

The $get calls are part of the library as a shortcut for getting data from the client-side. It's very much javascript under the covers, but it's just a syntactical implementation through the ASP.Net AJAX client-side library.

Answer 3

You did ask...

// declare 2 variables
var xPos, yPos;
// get an instance of the PageRequestManager - this looks like an MS ajax helper class
var prm = Sys.WebForms.PageRequestManager.getInstance();

// declare a function
function BeginRequestHandler(sender, args) {

    // get the ClientSide HTML DOM element which corresponds to the lstAuctions asp control on the serverside
    if ($get('<%=lstAuctions.ClientID %>') != null) {
        // if the element is not null (eg: page is not broken)

        // get the x Position of the object relative to what is displayed by the scrolled window (if you scroll sideways this value changes)
        xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft;
        // get the y Position of the object relative to what is displayed by the scrolled window (if you scroll up/down this value changes)
        yPos = $get('<%=lstAuctions.ClientID %>').scrollTop;
    }
}

// declare a function
function EndRequestHandler(sender, args) {

    // get the ClientSide HTML DOM element which corresponds to the lstAuctions asp control on the serverside
    if ($get('<%=lstAuctions.ClientID %>') != null) {
        // if the element is not null (eg: page is not broken)

        // set the x position of the object to what we got last time (horizontal scroll the page)
        $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos;

        // set the y position of the object to what we got last time (vertical scroll the page)
        $get('<%=lstAuctions.ClientID %>').scrollTop = yPos;
    }
}

// tell the page request manager to call our BeginRequestHandler method when it begins it's request
prm.add_beginRequest(BeginRequestHandler);

// tell the page request manager to call our EndRequestHandler method when it ends it's request
prm.add_endRequest(EndRequestHandler);

Basically, it looks like the page is using the MS ajax library to display some dynamic content (probably replacing a list with another list), but preserving the place that the user has scrolled to so the page doesn't "jump" when the new content replaces the old content.

Answer 4

scrollLeft

scrollTop

Sys.WebForms.PageRequestManager Class

Answer 5

var xPos, yPos;

**declares two global variables.

---

function BeginRequestHandler(sender, args) {

**declares a new function. This function is probably used for an event handler

if ($get('<%=lstAuctions.ClientID %>') != null) {

**this is a combination of inline ASP/ASP.NET code as defined in the <% %> pairing.

xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft;

**captures the current scrolling position of the page into the local variable.

yPos = $get('<%=lstAuctions.ClientID %>').scrollTop;

**captures the current scrolling position of the page into the local variable.

---

function EndRequestHandler(sender, args) {

**declares a new function. This function is probably used for an event handler

if ($get('<%=lstAuctions.ClientID %>') != null) {

**this is a combination of inline ASP/ASP.NET code as defined in the <% %> pairing.

$get('<%=lstAuctions.ClientID %>').scrollLeft = xPos;

**sets the scrolling position of the page to the value of xPos.

$get('<%=lstAuctions.ClientID %>').scrollTop = yPos;

**sets the scrolling position of the page to the value of xPos.

---

var prm = Sys.WebForms.PageRequestManager.getInstance();

**declares and initializes a new variable to the PageRequestManager.

prm.add_beginRequest(BeginRequestHandler);

**adds the event handler defined above to the beginRequest of the current page.

prm.add_endRequest(EndRequestHandler);

**adds the event handler defined above to the endRequest of the current page.