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

Question

I used this code to maintain the scroll position and don't know what that means. If anyone has the time, you can give me a step-by-step explanation of what he 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.

In particular, in your code there are some selected variables (xPos, yPos, prm) and two specific functions (BeginRequestHandler, EndRequestHandler). At the end of the code are two function calls (prm.add_beginRequest, prm.add_endRequest) that designate these functions as event handlers.

$get . javascript , ASP.Net AJAX.

Answer 3

...

// 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 request
prm.add_beginRequest(BeginRequestHandler);

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

, , ajax MS (, ), , , "", .

Answer 4

scrollLeft

scrollTop

Sys.WebForms.PageRequestManager Class

Answer 5

var xPos, yPos;

** .

---

function BeginRequestHandler (, args) {

** . , ,

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

** ASP/ASP.NET, <%% > .

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

** .

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

** .

---

function EndRequestHandler (, args) {

** . , ,

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

** ASP/ASP.NET, <%% > .

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

** xPos.

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

** xPos.

---

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

** PageRequestManager.

prm.add_beginRequest (BeginRequestHandler);

** Adds the event handler defined above to the beginning of the request for the current page.

prm.add_endRequest (EndRequestHandler);

** Adds the event handler defined above to the end of theRequest of the current page.