hiding divs

W

WindAndWaves

Hi Gurus

I have a page, which looks a bit like this:

....
<body>
<div ID=id1>................</DIV>
<div ID=gsd>................</DIV>
<div ID=ewd>................</DIV>
<div ID=fac>................</DIV>
<div ID=act>................</DIV>
</body>

I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like

<A HREF="#esf" onclick="showdiv('act')">

What would be the best way of doing this?

- TIA

Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)
 
S

swenson_greg

The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here's what I'm talking about:

var handler = new JSScriptHandler ();
handler.addItem (document.getElementById ('id1'));
handler.addItem (document.getElementById ('gsg'));

handler.Start (); // This method would actually define all event
handlers, etc.

This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().

I do not think there's a real solution without JS. Just make sure that
your code works in all browsers.

Hope this helps,
GregS
IAB Studio developer
www.worcsnet.com
www.iabstudio.com
 
Y

Yann-Erwan Perio

WindAndWaves said:
I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like

<A HREF="#esf" onclick="showdiv('act')">

This seems to be a pretty standard requirement, however your exemple is
a bit unclear, mixing a "esf" anchor with an "act" id (meaning, is there
a need for an internal hash?).
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)

The script part in the code below can be used as a js include,
preferably written before the end of the body tag. It is independent
from the page structure (doesn't require any special setting in the
page), and should not prevent existing scripts from running correctly.


<style type="text/css">
a {margin:0 1em;}
div[id] {background-color:yellow; color:eek:range;}
</style>

<div>
<a href="#foo1">Foo1</a>
<a href="#foo2">Foo2</a>
<a href="#foo3">Foo3</a>
</div>
<div id="foo1">Foo1</div>
<div id="foo2">Foo2</div>
<div id="foo3">Foo3</div>


<script type="text/javascript">
// --- add "call" support ---
if(!Function.prototype.call){
Function.prototype.call=function(obj, arg){
var fn="call", ret;
while(typeof obj[fn]!="undefined") fn+=fn;
obj[fn]=this;
ret=obj[fn](arg);
obj[fn]=null;
return ret;
}
}

// --- add generic addEventListener ---
if(typeof _e!="function") {
_e=function(obj, evt, func) {
if(obj[evt]) {
obj[evt]=(function(f) {
return function(evt) {
func.call(this, evt);
return f.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}
}

// --- add the toggling mechanism ---
_e(window, "onload",
function(evt) {
if(document.getElementById &&
document.getElementsByTagName &&
document.body &&
document.body.style &&
typeof document.body.style.display=="string"
){

// --- core ---
var activeDiv, handler, show, hide, getId, map;

map = {};
hide = function(el) { el.style.display="none"; }
show = function(el) { el.style.display="block"; }
getId = function(s) { return s.substr(s.lastIndexOf("#")+1); }
handler = function(evt) {
if(activeDiv!=this) {
if(activeDiv) hide(activeDiv);
show(activeDiv=map[this.href]);
}
return true;
}

// --- conditional init ---
var ii, dv, a;

for(ii=0,a=document.getElementsByTagName("a");ii<a.length;ii++){
if(a[ii].href.indexOf("#")!=-1) {
dv=document.getElementById(getId(a[ii].href));
if(dv) {
map[a[ii].href]=dv;
_e(a[ii], "onclick", handler);
hide(dv);
}
}
}

}
}
);
</script>
 
R

RobG

WindAndWaves wrote:
[...]
Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)

I can't vouch for browsers other than Firefox and IE 6, so please test
the document.all stuff thoroughly.

If the user doesn't have JS enabled, all the divs are shown and the
links become anchors so clicking on them will navigate to the
appropriate div. Adding names & ids should account for some older
browsers, but again I can't test it at the moment so up to you.

If a browser doesn't understand any part of the script, the divs aren't
hidden in the first place. You may want to dynamically change the
"return false" so that if the script does not complete (i.e. the divs
are not hidden), the link to the div is followed. Sorry, I don't have
the browsers to test it in here.

Code below, cheers, Rob.

*In the <head>:*

<script type="text/javascript">
function showDiv(b,el){
var bRef = null;
if (document.getElementById) {
bRef = document.getElementById(b);
} else {
bRef = document.all;
}
if(bRef.childNodes){
var z = bRef.childNodes;
for (var i=0;i<z.length; i++) {

// This will hide just the divs
// and show the one clicked on
if (z.nodeName =='DIV' && z.style) {
z.style.display = 'none';
if (z.id == el) z.style.display = '';
}
}
}
}
</script>
<style type="text/css">
.demo {width: 200px; height: 300px;}
</style>


*Add onload to body tag:*

<body onload="showDiv('base','');">


*Some play HTML to test it out on (love the colours!!)*


<div id="d00">This is div 00<br>
<a href="#sdf" onclick="
showDiv('base','sdf');this.blur();return false;">sdf</a>
<a href="#abc" onclick="
showDiv('base','abc');this.blur();
return false;">&nbsp;|&nbsp;abc</a>
<a href="#def" onclick="
showDiv('base','def');this.blur();
return false;">&nbsp;|&nbsp;def</a>
<a href="#ghi" onclick="
showDiv('base','ghi');this.blur();
return false;">&nbsp;|&nbsp;ghi</a>
</div>
<div id="base">
<div name="sdf" id="sdf" class="demo"
style="background-color: blue;">div sdf</div>
<div name="abc" id="abc" class="demo"
style="background-color: red;">div abc</div>
<div name="def" id="def" class="demo"
style="background-color: green;">div def</div>
<div name="ghi" id="ghi" class="demo"
style="background-color: pink;">div ghi</div>
</div>
 
R

Randy Webb

The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here's what I'm talking about:

var handler = new JSScriptHandler ();
handler.addItem (document.getElementById ('id1'));
handler.addItem (document.getElementById ('gsg'));

handler.Start (); // This method would actually define all event
handlers, etc.

This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().

If the script and HTML code on the main page is indicative of the
answers given there, its a site better left alone.

But, is it the policy of worcsnet.com to solicit questions for its
forums from Usenet?
 
S

SimonFx

An example you might wish to play with:

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript">
<!--
if(!document.getElementById) {
document.getElementById = document.all ? function(i) {return
document.all;} : function() {return null;};
}

function mySetStyleDisplay (myDiv, myStyle){
var obj = document.getElementById(myDiv);
if(obj && obj.style) {obj.style.display = myStyle;}
}

function myShow(myDiv){
mySetStyleDisplay (myDiv,'');
}

function myHide(myDiv){
mySetStyleDisplay (myDiv,'none');
}

function HideAllNotFirst (){
var obj = document.getElementById('uberDIV');
var i = 0;
for (var o in obj.childNodes){
if (obj.childNodes[o].nodeName == 'DIV') {
if (i==1){obj.childNodes[o].style.display = 'none';} else {i=1;};
}
}
}
-->
</script>

</HEAD>
<BODY>
<A HREF="#" onMouseOver="myShow('item_id1');"
onMouseOut="myHide('item_id1');">id1</a>
<A HREF="#" onMouseOver="myShow('item_gsd');"
onMouseOut="myHide('item_gsd');">gsd</a>
<A HREF="#" onMouseOver="myShow('item_ewd');"
onMouseOut="myHide('item_ewd');">ewd</a>
<A HREF="#" onMouseOver="myShow('item_fac');"
onMouseOut="myHide('item_fac');">fac</a>
<A HREF="#" onMouseOver="myShow('item_act');"
onMouseOut="myHide('item_act');">act</a>

<div ID=uberDIV>
<div ID=item_id1>id1</DIV>
<div ID=item_gsd>gsd</DIV>
<div ID=item_ewd>ewd</DIV>
<div ID=item_fac>fac</DIV>
<div ID=item_act>act</DIV>
</div>

<script type="text/javascript">
HideAllNotFirst ();
</script>
</BODY>
</HTML>
 
F

Fred Oz

SimonFx said:
An example you might wish to play with:
[...]

Or not.

Your suggesed code does not do what the OP asked, which is that the
div is hidden until its link is clicked on, whereupon it stays
displayed until another is clicked on.

It is also quite unreliable in Safari: HideAllNotFirst() does not
work at all.

And you could have added links to the div's in your <a> tags to make
the sans-JS version a little better.

Cheers, Fred.
 
S

SimonFx

Fred said:

Or so.

Maybe he can "play" with the example, because most of the material is
there. I'm sorry I did not write a complete, robust and fully tested
version on my time, unpaid.

Feel free to make additions or alterations.

I guess bitching about it is OK too, flameboy, this is usenet after all.
 
F

Fred Oz

SimonFx wrote:
[...]
Maybe he can "play" with the example, because most of the material is
there. I'm sorry I did not write a complete, robust and fully tested
version on my time, unpaid.

I just don't see the point in offering a solution that doesn't do what
is asked when a serviceable one has already been offered.
Feel free to make additions or alterations.

There is a solution below that is based on a similar algorithm to
yours. It was actually written completely independently.

It could be improved by being added dynamically on each href that has a
matching div id when the page loads, but I think that's unnecessarily
complex though not too hard to add if required. It's been tested in
IE 6, Safari and Firefox, I don't have an environment to test
document.all or alternatives to document.getElementById().
I guess bitching about it is OK too, flameboy, this is usenet after all.

Hardly a flame, the OP is somewhat of a novice and I think it's
reasonable to offer advice that you weren't prepared to include.


Have fun, Fred.

<script type="text/javascript">
function showDiv(b,el){
var bRef = null;
if (document.getElementById) {
bRef = document.getElementById(b);
} else {
// Use the following if you can test it
// otherwise substitute something else
// bRef = document.all;
}
if(bRef.childNodes){
var z = bRef.childNodes;
for (var i=0;i<z.length; i++) {

// This will hide just the divs
// and show the one clicked on
if (z.nodeName =='DIV' && z.style) {
z.style.display = 'none';
if (z.id == el) z.style.display = '';
}
}
}
}
</script>
<style type="text/css">
..demo {width: 200px; height: 300px;}
</style>

<div id="d00">This is div 00<br>
<a href="#sdf" onclick="
showDiv('base','sdf');this.blur();return false;">sdf</a>
<a href="#abc" onclick="
showDiv('base','abc');this.blur();return false;">&nbsp;|&nbsp;abc</a>
<a href="#def" onclick="
showDiv('base','def');this.blur();return false;">&nbsp;|&nbsp;def</a>
<a href="#ghi" onclick="
showDiv('base','ghi');this.blur();return false;">&nbsp;|&nbsp;ghi</a>
</div>
<div id="base">
<div name="sdf" id="sdf" class="demo"
style="background-color: blue;">div sdf</div>
<div name="abc" id="abc" class="demo"
style="background-color: red;">div abc</div>
<div name="def" id="def" class="demo"
style="background-color: green;">div def</div>
<div name="ghi" id="ghi" class="demo"
style="background-color: pink;">div ghi</div>
</div>
<script type="text/javascript">
// This could be included in a body onload tag
showDiv('base','');
</script>
 
G

GregS

Randy, the approach I just described (the one of using object oriented
JS classes) is very effective from developer's point of view. If
someone wants to
learn more about this technique, they are welcome to our forums. I'm
sorry that you got the wrong impression; I do not see anything wrong
in inviting people to our forums. You do not have to go there if you
do not want to.

As far as HTML/script on the main page is concerned, I do not see
anything wrong with it. This site was created in IAB Studio, and pages
are created in its WYSIWYG editors; what you actually see in the
browser is HTML generated on the fly. Our approach is different what
the usual web site would use, but it's more productive in many ways.
We also use a lot of advanced JS techniques, if you are interested to
learn more about it, you are welcome to visit our site.

GregS
IAB Studio developer
www.worcsnet.com
www.iabstudio.com
 
R

Randy Webb

GregS said:
Randy, the approach I just described (the one of using object oriented
JS classes) is very effective from developer's point of view. If
someone wants to learn more about this technique, they are welcome
to our forums. I'm sorry that you got the wrong impression; I do not
see anything wrong in inviting people to our forums. You do not have
to go there if you do not want to.


Fair enough. And I totally agree that object oriented classes are an
advantage. But when the document that they are presented in isn't valid
HTML, it makes trying to script it that much more difficult. That was my
only point.

As far as HTML/script on the main page is concerned, I do not see
anything wrong with it.

Load it in Mozilla, watch the loading bar. It hangs. Also, view the
screenshot that rf posted.

http://validator.w3.org/check?uri=http://www.worcsnet.com/mainLayout

lists 20 errors to start with.

And please don't top-post.
 
S

SimonFx

Ah! So looking at your code, what you are saying is that Safari treats
childNodes strictly as an array - the "for (foo in childNodes)" doesn't
work.

Tested Safari, and this is indeed the case. How interesting.

You said "don't have an environment to test document.all" but you also
said you tested with IE 6 - isn't that the document.all dom

Yeah, so now I am sitting about relaxed, you have made me feel guilty so
I have updated the damed thing. Even tho "WindAndWaves" has completed
his page :)

===

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript">
<!--
if(!document.getElementById) {
document.getElementById = document.all ? function(i) {return
document.all;} : function() {return null;};
}

function HideAllExcept (thisDiv){
var obj = document.getElementById('uberDIV');
for (var o=0; o<obj.childNodes.length; o++){
if (obj.childNodes[o].nodeName == 'DIV' && obj.childNodes[o].style) {
if (obj.childNodes[o].id == thisDiv)
{obj.childNodes[o].style.display = '';}
else {obj.childNodes[o].style.display = 'none';}
}
}
return false;
}

-->
</script>

</HEAD>
<BODY onLoad="HideAllExcept('item_id1');">
<A HREF="#id1" onClick="return HideAllExcept('item_id1');">id1</a>
<A HREF="#gsd" onClick="return HideAllExcept('item_gsd');">gsd</a>
<A HREF="#ewd" onClick="return HideAllExcept('item_ewd');">ewd</a>
<A HREF="#fac" onClick="return HideAllExcept('item_fac');">fac</a>
<A HREF="#act" onClick="return HideAllExcept('item_act');">act</a>

<div ID="uberDIV">
<div ID="item_id1">By my stuff</DIV>
<div ID="item_gsd">It's really good</DIV>
<div ID="item_ewd">It has features</DIV>
<div ID="item_fac">Alternatives suck</DIV>
<div ID="item_act">Send money now</DIV>
</div>

</BODY>
</HTML>
 
M

Michael Winter

Ah! So looking at your code, what you are saying is that Safari treats
childNodes strictly as an array - the "for (foo in childNodes)" doesn't
work.

I don't see any reason why it should, really. The DOM Specification states
how an ECMAScript program can access the contents of a NodeList object:

Object NodeList

The NodeList object has the following properties:
length
This read-only property is of type Number.

The NodeList object has the following methods:
item(index)
This method returns a Node object.
The index parameter is of type Number.

Note: This object can also be dereferenced using square bracket
notation (e.g. obj[1]). Dereferencing with an integer index
is equivalent to invoking the item method with that index.

Using those features is guaranteed to work[1], whereas using for..in
relies on the host making each element in the collection enumerable, which
it is under no obligation to do.

[snip]
You said "don't have an environment to test document.all" but you also
said you tested with IE 6 - isn't that the document.all dom

Yes, but IE would take the getElementById code path if that is presented
first (and it should be). Of course, you could force the document.all
route for testing purposes if you were so inclined. Normally, I do that by
changing

if(document.getElementById) {

(or something similar) to

if(/*document.getElementById*/ false) {

That is, temporarily comment out the gEBI test and replace it with
something will always fail. It's quick and easy to restore.

[snip]
function HideAllExcept (thisDiv){
var obj = document.getElementById('uberDIV');
for (var o=0; o<obj.childNodes.length; o++){
if (obj.childNodes[o].nodeName == 'DIV'
&& obj.childNodes[o].style) {
if (obj.childNodes[o].id == thisDiv)
{obj.childNodes[o].style.display = '';}
else {obj.childNodes[o].style.display = 'none';}
}
}
return false;
}

You could simplify that somewhat by making the user agent find the DIVs
for you:

function setStyle(obj, prop, value) {
if(obj && (obj = obj.style) {obj[prop] = value;}
return !!obj;
}

function hideAllExcept(thisDiv) {
var obj = document.getElementById('uberDIV'), divs;
if(obj && obj.getElementsByTagName) {
divs = obj.getElementsByTagName('DIV');
for(var i = 0, n = divs.length; i < n; ++i) {
setStyle(
divs,
'display',
(thisDiv == divs.id) ? '' : 'none'
);
}
}
}

Like document.getElementById, Element.getElementsByTagName can be
simulated for old IE versions[2]:

var getElementsByTagName = function(o, n) {
return (getElementsByTagName = o.getElementsByTagName ?
function(o, n) {return o.getElementsByTagName(n);}
: (o.all && o.all.tags) ?
function(o, n) {
o = o.all; return (('*' == n) ? o : o.tags(n)) || [];
}
: function() {return [];})(o, n);
};

This has a slightly different signature from the DOM-specified version.
The first argument is the element getElementsByTagName should be called
from. The second argument is the tag name to match (or an asterisk (*) for
all elements).

The hideAllExcept function above would be changed to

function hideAllExcept(thisDiv) {
var obj = document.getElementById('uberDIV'), divs;
/* Change starts here. */
if(obj) {
divs = getElementsByTagName(obj, 'DIV');
/* Change ends here. */
for(var i = 0, n = divs.length; i < n; ++i) {
setStyle(
divs,
'display',
(thisDiv == divs.id) ? '' : 'none'
);
}
}
}

with this addition.

Enjoy,
Mike


[1] Personally, I'd use square brackets. I'm sure that a browser I was
testing with once (I think an earlier Opera version) didn't provide an
item method for collections.

[2] This code assumes that getElementsByTagName would be implemented on
all elements, and there are no special cases, such as the method existing
on the document object, but no others. If special cases are possible, I've
included a safer, but less-than-optimal, implementation below:

function getElementsByTagName(o, n) {
var r = [];
if(o.getElementsByTagName) {
r = o.getElementsByTagName(n);
} else if((o = o.all) && o.tags) {
r = (('*' == n) ? o : o.tags(n)) || [];
}
return r;
}

If the special cases are specific, it may be possible to modify the
previous version to perform preliminary tests, rather than assuming gEBTN
on one element means gEBTN on all elements.
 
F

Fred Oz

[...]

Our contrary hearts, having driven us into a coding frenzy, are
quenched forthwith. For Winter stands astride us all like a colossus,
sweeping the earth with the depth and breadth of his posts so that none
may remain in ignorance.

I am blown away ...again...

Hail Mike - Fred.
 
M

Michael Winter

[snip]
Our contrary hearts, having driven us into a coding frenzy, are
quenched forthwith. For Winter stands astride us all like a
colossus, sweeping the earth with the depth and breadth of his
posts so that none may remain in ignorance.
LMFAO!

I am blown away ...again...

I doubt that, somehow. :p
Hail Mike - Fred.

Stop taking the piss! Save praise for the truly gifted around here. :)

Mike
 
R

Richard Cornford

GregS said:
Randy, the approach I just described (the one of using object
oriented JS classes) is very effective from developer's point
of view.

It certainly can be, though it can also be over the top if the context
of its application is sufficiently simple.
If someone wants to learn more about this technique,
they are welcome to our forums.

Maybe they are, but anyone reading the suggestion has already discovered
comp.lang.javascript, where they may get the attention of quite a number
of contributors, some of whom specialise in OO javascript.
I'm sorry that you got the wrong impression; I do
not see anything wrong in inviting people to our forums.
You do not have to go there if you do not want to.

That question is probably best addressed by considering what would be
best for the OP. A small private forum with maybe a couple of (more or
less) knowledgeable contributors or a public newsgroup where any
responses given will be subject to critical peer-review, and a diversity
of opinions expressed and debated? If the OP is happy to comply with
Usenet conventions the latter is likely to be the more productive
activity.
As far as HTML/script on the main page is concerned,
I do not see anything wrong with it.

You don't? You have mark-up like:-

| <P> </P>
| <P> </P>
| <P> </P>
| <P> </P>
| <P> </P>
| <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
| <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
| <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
| <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
| <BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
| <P align=left> </P></BLOCKQUOTE></BLOCKQUOTE>
| </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
| <P> </P>
| <P> </P>
| <P> </P>
| <P> </P>

- and you don't see anything wrong with that? And why does a page that
imports no less than 14 stylesheets need so many inline style
attributes?
This site was created in IAB Studio, and pages
are created in its WYSIWYG editors; what you actually
see in the browser is HTML generated on the fly.

And doesn't it take an age to load? (Not surprising given the mark-up
bloat, but it also feels like the image optimisation leaves a lot to be
desired.)
Our approach is different what the usual web site would
use, but it's more productive in many ways.
We also use a lot of advanced JS techniques, if you are interested
to learn more about it, you are welcome to visit our site.

"advanced JS techniques"; not an easy claim to quantify. One person's
advanced technique is old-hat to another, and a bad idea to a third. A
few months ago I looked at a javascript book that featured the work
"advanced" in its title, and found a collection of techniques so bad
that many would qualify as dangerous. I recall Jim Ley suggesting that
the most advanced javascript in the world was to be found in posts to
comp.lang.javascript, and I find that a reasonable assertion when I
monitor javascript blogs and find individuals enthusing about 'new'
techniques that have been being posted to this group on and off for a
couple of years. That is just a consequence of the group having a
reasonable core of enthusiastic contributors interested in trying out
new ideas (newly invented or just new to them) and doing so under the
critical scrutiny of their fellows. (the bad ideas, and the poor
implementations, get pointed out very quickly)

Still, without getting into how advance any particular technique may be,
the code on <URL: http://www.worcsnet.com > is not without relevance in
this context. Taking just one file at random:-

| <SCRIPT LANGUAGE="JavaScript1.2"
| SRC="/js/Common/HttpRequest.js"></SCRIPT>

-, and disregarding the invalid HTML 4.01 markup with its deprecated
(and inadvisable) language attribute, We find the script:-

<quote>
var QueryType = { SqlQuery:0};
var DataRequestType = {
SQL : 0,
/*Regular SQL Query*/
Search : 1,
/*Search query; SearchClass tells the Java class name, the rest
is search-specific*/
Lookup : 2,
Update : 3,
Validate:4,
UDCLayout : 5,
FormUpdate : 6,
DewUpdate:7,
PageUpdate : 8,
PageContentUpdate : 9,
ReloadLookup : 10
};

function HttpRequest (id, docObj) {
this.id = id;
this.docObj=docObj;
if(typeof (this.constructor.prototype.PrototypeFinishedHttpRequest)
== 'undefined'){
this.constructor.prototype.prepareDataRequest=prepareDataRequest;
this.constructor.prototype.PrototypeFinishedHttpRequest=true;
};
function prepareFormDOM(targetFrameId, docObj, id, action,
method, params){
var formObj = docObj.document.createElement ("FORM");
docObj.document.body.appendChild (formObj);
formObj.id = id;
formObj.action = action;
formObj.method = method;
formObj.target = "_self";
for (var i = 0; i < params.length; i ++){
for (j in params ){
var paramName = j;
var paramValue = params [j];
var inputDef = "INPUT";
var inputHidden = docObj.document.createElement(inputDef);
inputHidden.setAttribute ("name", paramName);
inputHidden.setAttribute ("type", "hidden");
inputHidden.setAttribute ("value", paramValue);
formObj.appendChild (inputHidden);
}
}
return formObj;
};
function prepareDataRequest(targetFrameId, queryType,
requestType, params){
var returnObj = null;
switch (queryType){
case QueryType.SqlQuery:
params.push ({QT:"SQL"});
break;
}
var requestHost = GetIABBaseURL() + '/DataRequestHandler';
switch (requestType){
case DataRequestType.SQL:
params.push ({RT:"SQL"});
break;
case DataRequestType.Search:
params.push ({RT:"Search"});
break;
case DataRequestType.Lookup:
params.push ({RT:"Lookup"});
break;
case DataRequestType.Update:
params.push ({RT:"Update"});
break;
case DataRequestType.Validate:
params.push ({RT:"Validate"});
break;
case DataRequestType.UDCLayout:
params.push ({RT:"UDCLayout"});
break;
case DataRequestType.FormUpdate:
params.push ({RT:"FormUpdate"});
break;
case DataRequestType.DewUpdate:
params.push ({RT:"DewUpdate"});
break;
case DataRequestType.PageUpdate:
params.push ({RT:"PageUpdate"});
break;
case DataRequestType.PageContentUpdate:
params.push ({RT:"PageContentUpdate"});
break;
case DataRequestType.ReloadLookup:
params.push ({RT:"reloadLookup"});
break;
}
returnObj = prepareFormDOM (targetFrameId, this.docObj, this.id,
requestHost, "POST", params);
return returnObj;
};
}
</quote>

Where apparent misconceptions about the nature of javascript, its OO
application, and a disregard for OO general principles, has resulted in
an implementation that is approaching being perverse.

The mistake of making the - j - variable in - prepareFormDOM - global is
obvious and easily rectified. The main faults lie in the design of the -
HttpRequest - 'class'. First the data objects - QueryType - and -
DataRequestType - are clearly bound with the 'class' in their
employment, but both are created as global variables. OO design would
have suggested both be contained by the 'class'; so static, preferably
private static as they should not be needed outside of the 'class' and
its instances, but public static would have been satisfactory (and
simpler to implement with javascript).

The - HttpRequest - constructor features two inner function definitions
(both followed by empty statements for some unknown reason), neither
make any use of the fact that they are inner functions, and indeed only
the function object instances created during the instantiation of the
first - HttpRequest - object are ever used. The function objects created
during subsequent executions of the - HttpRequest - do no more than
consume clock cycles being created and memory space while they are
awaiting garbage collection.

The first instance of the - prepareDataRequest - function created will
be assigned to the prototype of the - HttpRequest - function, but the
test for that assignment is repeated on all subsequent executions of -
HttpRequest -. This is certainly a case where the normal practice of
assigning a function reference to a property of the function's prototype
would be simpler, and more efficient.

Of course it is the closure formed with the instantiation of the first -
HttpRequest -, by assigning the - prepareDataRequest - function to the
constructor's prototype, that allows the - prepareDataRequest - function
to access the first instance of the - prepareFormDOM -, but that
particular closure (with its consequential needless overheads on
subsequent - HttpRequest - object instantiations) is not the only means
of making that function available. Indeed it is questionable whether it
makes any sense for - prepareFormDOM - to be a separate function as it
is always called form - prepareDataRequest - and unavailable to any
other code. But the fact that - prepareFormDOM - is only interested in
its parameters (has no interest in - HttpRequest - object instances,
even the first instance with which it is bound by the closure formed)
suggest that - prepareFormDOM - should be static in addition to the two
data structures (or at least more explicitly static).

So one implementation pattern that provides all of the encapsulation
called for the OO, and avoids the inefficiencies in the original might
go:-

var HttpRequest = (fucntion(){
var QueryType = { SqlQuery:0};
var DataRequestType = {
SQL : 0,
... //etc.
ReloadLookup : 10
};
function prepareFormDOM(targetFrameId, docObj, id, action,
method, params){
var formObj = docObj.document.createElement ("FORM");
... //etc.
return formObj;
}
function constr(id, docObj){
this.id = id;
this.docObj=docObj;
}
constr.prototype.prepareDataRequest = function(targetFrameId,
queryType, requestType, params){
switch (queryType){
case QueryType.SqlQuery:
params.push ({QT:"SQL"});
break;
}
... //etc.
return prepareFormDOM(targetFrameId, this.docObj, this.id,
requestHost, "POST", params);
};
return constr;
})();

So where would be the best place to go if you wanted to understand how
and why that formulation works?

Randy Webb <[email protected]> wrote in message
<snip>

Please do not top-post to comp.lang.javascript.

Richard.
 
G

GregS

Andrew Thompson said:
Thanks no. [1]
..when the document that they are presented in isn't valid
HTML, it makes trying to script it that much more difficult. That was my
only point.

Were you looking at the responses to this?
<http://groups.google.com/[email protected]>

Or more generally, that the only time that IAB Studio got responses
to announcements, the replies were words to the effect of
'breaks my browser'.
Load it in Mozilla, watch the loading bar. It hangs. Also, view the
screenshot that rf posted.

http://validator.w3.org/check?uri=http://www.worcsnet.com/mainLayout

lists 20 errors to start with.

[1] I think the developers of IAB Studio need to spend a lot more
time *lurking* and *asking questions* on c.l.js, c.i.w.a.html,
c.i.w.a.stylesheets and c.i.w.a.site-design before they go offering
advice to others, especially since their software is churning out pages.


Andrew Thompson, I'm one of the developers of IAB Studio. I do not
think you ever used IAB Studio, and your remarks seem to be quite
rude, offending and pointless; I do not see any reason for that. It's
quite strange to me that you post such comments without even knowing
what IAB Studio is. Given this, your advice is just not credible.

GregS
IAB Studio Developer
www.worcsnet.com
www.iabstudio.com
 
G

GregS

Randy Webb said:
Fair enough. And I totally agree that object oriented classes are an
advantage. But when the document that they are presented in isn't valid
HTML, it makes trying to script it that much more difficult. That was my
only point.



Load it in Mozilla, watch the loading bar. It hangs. Also, view the
screenshot that rf posted.

http://validator.w3.org/check?uri=http://www.worcsnet.com/mainLayout

lists 20 errors to start with.

And please don't top-post.

Randy, thanks you for your comments.

I think that not always "incorrect" HTML is incorrect. For example,
this parser of yours seems to find error even if there are no errors.
For example:

Line 10, column 62: general entity "pageNum" not defined and no
default entity

....lling="auto" src="main?AC=showPage&pageNum=10003"

This is a perfectly correct URL. If you look at the source, you will
see that it is a simple frameset. I think this parser is not the most
trustworthy.

I'm sure that you know that sometimes developers do things like that:

<DIV myattr1="blablabal" myattr2="blablabla" >, which makes perfect
sense in the context of your web application, but is not "perfect"
HTML. Or you can use custom tags, which are not "perfect" HTML, but it
still does not make it wrong - again, in the context of your
application.

The loading bar is actually a FF/NN/Mozilla bug. If you create many
dynamic iframes, then sometimes FF does not stop 'loading' the page,
although it's already been loaded. IE handles this situation a lot
better.

And as for the picture rf posted - yes, if you change default font
sizes in FireFox (like, setting the minimum font size), that's exactly
how the page will look. But half of all web sites will look the same;
I'm not sure what point RF was trying to make. It may be more of a
design issue - if I say style="font-size:12", it means I want it this
way.

And I'd like to mention that developing web applications (actually RIA
apps) in IAB Studio is a bit different than in other HTML editors; it
has very little to do with scripting HTML (or HTML in general). HTML
in IAB pages serves more like data for the runtime engine, which
creates actual controls... So while I understand your concern about
invalid HTML, it is not really applicable to IAB Studio. Anyway,
thanks for your remarks.

GregS
IAB Studio developer
www.worcsnet.com
www.iabstudio.com
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top