Toon posts:

[JavaScript] - Scriptje dynamiseren...

Pagina: 1
Acties:

donderdag 8 mei 2003 20:23

Acties:

Verwijderd

Topicstarter
Ik heb volgende HTML pagina die gemapped wordt in Progress:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212

<html>
<head>
<title> 
<!--WSTag name = "c_title" -->
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--WSStart name="scriptdir" -->
<link rel="stylesheet" href="<!--virtdir-->/javascripts/meldpunt.css" type="text/css">
<!--WSEnd -->
<script language = "javascript">
<!--WSStart name="ImgDir" -->

function changeStatus(varSection)
{   
  if(varSection == "Opvolging_image")
  { if(document.all.OpvolgingID.className == "hidden") 
    { document.all.OpvolgingID.className = "normal"
      document.all.OpvolgingTR.className = "selectionBar"
      document.Opvolging_image.src = "<!--ImgLoc-->chevronUp.gif"
    }
    else 
    { document.all.OpvolgingID.className = "hidden"
      document.all.OpvolgingTR.className = "selectionBarDisabled"
      document.Opvolging_image.src = "<!--ImgLoc-->chevronDown.gif"
    }
  }
  else {
    if(document.all.infoID.className == "hidden")
      { document.all.infoID.className = "normal"
        document.all.infoTR.className = "selectionBar"
        document.info_image.src = "<!--ImgLoc-->chevronUp.gif"
      }
      else 
      { document.all.infoID.className = "hidden"
        document.all.infoTR.className = "selectionBarDisabled"
        document.info_image.src = "<!--ImgLoc-->chevronDown.gif"
      }
    }
}



<!--WSEnd -->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

</head>
<body onLoad = "changeStatus('x')">

<form name = "form1" method = "post">

  <table width="100%" border="0" cellspacing="3" cellpadding="0" align="left">
  <tr> 
    <td width ="70%" rowspan = '2' class = "screenTitleClass" valign ="top"> 
      <!--WSTag name="c_title" -->
    </td>
    <th><!--WSTag name = "lbl_EvenementNummer" --></th>
    <th><!--WSTag name = "lbl_EvenementDatum" --></th>
    <th><!--WSTag name = "lbl_EvenementLocatie" --></th>
  </tr>
  <tr>
    <td width=10% align="center"><input type="text" name="fi_EvenementNummer" class="nonEditableTableClass" contenteditable = "false"></td>
    <td width=10% align="center"><input type="text" name="fi_EvenementDatum" class="nonEditableTableClass" contenteditable = "false"></td>
    <td width=10% align="center"><input type="text" name="fi_EvenementLocatie" class="nonEditableTableClass" contenteditable = "false"></td>
  </tr>
</table>

<br><br><br><br>

<table class = "tableSelectionBar" align = "center" border="0" cellpadding="0" cellspacing="0">
  <tr ID="infoTR" class="selectionbar">
    <td><LABEL CLASS="subtitle"><!--WSTag name = "lbl_info_evenement" --></LABEL></td><!--WSStart name=imgDir -->
    <td colspan="2" height="15px" align="right" valign="middle">[img]"<!--ImgLoc-->chevronUp.gif"[/img]<!--WSEnd --></td>
  </tr>
</table>



  <DIV ID="infoID">
    <table border="0" cellpadding="0" cellspacing="0" >
      <tr>
      <td class="indentclass" ><label><!--WSTag name = "lbl_VerenigingNummer" --></label></td>
      <td ><input type="text" name="fi_VerenigingNr"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_Datum" --></label></td>
      <td><input name="fi_datum" type="text" size="10"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_Tijdstip" --></label></td>
      <td><input type="text" name="fi_Tijdstip"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_DatumAanvraag" --></label> </td>
      <td><input name="fi_DatumAanvraag" type="text" size="10"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_Omschrijving" --></label></td>
      <td><input type="text" name="fi_Omschrijving"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_CommentaarBurger" --></label></td>
      <td><input type="text" name="fi_CommentaarBurger"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_CommentaarDispatch" --></label></td>
      <td><input type="text" name="fi_CommentaarDispatch">
      </td>
    </tr>
    <tr>
      <td class="indentclass"><label><!--WSTag name = "lbl_OpenluchtLogical" --></label></td>
      <td><input type="checkbox" name="cbx_OpenluchtLogical"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_PubliekLogical" --></label></td>
      <td><input type="checkbox" name="cbx_PubliekLogical"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_AdministratieOk" --></label></td>
      <td><input type="checkbox" name="cbx_AdministratieOK"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_VergunningsPlichtig" --></label></td>
      <td><input type="checkbox" name="cbx_VergunningsPlichtig"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_MeldingsPlichtig" --></label></td>
      <td><input type="checkbox" name="cbx_MeldingsPlichtig"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "ExtraInfoGevraagdDispatch" --></label></td>
      <td>
      <textarea name = "txt_ExtraInfoGevraagdDispatch" class = "EditableClass" ></textarea></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_SoortEvenementNr" --></label></td>
      <td><input type="text" name="fi_SoortEvenementNr"></td>
    </tr>
    <tr>
      <td class="indentClass"><LABEL><!--WSTag name = "lbl_GebrNr" --></label></td>
      <td><input type="text" name="fi_GebrNr"></td>
    </tr>
  </table>
 </DIV>
 <br>
<table class = "tableSelectionBar" align = "center" border="0" cellpadding="0" cellspacing="0">
  <tr ID="OpvolgingTR" class="selectionbar">
    <td><LABEL CLASS="subtitle"><!--WSTag name = "lbl_algemeen" --></LABEL></td><!--WSStart name=imgDir -->
    <td colspan="2" height="15px" align="right" valign="middle">[img]"<!--ImgLoc-->chevronUp.gif"[/img]<!--WSEnd --></td>
  </tr>
</table>

<div id="OpvolgingID">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td>&nbsp;</td>
        <td width="100"> 
          <LABEL><!--WSTag name = "lbl_DatumDoorgestuurd" --></label>
        </td>
        <td width="100" > 
          <LABEL><!--WSTag name = "lbl_DatumCommentaar" --></label>
        </td>
        <td ><LABEL><!--WSTag name = "lbl_Commentaar" --></label>
        </td>
      </tr>
      <tr> 
        <td class="indentClass"><LABEL><!--WSTag name = "lbl_CommentaarPolitie" --></label>
        </td>
        <td><input name="fi_datum_verzonden_politie" type="text" size="10"></td>
        <td><input name="fi_datum_commentaar_politie" type="text" size="10"></td>
        <td><textarea name = "txt_CommentaarPolitie" class="noneditableClass"></textarea></td>
      </tr>
      <tr> 
        <td class="indentClass"><LABEL><!--WSTag name = "lbl_ReactieGewest" --></label>
        </td>
        <td><input name="fi_datum_verzonden_gewest" type="text" size="10"></td>
        <td><input name="fi_datum_reactie_gewest" type="text" size="10"></td>
        <td><textarea name = "txt_ReactieGewest" class = "EditableClass" ></textarea></td>
      </tr>
      <tr> 
        <td class="indentClass"><LABEL><!--WSTag name = "lbl_CommentaarCBS" --></label>
        </td>
        <td><input name="fi_datum_verzonden_CBS" type="text" size="10"></td>
        <td><input name="fi_datum_reactie_CBS" type="text" size="10"></td>
        <td><textarea name = "txt_CommentaarCBS" class = "nonEditableClass" contenteditable = "false"></textarea></td>
      </tr>
      <tr><td class="indentClass"><label><!--WSTag name = "lbl_commentaardispatch" --></label></td>
          <td></td>
          <td></td>
          <td><textarea name = "txt_CommentaarDispatch" class = "EditableClass" ></textarea></td>
    </tr>
    </table><br>
  </div>
  
  <!--WSStart name="actiesvisible" -->
  <!--acties-->
  <!--WSEnd -->
  
  <br>
  <div id="knoppen1" style="visibility1"></div>
    </form>
</body>
</html>


Ik wil deze code voor een stuk herbruiken, maar op zo'n manier dan ik met 4GL unieke IDs genereer voor de <div> en <tr> in plaats van ze hard te coderen zoals hier. Op die manier kan ik meer dan 3 tables maken, telkens voor een apart record.

Hoe moet ik dat javascript changeStatus () aanpassen om ervoor te zorgen dat waar bvb document.all.OpvolgingID.className, die OpvolgingID wordt vervangen door de waarde van een parameter die ik wil meegeven?

'k ben niet echt expert op JavaScript vlak.

donderdag 8 mei 2003 20:30

Acties:
  • Glimi
  • Registratie: Augustus 2000
  • Niet online

Glimi

Designer Drugs

(overleden)
Verwijderd schreef op 08 mei 2003 @ 20:23:
'k ben niet echt expert op JavaScript vlak.
Wij hier in P&W ook niet ;) Die experts zitten in W&G :) Vandaar dat ik het topic daarheen ga sturen.
Wel een tip: Kort je code zoveel mogelijk in als het kan. Zo gaat bijna niemand het lezen nl :)

donderdag 8 mei 2003 21:34

Acties:

Verwijderd

Je kunt gewoon nog een argument in je functie zetten:
function changeStatus(varSection,divding){

}
Ipv document.all.OpvolgingID kun je dan document.getElementById(divding) gebruiken.
Dat is sowieso beter, document.all is MS DOM document.getElementById is W3C DOM

Ik denk verder dat het script nog wel voor meer verbeteringen in aanmerking komt.
Ik weet niet wat er gebeurd, maar als je allemaal dingen aan het veranderen binnenin de div waarvan je de ID als variabele mee wil geven, dan zou je door efficient te werken met contextual selectors (e.g. div.dit span.dat) de functie een stuk kunnen vereenvoudigen.
Reageer