jQuery AJAX response effect

Door Onbekende gebruiker op 22-08-2008 14:18

1.177 views

Hallow allemaal,

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:

Step 1 complete...
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

Onbekende gebruiker

23-08-2008 10:39

Ok, heb het nu zo opgelost:

		<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>

Iemand een efficiëntere manier?

Reageren

Inloggen om te reageren