Question about Asp.Net/Javascript

[B. Chernick]

Someone refresh my memory.

Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)

(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

 

[Göran Andersson]

Someone refresh my memory.

Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)

(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

Yes, you can easily show and hide elements.

Example:

<script type="text/javascript">

function $(id) { return document.getElementById(id); }

function show(index) {
var items = [$('item1'),$('item2'),$('item3')];
for (var i=0; i<items.length; i++) {
items.style.display = i==index ? 'block' : 'none';
}
return false;
}

</script>

<a href="#" onclick="return show(0);">1</a>
<a href="#" onclick="return show(1);">2</a>
<a href="#" onclick="return show(2);">3</a>

<div id="item1" style="display:block">Item 1</div>
<div id="item2" style="display:none">Item 2</div>
<div id="item3" style="display:none">Item 3</div>

 

[B. Chernick]

Thanks. I'm going to have to try this but frankly, the syntax looks a little
strange to me. I'm not sure I understand what I'm seeing. What I've been
doing is more like this:
var t = document.getElementById("F0006");
t.style.visibility='hidden';

The problem is that even though the table is hidden, it's still taking up
space.

Someone refresh my memory.

Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)

(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

Yes, you can easily show and hide elements.

Example:

<script type="text/javascript">

function $(id) { return document.getElementById(id); }

function show(index) {
var items = [$('item1'),$('item2'),$('item3')];
for (var i=0; i<items.length; i++) {
items.style.display = i==index ? 'block' : 'none';
}
return false;
}

</script>

<a href="#" onclick="return show(0);">1</a>
<a href="#" onclick="return show(1);">2</a>
<a href="#" onclick="return show(2);">3</a>

<div id="item1" style="display:block">Item 1</div>
<div id="item2" style="display:none">Item 2</div>
<div id="item3" style="display:none">Item 3</div>

 

[B. Chernick]

I'm still a bit confused. I've never heard of that 'block' value.

However this seems to do what I want:

t = document.getElementById("F0005");
t.style.display='none';
var t = document.getElementById("F0006");
t.style.visibility='visible';

(Table F0005 vanishes and Table F0006 moves up to it's place.)

More testing tomorrow.... Thanks.

 

[Göran Andersson]

Thanks. I'm going to have to try this but frankly, the syntax looks a little
strange to me. I'm not sure I understand what I'm seeing.

Yes, the syntax might look a bit strange if you are not used to it.

Another way of writing the show function, that you may be more familiar
with, could be:

function show(index) {

var items = new Arra();
items[0] = document.getElementById('item1');
items[1] = document.getElementById('item2');
items[2] = document.getElementById('item3');

for (var i=0; i<items.length; i++) {
if (i==index) {
items.style.display = 'block';
} else {
items.style.display = 'none';
}
}

return false;
}

What I've been
doing is more like this:
var t = document.getElementById("F0006");
t.style.visibility='hidden';

The problem is that even though the table is hidden, it's still taking up
space.

Yes, that's how the visibility attribute works. It shows or hides an
element, but it still takes up space in the document flow all the time.

The display attribute controls how the element behaves in the document
flow. The value 'block' makes it behave like a div element, the value
'inline' makes it behave like a span element, and the value 'none'
removes it from the document flow entirely.

As you probably want one page at the time to be visible, and the other
pages totally out of the way, the display attribute is a better option
than the visibiliy attribute.