Remember which row was made visible with JavaScript

Hi,

not sure whether to post this in the JavaScript section or here.  Anyways, here it goes.

I have a gridView nested inside a GridView. The child gridView has been embedded inside a div tag.  I have written a JavaScript that toggles the visiblity of the div tag on or off.  That works fine.  However, when the page is posting back, the currently visible tag become invisible again.  How can I make asp.net "remember" the currently visible div tag.  

Thanks

LVL 1
yechanAsked:
Who is Participating?
 
P1ST0LPETEConnect With a Mentor Commented:
Sorry, I was hesitant when I wrote the script to not use jQuery, but it's used so often these days I went ahead and did it anyway.  Anyway, below is the same script using standard JavaScript.

Note: In both the jQuery above and the script below, I am assuming that the ID's on your <div> tags that you are trying to hide/show are named "NestedDiv1" "NestedDiv2" "NestedDiv3", etc. with the number at the end of the ID corresponding with the grid row that it is in.


Here is the specific line you wanted:

document.getElementById('NestedDiv' + selectedRow).style.display = 'inline';



And here is the standard JavaScript version of the jQuery posted in my original post:

window.onload = function ()
{
    var selectedRow = document.getElementById('hfSelectedRow').value;

    if (selectedRow > -1)
    {
        document.getElementById('NestedDiv' + selectedRow).style.display = 'inline';
    }
}

To hide the div you can use:    style.display = 'none'
0
 
P1ST0LPETECommented:
Place a hidden field somewhere on your page, probably at the top of the gridview.

<asp:HiddenField ID="hfSelectedRow" runat="server" value="-1" />

In your whenever you use javascript to make a div visable, update this hiddenfield with the row number.

$('#hfSelectedRow').val(rowNumber);

Then on postback have javascript that runs to check if the hidden field holds a value greater than -1, and if it does then make that div visible.

$(document).ready(function()
{
       if ($('#hfSelectedRow').val() > -1)
       {
               $('#NestedDiv' + $('#hfSelectedRow').val()).attr('display', inline);
       }
});

You get the idea.
0
 
yechanAuthor Commented:
Good morning,

thank you very much for your response.  If I am not mistaken that's jQuery syntax that you have.  I don't think the marines will allow me to install jQuery library will let me install the the library or make a reference to it.  I have much of it converted into "regular" javascript.  Need additional assistance on how to convert the following into non-jQuery syntax

$('#NestedDiv' + $('#hfSelectedRow').val()).attr('display', inline);

thanks
0
 
yechanAuthor Commented:
This is beautiful.

thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.