Af en toe werkt de JQuerycode niet (waarom)?
ik heb een scriptje gemaakt en laten testen door verschillende personen. Echter krijg ik van sommigen de melding dat het systeem niet werkt.
Ik test hem thuis in IE, FF & Chrome en hier geeft hij geen probleem...
Kunnen jullie eens jullie licht hierover laten schijnen?
Gaat het beter indien de JQuery code onderaan (na het formulier komt te staan)?
Groeten,
Olivier Peeters
Code (php)
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
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
<!-- JQuery aanroepen -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- Einde JQuery aanroepen -->
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$('#login').hide();
$('#gegevens').show();
// http://stackoverflow.com/questions/849693/what-is-the-best-way-to-submit-disabled-inputs-as-part-of-a-jquery-ajax-request
form = form.serialize();// dit leest de data uit het formulier en zet alles in de juiste vorm
$('input[disabled]').each( function() {
form = form + '&' + $(this).attr('name') + '=' + $(this).val();
});
$('select[disabled]').each( function() {
form = form + '&' + $(this).attr('name') + '=' + $(this).val();
});
//var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
});
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
// VAL AAnsluiting enkel zichtbaar voor Bestuurs & trainers
if(aansluiting === "Bestuur/Trainer/Jury") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
// KAVVV Aansluiting NIET zichtbaar voor Steunende leden
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
});
});
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
$('#valaansluitingtr').hide();
$('#opmerkingkavvv').html('<i>KAVVV Aansluiting is inbegrepen en verplicht voor jeugdleden</i>');
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
$('#opmerkingkavvv').html('');
}
}
</script>
<?php
// Datepicker voor formulier -->
?>
<?php
// Connecteren met database
// SQL uitvoeren enzo *KNIP*
?>
<?php
// Toepassing script indien jeugdatleet
if($Geboorte[0]>='2000') { ?>
<script type="text/javascript">jeugdkavvvaansluiting();</script>
<?php } ?>
<script type="text/javascript">
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer/Jury") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
</script>
<form name="3" id="3" action="#" method="post">
// Form *KNIP*
<input type="submit" id="Ga door" class="Ga door" id="Ga door" value="Ga door">
</form>
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- Einde JQuery aanroepen -->
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$('#login').hide();
$('#gegevens').show();
// http://stackoverflow.com/questions/849693/what-is-the-best-way-to-submit-disabled-inputs-as-part-of-a-jquery-ajax-request
form = form.serialize();// dit leest de data uit het formulier en zet alles in de juiste vorm
$('input[disabled]').each( function() {
form = form + '&' + $(this).attr('name') + '=' + $(this).val();
});
$('select[disabled]').each( function() {
form = form + '&' + $(this).attr('name') + '=' + $(this).val();
});
//var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
});
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
// VAL AAnsluiting enkel zichtbaar voor Bestuurs & trainers
if(aansluiting === "Bestuur/Trainer/Jury") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
// KAVVV Aansluiting NIET zichtbaar voor Steunende leden
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
});
});
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
$('#valaansluitingtr').hide();
$('#opmerkingkavvv').html('<i>KAVVV Aansluiting is inbegrepen en verplicht voor jeugdleden</i>');
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
$('#opmerkingkavvv').html('');
}
}
</script>
<?php
// Datepicker voor formulier -->
?>
<?php
// Connecteren met database
// SQL uitvoeren enzo *KNIP*
?>
<?php
// Toepassing script indien jeugdatleet
if($Geboorte[0]>='2000') { ?>
<script type="text/javascript">jeugdkavvvaansluiting();</script>
<?php } ?>
<script type="text/javascript">
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer/Jury") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
</script>
<form name="3" id="3" action="#" method="post">
// Form *KNIP*
<input type="submit" id="Ga door" class="Ga door" id="Ga door" value="Ga door">
</form>
<br />
Gewijzigd op 12/09/2012 14:10:14 door Olivier Peeters
Groeten,
Olivier
Het eerste wat me opvalt, is dat je niet alles in 1 blok zet, binnen
Code (php)
1
$(document).ready(function($) {
Door lijn 35 en lijn 37 te verwijderen, zou je van die twee blokken 1 blok maken; dat zou al helpen.
Ook de stukken code vanaf lijn 61 en vanaf lijn 97 ... die zouden best binnen $(document).ready(function($) { komen.
Maar ja, dit zal nog extra gevolgen hebben; je kan dit niet zomaar doen.
Ondertussen zie ik nog iets wat je wel onmiddellijk kan aanpakken:
Code (php)
1
2
2
<form name="3" id="3" action="#" method="post">
<input type="submit" id="Ga door" class="Ga door" id="Ga door" value="Ga door">
<input type="submit" id="Ga door" class="Ga door" id="Ga door" value="Ga door">
Dit is echt absoluut niet de bedoeling. Wanneer je met javascript werkt, moet de HTML goed zitten, anders verwondert het me niet als bepaalde browsers het niet aanvaarden.
* id
id moet 1 woord zijn. Het woord begint trouwens met een letter en bevat geen speciale tekens. De underscore "_" mag wel. id="3" of id="Ga door" kunnen echt niet.
id="input2" ofwel id="image_3" ... dat soort dingen mogen.
En uiteraard moet die id uniek zijn. De zelfde id mag absoluut niet twee keer voorkomen (ook niet twee keer de id invullen binnen 1 element).
* class
class="Ga door" is wel mogelijk. Maar dit betekent dat het element zowel class="Ga" als class="door" bevat. Dit lijkt me hier niet de bedoeling.
Gewijzigd op 12/09/2012 16:20:52 door Kris Peeters
- Meerdere ready callbacks: jQuery slaat deze op in een speciale queue voor callbacks die bij domready allemaal worden uitgevoerd (zoals ik ooit eens hier uitlegde). Ik gebruik dit zelf ook best wel, aangezien je zo perfect verschillende scopes kan creëren (waar het gebruik van een IFFI ook voor zorgt)
- zowel id als classnamen mogen volgens de HTML en JS specificatie beginnen met een cijfer of elk vreemd teken. Alleen de CSS specificatie verbied dit. Hierdoor werkt dit icm JS wel gewoon perfect (zie ook http://mothereffingcssescapes.com ).
- Een meerdere ID attributen (of class of style of welk attribuut dan ook) zorgt er niet voor dat je meerdere ID's meegeeft aan een element. Alleen de waarde van het eerste attribuut wordt gepakt.
Olivier, ik zou eerst graag wat meer informatie willen. Maar als ik het zo bekijk zal ik als eerst 1 ding willen aanraden: Een local fallback. Je slaat het jQuery bestand op op de server, lokaal dus. Je linkt gewoon naar het CDN bestand (zoals je nu hebt) alleen je checkt of het bestand is geladen, is dit niet zo dan laat je het lokale bestand:
Code (php)
1
2
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write(unescape('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>'))</script>
<script type="text/javascript">window.jQuery || document.write(unescape('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>'))</script>
Wat je hier ziet: regel 1 is het gewoon laden van de CDN (wel 1.7.1, verander dit naar jou versie)
Regel 2 is het checken of jQuery bestaat. Zodra die bestaat bestaat het window.jQuery object. Als dat niet bestand gaan we naar de andere kant van de or (||) en zien we dat we een nieuw script element echoën. Hierin verwijzen we naar ons lokaal bestand (in dit geval "js/libs/jquery-1.7.1.min.js")
Wat me verder nog zo opvalt is een optimalisatie tip. Je haalt soms 2 keer hetzelfde element op: $('#gegevens').show() en $('#gegevens').html(...). Dit zorgt ervoor dat jQuery 2x de hele DOM moet doorzoeken opzoek naar dat element. Het is verstandiger dit element op te slaan in een variabele:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var gegevensElem = $('#gegevens');
// even later
gegevensElem.show();
// nog wat later
gegevensElem.html(...);
// even later
gegevensElem.show();
// nog wat later
gegevensElem.html(...);
Ook die if statements op 37 - 57 zijn niet echt handig:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
if(aansluiting === "Bestuur/Trainer/Jury") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
}
Eerst die laatste if statement: Als aansluiting gelijk is aan "Steunend lid" gaat hij naar het if statement anders naar het else statement. Die else if die nog een keer kijkt of aansluiting dan niet gelijk is aan "Steunend lid" is volledig nutteloos, aangezien het dat sowieso wel is, anders was hij wel naar de if statement gegaan.
Verder hoeft de 2e if niet meer uitgevoerd te worden als de eerste if al een succes was. Je kan ze dus beter combineren tot 1 if..elseif..else statement, of nog beter 1 switch statement:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
switch (aansluiting) {
case 'Bestuur/Trainer/Jury':
// ...
break;
case 'Bestuur/Trainer':
// ...
break;
case 'Steunend lid':
// ...
break;
default:
// ...
break;
}
case 'Bestuur/Trainer/Jury':
// ...
break;
case 'Bestuur/Trainer':
// ...
break;
case 'Steunend lid':
// ...
break;
default:
// ...
break;
}
Wouter J op 12/09/2012 15:53:55:
...
Maar de meeste punten die je aandraagt zouden geen problemen moeten oplopen:
...
Maar de meeste punten die je aandraagt zouden geen problemen moeten oplopen:
...
Ik weet het. meestal ben ik dan ook genuanceerd (het zou beter zijn...); maar het blijft toch goed advies.
Het heeft trouwens ook te maken met iets dat meer structureel is. Dit script toont mooi hoe het script alles regelt dicht bij de plek waar de betrokken HTML staat; in plaats van de onderdelen te groeperen (post request bovenaan, javascript wat samen houden, ...)
Als dit script zo blijft groeien, zal de overzichtelijkheid nog sterker afnemen en wordt het nog moeilijker om te helpen.
Ook dingen als: het mag wel in HTML, maar niet in css ...
Tja, dan adviseer ik liever dat het niet mag.
Ik vrees dan weer dat veel van jouw punten misschien een beetje hooggegrepen zijn.
Gewijzigd op 12/09/2012 16:26:32 door Kris Peeters