Forum PHP.pl > [AJAX][PHP] activity indicator podczas wykonywania skrytpu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][PHP] activity indicator podczas wykonywania skrytpu

sebawo

7.12.2010, 11:30:17

Na wstępie witam, to mój pierwszy post.
Napisałem sobie prościutki formularz i skrypt w php do skanowania na urządzeniach w sieci. Problem w tym, że podczas wykonywania skryptu użytkownik nie wie czy skanowanie się rozpoczęło albo czy w ogóle coś się dzieje, dlatego chciałem dorzucić jakiś 'activity indicator' aby user wiedział, że ma czekać. Zainteresowałem się więc AJAX`em, pozmieniałem co nieco i oto moje wypociny, zastrzegam, że nie jestem webmasterem toteż mam nikłe doświadczenie.
Próbowałem dodać w funkcji Skanuj() dodatkowo onLoading, ale po dodaniu nie działają obie funkcje, pewnie coś robię źle, tylko nie wiem co...

formularz:

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8' />
 
<script type='text/javascript' src='advajax.js'></script>
<script type='text/javascript'>
 
function Pokaz() {
  advAJAX.get({
    url : 'scanner_status.php',
    parameters : {
       'skanery' : document.getElementById('skanery').value
    },
    onSuccess : function(obj) {
       document.getElementById('status').innerHTML = obj.responseText;
    }
  });
}
 
function Skanuj(frm) {
  advAJAX.get({
    url : 'skan.php',
    parameters : {
       'skanery' : frm.skanery.value,
       'plik' : frm.plik.value
    },
    onSuccess : function(obj) {
      document.getElementById('status').innerHTML = obj.responseText;
    }
  });
}
 
</script>
 
</head>
<body>
    <center>
    <br />
    <br />
    <br />
    <br />
    <h1>skanery by seba</h1>
    <br />
    <br />
<!--    <form action='skan.php' method='GET'> -->
    <form onsubmit='Skanuj(this); return false'>
        wybierz skaner... <select name=skanery id='skanery' onchange='Pokaz()'>
 
<?php
$wynik = exec("lpstat -v | cut -d':' -f3",&$tablica);
 
for($i=0; $i<(sizeof($tablica)); $i++){
    $nazwa = exec("lpstat -v | grep $tablica[$i] | cut -d' ' -f3 | tr -d ':'");
    echo ("<option value=$tablica[$i]> $nazwa");
    }
?>
 
       </select><br/>
       <br/>
       nazwa pliku wyjściowego... <input type=text name=plik><br>
       <br />
       <div id='status'></div>
       <input type=submit value='Skanuj'><br/>
    </form></center>
</body>
</html>
[HTML] pobierz, plaintext

Dodam, że funkcje w tej postaci działają poprawnie, znaczy tak jak chcę (bez animacji ładowania).

skan.php

[PHP] pobierz, plaintext 
<?php
 
$plik=$_GET['plik'];
$scan_dev=$_GET['skanery'];
 
if (empty($plik)) $plik="skan";
 
$full_output_file="/srv/www/htdocs/sanewi/tmp/".$plik.".jpg";
$output_file=$plik.".jpg";
$tmp_file="/srv/www/htdocs/sanewi/tmp/tmp.tmp";
$command = "scanimage -d hpaio:".$scan_dev." --resolution 300 >".$tmp_file." && convert ".$tmp_file." jpeg:".$full_output_file.
 
 
exec($command);
 
//header('Content-Type: application/octet-stream');
//header('Content-Disposition: attachment; filename='.$output_file);
//readfile($full_output_file);
echo("zeskanowano");
?>
[PHP] pobierz, plaintext

CuteOne

8.12.2010, 01:09:44

ściągnij Operę jeżeli jej nie masz na dysku -> Narzędzia -> Zaawansowane -> Konsola błędów -> klik na wyczyść -> odśwież stronę -> klik submit ->zobacz do konsoli błędów co się pojawi

sebawo

8.12.2010, 09:27:50

dzięki, dałeś wędkę zamiast ryby, jestem bardzo wdzięczny, działa już ten activity indicator (u mnie roller.gif)
Dla zainteresowanych wrzucam fragment działający:

[HTML] pobierz, plaintext 
function Skanuj(frm) {
  advAJAX.get({
    url : 'skan.php',
    parameters : {
       'skanery' : frm.skanery.value,
       'plik' : frm.plik.value
    },
    onLoading : function(obj) {
       document.getElementById('status').innerHTML = 'skanowanie...<br /><img src=roller.gif><br/ ><input type=submit value=Skanuj disabled=disabled>';
    },
    onSuccess : function(obj) {
       document.getElementById('status').innerHTML = obj.responseText;
    }
  });
}
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.