ik probeer nu toch al een tijdje een antwoord te vinden op onderstaand.
ik heb een php pagina dat een SQL query uitvoert (een redelijke lange van ong. 40 seconden , lezen uit mysql , schrijven naar pervasive sql)
ik zoek dan ook een manier om een soort loading bar of spinning wheel op scherm te krijgen als de query loopt , na de uitvoering van de query wordt da pagina doorgestuurd via header("location: ... naar de beginpagina.
iemand dat met de goede richting uitduwt
Php loading / progress bar
-
meon
- Administrator
- Berichten: 16757
- Lid geworden op: 18 feb 2003, 21:02
- Twitter: meon
- Locatie: Bree
- Uitgedeelde bedankjes: 472 keer
- Bedankt: 664 keer
-
Provider
Een progress bar werkt enkel als je kan voorspellen waar het eindpunt zich bevindt.
Als je het puur visueel wilt doen om duidelijk te maken dat er "iets" gebeurt en dat wachten de boodschap is, zonder dat je daarbij een voorbepaalde duurtijd kan opgeven is een generieke loading icon tonen de eenvoudigste optie.
Je hebt de klassieke spinners die je kan vinden met een image search, maar als je iets creatievers wilt tonen kan je altijd eens op http://reddit.com/r/loadingicon snuffelen.
Als je het puur visueel wilt doen om duidelijk te maken dat er "iets" gebeurt en dat wachten de boodschap is, zonder dat je daarbij een voorbepaalde duurtijd kan opgeven is een generieke loading icon tonen de eenvoudigste optie.
Je hebt de klassieke spinners die je kan vinden met een image search, maar als je iets creatievers wilt tonen kan je altijd eens op http://reddit.com/r/loadingicon snuffelen.
-
helmuteke
- Premium Member
- Berichten: 582
- Lid geworden op: 08 feb 2010, 14:36
- Uitgedeelde bedankjes: 3 keer
- Bedankt: 22 keer
Dit probeer ik ook , maar deze wordt niet getoond.meon schreef:Een progress bar werkt enkel als je kan voorspellen waar het eindpunt zich bevindt.
Als je het puur visueel wilt doen om duidelijk te maken dat er "iets" gebeurt en dat wachten de boodschap is, zonder dat je daarbij een voorbepaalde duurtijd kan opgeven is een generieke loading icon tonen de eenvoudigste optie.
Je hebt de klassieke spinners die je kan vinden met een image search, maar als je iets creatievers wilt tonen kan je altijd eens op http://reddit.com/r/loadingicon snuffelen.
Het gaat als volgt
Ik roep via een pagina de pagina met de query aan , de bronpagina blijft staan met in de balk van browser een spinning wiel , na verloop wordt ik dan doorverwezen naar de doorverwijspagina. Dus alles wat ik op de pagina zet met de query in wordt niet getoond
-
meon
- Administrator
- Berichten: 16757
- Lid geworden op: 18 feb 2003, 21:02
- Twitter: meon
- Locatie: Bree
- Uitgedeelde bedankjes: 472 keer
- Bedankt: 664 keer
-
Provider
Dan heb je last van output buffering: PHP stuurt pas de gerenderde pagina door naar de browser als alle code volledig uitgevoerd is.
Kijk eens naar de commando's ob_start(); ob_flush();
Nu, da's eigenlijk niet een nette manier want je eindigt letterlijk je </html>-tag niet.
Een header()-redirect kan je evenmin gebruiken want zoals de functie heet: dat is in de header, nog voor er content getoond wordt.
Hoe je het dus kan doen is wat lanadekat voorstelt:
- een pagina die je visuele content controleert
- een pagina met énkel uitvoerbare code (jouw query), die als respons bvb een json-object retourneert over de hoeveelheid verwerkte records of zoiets, die vanuit die eerste pagina als XHR (ajax) inlaadt.
Met wat jQuery kan je in javascript met $.ajax() best wat knutselen om bijvoorbeeld na het klikken op een knop "uitvoeren" die te vervangen door een loading.gif, en die weghalen met de tekst hoeveelheid verwerkte records als de XHR-call klaar is.
Ik weet niet hoe ver je raakt met deze tips, want ik heb niet zo meteen een kant-en-klaar voorbeeld klaarliggen
.
Kijk eens naar de commando's ob_start(); ob_flush();
Nu, da's eigenlijk niet een nette manier want je eindigt letterlijk je </html>-tag niet.
Een header()-redirect kan je evenmin gebruiken want zoals de functie heet: dat is in de header, nog voor er content getoond wordt.
Hoe je het dus kan doen is wat lanadekat voorstelt:
- een pagina die je visuele content controleert
- een pagina met énkel uitvoerbare code (jouw query), die als respons bvb een json-object retourneert over de hoeveelheid verwerkte records of zoiets, die vanuit die eerste pagina als XHR (ajax) inlaadt.
Met wat jQuery kan je in javascript met $.ajax() best wat knutselen om bijvoorbeeld na het klikken op een knop "uitvoeren" die te vervangen door een loading.gif, en die weghalen met de tekst hoeveelheid verwerkte records als de XHR-call klaar is.
Ik weet niet hoe ver je raakt met deze tips, want ik heb niet zo meteen een kant-en-klaar voorbeeld klaarliggen
.-
meon
- Administrator
- Berichten: 16757
- Lid geworden op: 18 feb 2003, 21:02
- Twitter: meon
- Locatie: Bree
- Uitgedeelde bedankjes: 472 keer
- Bedankt: 664 keer
-
Provider
Voorbeeld:
https://tools-meon.azurewebsites.net/loader/
index.php:
slowquery.php:
De javascript kan je als volgt lezen:
- bij het klikken op het HTML-element met ID 'btn_loader',
- wissel zichtbaarheid HTML-element met ID 'img_loader',
- doe een AJAX-request naar 'slowquery.php' en als die klaar is, leid dan om naar thanks.php
Ipv een sleep(10) doe jij natuurlijk jouw database-query-code.
https://tools-meon.azurewebsites.net/loader/
index.php:
Code: Selecteer alles
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<a href="#" id="btn_loader">Doe iets langzaam</a><br>
<img id="img_loader" src="loading.gif" style="display: none;">
<script>
$("#btn_loader").click(function() {
$("#img_loader").toggle();
$.getJSON( "slowquery.php", function( data ) {
window.location.replace('thanks.php');
});
});
</script>
</body>
</html>Code: Selecteer alles
<?php
sleep (10);
die(json_encode(array('time' => '10')));
- bij het klikken op het HTML-element met ID 'btn_loader',
- wissel zichtbaarheid HTML-element met ID 'img_loader',
- doe een AJAX-request naar 'slowquery.php' en als die klaar is, leid dan om naar thanks.php
Ipv een sleep(10) doe jij natuurlijk jouw database-query-code.
-
meon
- Administrator
- Berichten: 16757
- Lid geworden op: 18 feb 2003, 21:02
- Twitter: meon
- Locatie: Bree
- Uitgedeelde bedankjes: 472 keer
- Bedankt: 664 keer
-
Provider
Indien dat vaste variabelen zijn kan je die gewoon mee opgeven als slowquery.php?month=3&day=7 bijvoorbeeld.
Indien dat uit een formulier moet komen kan je beter via een POST werken.
Op https://api.jquery.com/jquery.post/ zie je onderaan een voorbeeld hoe dat kan (maar ik geef toe, ziet er complex uit als je niet met javascript bekend bent)
Indien dat uit een formulier moet komen kan je beter via een POST werken.
Op https://api.jquery.com/jquery.post/ zie je onderaan een voorbeeld hoe dat kan (maar ik geef toe, ziet er complex uit als je niet met javascript bekend bent)
