[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Failing to get DIV content to flip between initial and alternate version

$Bill

6/17/2016 6:19:00 AM

I'm generating a TV Guide page from a Perl script to HTML and then rendering
the page. The HTML has the schedule in two formats: 1) grid; 2) list. What
I'm trying to do is show just the grid or just the list instead of both. The
default is grid type. The way I'm trying to implement this is by using
document.getElementById to get the DIV containing the HTML and
<element>.innerHTML = <newText> to set the alternate type of listing (grid/list).

The code works to actually change the content, but then seems to reload the page
reverting it back - alert popup in init shows it's being called once on load and
again on click of 'Flip View' button (which it shouldn't). How do I stop the
second load from happening?

TIA, Bill

My test case is below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd...

<HTML>
<HEAD>
<TITLE>Flip Test</TITLE>
</HEAD>

<BODY>

<SCRIPT> // init global vars

var isGrid = 0; // cause a switch between grid text & list text
// isGrid == 0 means init, == 1 means grid active, == 2 means list active
var gridTxt = "<P>Grid Text</P>"; // just some test text
var listTxt = "<P>List Text</P>"; // just some test text
document.body.onload = init; // init to grid text

// function to swap grid and list content
function FlipType () {

// alert ("0: isGrid=" + isGrid); // debug
// get the current div object by id
var flipDiv = document.getElementById("FlipDiv");
// 1st execution on init doesn't get to here (init:, 0:)
// alert ("1: " + flipDiv.innerHTML); // debug
if (isGrid != 1) { // set to grid if not grid
flipDiv.innerHTML = gridTxt;
// alert ("2: " + flipDiv.innerHTML); // debug
isGrid = 1; // set flip switch to grid
} else { // else set to list
flipDiv.innerHTML = listTxt;
// alert ("3: " + flipDiv.innerHTML); // debug
isGrid = 2; // set flip switch to list
}
// alert ("4: isGrid=" + isGrid); // debug
// button click execution gets to here, but seems to re-call init like the page
// is re-loading ???
// 0:, 1:, 2: 4:, init:. 0:

}
// init calls FlipType to set initial grid text
function init () {
document.body.onload = null; // trying to prevent 2nd load
alert ("init: isGrid=" + isGrid); // getting called on button click-wrong
// if (isGrid == 1 || isGrid == 2) { ; } else { FlipType (); } this fails to work
FlipType (); // to set the text the first time to grid
}

</SCRIPT>

<!-- button to test FlipType -->
<FORM>
<!-- for some reason FlipType is executed twice when I click it ???
maybe the body is re-loading from onload ??? -->
<BUTTON onclick="FlipType()">Flip View</BUTTON>
</FORM>

<!-- actual code to flip goes inside this form in the DIV -->
<FORM>
<FORM METHOD="POST" ACTION="http://www.todbe.com/cgi-bin/prt_tv_sched.pl...
<BR><INPUT TYPE="HIDDEN" NAME="DATE" VALUE="20160612">
<DIV ID="FlipDiv"><P>Replace Me</P></DIV>
<BR><INPUT TYPE="SUBMIT" VALUE="Print Selected Schedule">
</FORM>

</BODY>
</HTML>


3 Answers

Evertjan.

6/17/2016 9:32:00 AM

0

$Bill <news@todbe.com> wrote on 17 Jun 2016 in comp.lang.javascript:

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd...

<!DOCTYPE HTML> will do in the 21 century.

> <HTML>
> <HEAD>
> <TITLE>Flip Test</TITLE>
> </HEAD>
>
> <BODY>
>
> <SCRIPT> // init global vars
>
> var isGrid = 0; // cause a switch between grid text & list
> text // isGrid == 0 means init, == 1 means grid active, == 2 means list
> active var gridTxt = "<P>Grid Text</P>"; // just some test text
> var listTxt = "<P>List Text</P>"; // just some test text
> document.body.onload = init; // init to grid text

window.onload = init;

then you can set the <script> inside the <head>, where it belongs.

>
> // function to swap grid and list content
> function FlipType () {
>
> // alert ("0: isGrid=" + isGrid); // debug
> // get the current div object by id
> var flipDiv = document.getElementById("FlipDiv");
> // 1st execution on init doesn't get to here (init:, 0:)
> // alert ("1: " + flipDiv.innerHTML); // debug
> if (isGrid != 1) { // set to grid if not grid
> flipDiv.innerHTML = gridTxt;
> // alert ("2: " + flipDiv.innerHTML); // debug
> isGrid = 1; // set flip switch to grid
>} else { // else set to list
> flipDiv.innerHTML = listTxt;
> // alert ("3: " + flipDiv.innerHTML); // debug
> isGrid = 2; // set flip switch to list
>}
> // alert ("4: isGrid=" + isGrid); // debug
> // button click execution gets to here, but seems to re-call init like
> the page // is re-loading ???
> // 0:, 1:, 2: 4:, init:. 0:
>
>}
> // init calls FlipType to set initial grid text
> function init () {
> document.body.onload = null; // trying to prevent 2nd load

This is nonsense, a document always loads once, and then is a new document.


> alert ("init: isGrid=" + isGrid); // getting called on button
> click-wrong // if (isGrid == 1 || isGrid == 2) { ; } else { FlipType ();
> } this fails to work FlipType (); // to set the text
> the first time to grid
>}
>
> </SCRIPT>
>
> <!-- button to test FlipType -->
> <FORM>
> <!-- for some reason FlipType is executed twice when I click it ???
> maybe the body is re-loading from onload ??? -->
> <BUTTON onclick="FlipType()">Flip View</BUTTON>

The form is executed, so the page reloads and the javascript execution is
lost, so do a "return false" to prevent the form from executing:

<button onclick='flipType();return false;'>Flip View</button>

or set the <button> outside a <form>


> </FORM>
>
> <!-- actual code to flip goes inside this form in the DIV -->
> <FORM>
> <FORM METHOD="POST"
> ACTION="http://www.todbe.com/cgi-bin/prt_tv_sched.pl...
> <BR><INPUT TYPE="HIDDEN" NAME="DATE" VALUE="20160612">
> <DIV ID="FlipDiv"><P>Replace Me</P></DIV>
> <BR><INPUT TYPE="SUBMIT" VALUE="Print Selected Schedule">
> </FORM>
>
> </BODY>
> </HTML>

I prefer lowercase html, less screaming.

And leave out the copious commenting on usenet,
as the lines get too long.

Try this:

============================================
<!DOCTYPE HTML>
<html>
<head>
<title>Flip Test</title>
<script>
var isGrid = 0;
var gridTxt = '<p>Grid Text</p>';
var listTxt = '<p>List Text</p>';
function flipType() {
var flipDiv = document.getElementById('FlipDiv');
if (isGrid != 1) {
flipDiv.innerHTML = gridTxt;
isGrid = 1;
} else {
flipDiv.innerHTML = listTxt;
isGrid = 2;
};
};

function init() {
// document.body.onload = null;
// alert ('init: isGrid=' + isGrid);
flipType();
};
window.onload = init;
</script>
</head>

<body>
<form>
<button onclick='flipType();return false;'>Flip View</button>
</form>
<form>
<form method='post' action=''
<br><input type='hidden' name='date' value='20160612'>
<div id='FlipDiv'><p>Replace Me</p></div>
<br><input type='submit' value='Print Selected Schedule'>
</form>
</body>
</html>
===================================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

$Bill

6/18/2016 2:00:00 AM

0

On 6/17/2016 02:32, Evertjan. wrote:
> $Bill <news@todbe.com> wrote on 17 Jun 2016 in comp.lang.javascript:
>
> window.onload = init;
>
> then you can set the <script> inside the <head>, where it belongs.

>> document.body.onload = null; // trying to prevent 2nd load

> This is nonsense, a document always loads once, and then is a new document.

What do you expect on my first try at using Javascript? ;)

> The form is executed, so the page reloads and the javascript execution is
> lost, so do a "return false" to prevent the form from executing:
>
> <button onclick='flipType();return false;'>Flip View</button>
>
> or set the <button> outside a <form>

I knew there had to be a way to do that - just hadn't found it yet.
Didn't realize that the form execution was causing the re-load.

> I prefer lowercase html, less screaming.

I just normally UC the HTML tags.

> And leave out the copious commenting on usenet,
> as the lines get too long.

That was for the benefit of the post to explain what I thought I
was doing/trying to do.

> Try this:

Much grass amigo. That works like a charm. Now I need to slip all
the actual HTML into those two vars ...


Evertjan.

6/18/2016 9:36:00 AM

0

$Bill <news@todbe.com> wrote on 18 Jun 2016 in comp.lang.javascript:

>>> document.body.onload = null; // trying to prevent 2nd load
>
>> This is nonsense, a document always loads once, and then is a new
>> document.
>
> What do you expect on my first try at using Javascript? ;)

I am critisizing factual code, not your coding.

And the coding is illogical, whether you are a novice or an expert.

This NG is not about examination of people, but of Javascript code.

> Much grass amigo. That works like a charm. Now I need to slip all>
> the actual HTML into those two vars ..

Success.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)