Tijden veranderen
.load functie
Ik heb wat advies hier en daar aangenomen en heb wat gebruik gemaakt van jQuery.
Ik ben er net mee begonnen en loop nog tegen een heleboel problemen aan.
Ik heb dit al:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#idKlant').focus(function(){
var str = $('#idKlant').val();
$.post("contact.php", { idKlant: str },
function(data) {
$('#contact').html(data);
});
});
});
</script>
$(document).ready(function() {
$('#idKlant').focus(function(){
var str = $('#idKlant').val();
$.post("contact.php", { idKlant: str },
function(data) {
$('#contact').html(data);
});
});
});
</script>
Nu wil ik dat als #idKlant de value 'Nieuw' is dat er een formulier word geladen.
Dat heb ik geprobeerd met het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#idKlant').change(function(){
var str = $('#idKlant').val();
if (str=='Nieuw')
{
$.post("new_klant.php", {},
function(data) {
$('#contact').html(data);
});
}
});
});
</script>
$(document).ready(function() {
$('#idKlant').change(function(){
var str = $('#idKlant').val();
if (str=='Nieuw')
{
$.post("new_klant.php", {},
function(data) {
$('#contact').html(data);
});
}
});
});
</script>
Dit werkt helaas niet (zal wel een domme fout zijn ofzo) maar kan iemand mij vertellen hoe ik dit wel moet aanpakken?
http://css-plus.com/2011/07/jquery-if-else-statements/
Gewijzigd op 25/06/2012 09:30:59 door Albert de Wit
Misschien ben jij meer op zoek naar een keyup event, waardoor het meteen werkt als het is ingevoerd.
Nog wat jQuery tips:
- Probeer $.ajax/jQuery.ajax te gebruiken i.p.v. $.post/jQuery.post, je hebt dan veel meer opties
- Je haalt nu 2 keer het id op, dat is niet handig en kost tijd. In de callback van een event is $(this) het element dat je toe net hebt geselecteerd. Je kunt op regel 4 dus gewoon $(this).val() gebruiken, dat is sneller.
- jQuery gaat altijd heel soepel om met argumenten (groot voordeel van jQuery). Als je een argument niet gebruikt kun je die 9 van de 10 keer gewoon weglaten. In dit geval gebruik je het data argument niet, dan hoef je daar geen leeg hash object neer te zetten, maar kun je gewoon meteen die callback gebruiken.
- language attribuut heeft nooit bestaan => weghalen dus
- probeer wat netter in te springen en met spaties op te gaan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#idKlant').focus(function(){
var str = $('#idKlant').val();
if (str=='nieuw')
{
$.post("new_klant.php", {},
function(data) {
$('#contact').html(data);
});
}
else
{
$.post("contact.php", { idKlant: str },
function(data) {
$('#contact').html(data);
});
}
});
});
</script>
$(document).ready(function() {
$('#idKlant').focus(function(){
var str = $('#idKlant').val();
if (str=='nieuw')
{
$.post("new_klant.php", {},
function(data) {
$('#contact').html(data);
});
}
else
{
$.post("contact.php", { idKlant: str },
function(data) {
$('#contact').html(data);
});
}
});
});
</script>
Zou dit wel kunnen werken dan?
Maar het kan een stukje korter en je kan de {} nog steeds weglaten bij regel 7. Al kun je, als je het korter gaat maken, niet meer doen. Tevens heb je nog steeds 2 keer $('#idKlant').
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery(function($) {
$('#idKlant').focus(function(e) {
var val = $(this).val();
if ('nieuw' == val) {
var url = 'new_klant.php';
var data = {};
} else {
var url = 'contact.php';
var data = { idKlant : val };
}
jQuery.post(url, data, function(data) {
$('#contact').html(data);
});
});
});
$('#idKlant').focus(function(e) {
var val = $(this).val();
if ('nieuw' == val) {
var url = 'new_klant.php';
var data = {};
} else {
var url = 'contact.php';
var data = { idKlant : val };
}
jQuery.post(url, data, function(data) {
$('#contact').html(data);
});
});
});