Passed variable from code behind to javascript not updating

Question

I need to pass the newly selected row index of the gridview to my javascript in aspx page. But the code only fetch the initial value of the variable and when the script runs again, it contains the not updated value.

variable in my code behind is "SelectedRowIndex" which is an integer

    window.addEventListener("keydown", function (event) {
        console.log('<%= SelectedRowIndex %>');
        var validArrowKey = false;
        var index = '<%= SelectedRowIndex %>';

        if (event.keyCode == 40) {
            validArrowKey = true;
            index++;
        }
        else if (event.keyCode == 38 && index > -1) {
            validArrowKey = true;
            index--;
        }

        if (validArrowKey) {
            var trPaymentDetails = document.getElementById("trPaymentDetails_" + index.toString())

            if (trPaymentDetails) {
                __doPostBack('ctl00$MainContent$grdPaymentDetails', 'Select$' + index.toString());
            }
            else
                __doPostBack('ctl00$MainContent$grdPaymentDetails', 'Select$' + index.toString());

        }
    }, false);

To set the initial value for the selected row index, the user must click a row in the gridview first, inside that inclick trigger will set the variable to the user's selected row.

You just assigned an anonymous function that will be executed each time when keydown event was fired. So the variable declaration inside will be executed each time as well. That's why it will always be initial value. Try to declare index as a global variable. — AJ H
– AJ H, Commented Aug 24, 2017 at 8:21
The user first must click a row in the gridview to set the first index. — Elbert John Felipe
– Elbert John Felipe, Commented Aug 24, 2017 at 8:36

mortb · Accepted Answer · 2017-08-24 08:45:46Z

1

Make the index variable global by moving it outside the function, then it will only be set once.

var index = '<%= SelectedRowIndex %>';
window.addEventListener("keydown", function (event) {
        console.log('<%= SelectedRowIndex %>');
        var validArrowKey = false;

        if (event.keyCode == 40) {
            validArrowKey = true;
            index++;
        }
        else if (event.keyCode == 38 && index > -1) {
            validArrowKey = true;
            index--;
        }

        if (validArrowKey) {
            var trPaymentDetails = document.getElementById("trPaymentDetails_" + index.toString())

            if (trPaymentDetails) {
                __doPostBack('ctl00$MainContent$grdPaymentDetails', 'Select$' + index.toString());
            }
            else
                __doPostBack('ctl00$MainContent$grdPaymentDetails', 'Select$' + index.toString());

        }
    }, false);

answered Aug 24, 2017 at 8:45

mortb

9,9213 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elbert John Felipe Over a year ago

ok it works but why is that when I get the new total rows in the Gridview still returns 0 even if it has rows in it? I put it above the function as well " var totalRows = '<%= grdPaymentDetails.Rows.Count %>'; "

mortb Over a year ago

That's tricky to answer without having all of the code, both server side and client side. You could instead replace '<%= grdPaymentDetails.Rows.Count %>' with the Count property of the grids "datasource"

Collectives™ on Stack Overflow

Passed variable from code behind to javascript not updating

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related