2010年05月01日

安直な「お待ちください」インタフェースの作り方

このエントリーをはてなブックマークに追加
follow us in feedly

jQuery + Ajax とかで実現したいですが、
JavaScript で表示する、という方法が一番安直だそうです。



<form name="form1" action="target01.php" method="post">
input sample: <input type="text" name="input" value="letter">
<br><br>
<input type="button" value="push" id="sendbutton" onClick="waitmessage()">
<p id="waitingstring" style="display:none">お待ちください<img src=mezamashi.gif></p>
</form>

<script language="javascript">
function waitmessage() {
form1.sendbutton.style.display="none";
document.getElementById("waitingstring").style.display = "inline";
form1.submit();
}

</script>


実行例


<?
$rdb = rand( 3 , 20);
sleep( $rdb );
?>

<html>

<?= $rdb ?>秒待ちました

</html>


呼び出し元ではなく、呼び出し先で待っているので、
sleep の代わりに処理を記述すれば、
これで目的は実現できているのではないかと思うのですが


しかしこれがスマートな方法なんでしょうか?




進行状況も表示させたいと思います。



[PHP]出力バッファとflush()・ob_flush()

PHPでプログレス表示を行うには?

とある通り
flush() , ob_flush() で途中まででも表示させられます。



<?
echo "お待ちください...<br>\n";

echo str_pad(" ",4096)."<br>\n";
ob_end_flush();
ob_start('mb_output_handler');


$second = rand( 5 , 20);


for( $s = 0 ; $s < $second ; $s++ ){
sleep( 1 );

echo $s."." ;

ob_flush();
flush();


}


?>



実行例

しかし、ブラウザによって挙動が違います
Explorerでは期待通りに表示されましたが、
Chromeでは、一番最後にすべて表示されました
FireFoxでは、そもそもページ移動自体ができませんでしたが...



トラックバックURL

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
サイト内検索
にほんブログ村 科学ブログへ
にほんブログ村
adsense
Archives
amazon
blogchart
QRコード
QRコード
Recent Comments