jQuery AJAX response effect
Klein vraagje dit keer. Ik ben bezig met een installatie script voor mijn "nieuwste" applicatie. De gebruiker moet, verspreid over een aantal pagina's, informatie invullen en op de laatste pagina moet de gebruiker op een link klikken om alle data te valideren.
Dit valideren kijkt alleen of alle 'vereiste' sessies aangemaakt zijn en zo niet, dan moet de gebruiker dat alsnog invullen.
Nu wil ik zeg maar dat X.php een request stuurt naar Y.php en Y.php kijkt of alle sessies aangemaakt (van eerder in het proces). Voor elke stap maakt Y.php een response tekst aan. Die tekst ziet er ongeveer zo uit:
Quote:
Step 1 complete...
Step 2 complete...
Step 3 complete...
Validation done!
Step 2 complete...
Step 3 complete...
Validation done!
Nu zou ik die regels apart willen laten zien in een p element met jQuery met een vertraging (van een paar ms) ertussen. Is dat mogelijk? En zo ja, hoe? (Zat zelf te denken aan een JSON array terug te sturen via die response, maar dan loop ik vast).
Mvg,
GaMer13
Gewijzigd op 01/01/1970 01:00:00 door GaMer B
Gesponsorde koppelingen:
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
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
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
$('#continue').hide();
$('#verify').click(function(event){
event.preventDefault();
$('#result').append('<p id="m2" style="display: none;" class="info"><?= $this->lang->line("verify_loading") . img("templates/default/images/loader.gif"); ?></p>');
$('#m2').show('slow');
$('#result').append('<p id="m3" style="display: none;" class="info"><?= $this->lang->line("verify_loading") . img("templates/default/images/loader.gif"); ?></p>');
$('#m3').show('slow');
$.post($('#verify').attr('href'), {step: "2"},
function(data) {
if(data.status) {
$('#m2').html(data.content);
} else {
$('#m2').removeClass('info').addClass('error');
$('#m2').html(data.content);
}
}, "json"
);
$.post($('#verify').attr('href'), {step: "3"},
function(data) {
if(data.status) {
$('#m3').html(data.content);
} else {
$('#m3').removeClass('info').addClass('error');
$('#m3').html(data.content);
}
if(data.overall) {
$('#result').append('<p id="overall" style="display: none;" class="info"><?= $this->lang->line("verify_pass"); ?></p>');
} else {
$('#result').append('<p id="overall" style="display: none;" class="error"><?= $this->lang->line("verify_fail"); ?></p>');
}
$('#overall').show('slow');
}, "json"
);
$.post($('#verify').attr('href'), {step: "overall"},
function(data) {
if(data.overall) {
$('#result').append('<p id="overall" style="display: none;" class="info"><?= $this->lang->line("verify_pass"); ?></p>');
} else {
$('#result').append('<p id="overall" style="display: none;" class="error"><?= $this->lang->line("verify_fail"); ?></p>');
}
$('#overall').show('slow');
}, "json"
);
});
});
</script>
// wait for the DOM to be loaded
$(document).ready(function() {
$('#continue').hide();
$('#verify').click(function(event){
event.preventDefault();
$('#result').append('<p id="m2" style="display: none;" class="info"><?= $this->lang->line("verify_loading") . img("templates/default/images/loader.gif"); ?></p>');
$('#m2').show('slow');
$('#result').append('<p id="m3" style="display: none;" class="info"><?= $this->lang->line("verify_loading") . img("templates/default/images/loader.gif"); ?></p>');
$('#m3').show('slow');
$.post($('#verify').attr('href'), {step: "2"},
function(data) {
if(data.status) {
$('#m2').html(data.content);
} else {
$('#m2').removeClass('info').addClass('error');
$('#m2').html(data.content);
}
}, "json"
);
$.post($('#verify').attr('href'), {step: "3"},
function(data) {
if(data.status) {
$('#m3').html(data.content);
} else {
$('#m3').removeClass('info').addClass('error');
$('#m3').html(data.content);
}
if(data.overall) {
$('#result').append('<p id="overall" style="display: none;" class="info"><?= $this->lang->line("verify_pass"); ?></p>');
} else {
$('#result').append('<p id="overall" style="display: none;" class="error"><?= $this->lang->line("verify_fail"); ?></p>');
}
$('#overall').show('slow');
}, "json"
);
$.post($('#verify').attr('href'), {step: "overall"},
function(data) {
if(data.overall) {
$('#result').append('<p id="overall" style="display: none;" class="info"><?= $this->lang->line("verify_pass"); ?></p>');
} else {
$('#result').append('<p id="overall" style="display: none;" class="error"><?= $this->lang->line("verify_fail"); ?></p>');
}
$('#overall').show('slow');
}, "json"
);
});
});
</script>
Iemand een efficiëntere manier?
