یکی از نیاز های سیستم های مبتنی بر Ajax داشتن پیغام های Waiting می باشد . با استفاده از یک سری عکس های gif . و نوشته می توان وضعیت فعلی را به کاربر گزارش داد.
روش های مختلفی برای پیاده سازی این داستان می باشد . یکی از این روش ها که من خیلی دوست دارم ، روش قفل کردن صفحه می باشد . در این روش به همراه نمایش پیامی مبنی بر در حال پردازش بودن صفحه ، صفحه خاکستری (یا هر رنگ دیگری) می شود به نحوی که کاربر نمیتواند بر روی عناصر موجود در صفحه کلیک کنید . ناچارا کاربر باید تا اتمام کار منتظر بماند .
در زیر به آموزش پیاده سازی این روش می پردازیم . روش زیر بر روی دو مرورگر FireFox , Internet Explorer قابل اجرا می باشد .
تنها با چند خط css و جاوا اسکریپت می توان چنین سیستمی را پیاده سازی کرد . برای شروع کار ما صفحه زیر را در نظر می گیرم..
<html>
<head>
</head>
<body>
<input type="submit" value="SubmitForm" />
</body>
</html>
می خواهیم الگوریتمی را پیاده سازی کنیم که صفحه به محض کلیک بر روی کنترل Submit قفل شود تا پردازش سمت سرور بدون مشکل شروع و نهایتا پایان یابد . بعد از اتمام پردازش صفحه به حالت عادی بازگردد. کار قفل کردن صفحه و نمایش پیغام را با استفاده از دو تک DIV تو در تو پیاده سازی می کنیم ...
صفحه html را به شکل زیر کامل میکنیم .
<html>
<head>
</head>
<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
<div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<input type="submit" value="SubmitForm" />
</body>
</html>
در صفحه فوق تگ DIV که نام آن FreezePane می باشد نقش اصلی را بازی می کند . .
الگوریتم هم به شکل زیر می باشد :
با کلیک کاربر بر روی دکمه توسط جاوا اسکریپت کلاس FreezePane از FreezePaneOff به FreezePaneOn تبدیل شود
بخش جاوا اسکریپت را به کد صفحه اضافه می کنیم . همان بخشی که وظیفه تغییر کلاس ها را بر عهده دارد .
<html>
<head>
<script language="JavaScript">
function FreezeScreen(msg)
{
scroll(0,0);
var outerPane = document.getElementById('FreezePane');
var innerPane = document.getElementById('InnerFreezePane');
if (outerPane) outerPane.className = 'FreezePaneOn';
if (innerPane) innerPane.innerHTML = msg;
}
</script>
<head>
<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
vdiv id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<input type="submit" value="SubmitForm" />
</body>
</html>
چیزی که در این میان صحبتی از آن نشده است CSS است که به 90 درصد کار را انجام میدهد .
سه کلاس FreezePaneOff و FreezePaneOn و InnerFreezePane را هم به شکل زیر به صفحه اضافه می کنیم :
<html>
<head>
<script language="JavaScript">
function FreezeScreen(msg)
{
scroll(0,0);
var outerPane = document.getElementById('FreezePane');
var innerPane = document.getElementById('InnerFreezePane');
if (outerPane) outerPane.className = 'FreezePaneOn';
if (innerPane) innerPane.innerHTML = msg;
}
</script>
<style type="text/css">
.FreezePaneOff
{
visibility: hidden;
display: none;
position: absolute;
top: -100px;
left: -100px;
}
.FreezePaneOn
{
position: absolute;
top: 0px;
left: 0px;
visibility: visible;
display: block;
width: 100%;
height: 100%;
background-color: #666;
z-index: 999;
filter:alpha(opacity=85);
-moz-opacity:0.85;
padding-top: 20%;
}
.InnerFreezePane
{
text-align: center;
width: 66%;
background-color: #171;
color: White;
font-size: large;
border: dashed 2px #111;
padding: 9px;
}
</style>
</head>
<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
<div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<input type="submit" value="SubmitForm" />
</body>
</html>
تنها چیزی که باقی می ماند این است که در Event کلیک دکمه تابع FreezeScreen را صدا بزنیم که الگوریتم ما شروع شود .
<html>
<head>
<script language="JavaScript">
function FreezeScreen(msg)
{
scroll(0,0);
var outerPane = document.getElementById('FreezePane');
var innerPane = document.getElementById('InnerFreezePane');
if (outerPane) outerPane.className = 'FreezePaneOn';
if (innerPane) innerPane.innerHTML = msg;
}
</script>
<style type="text/css">
.FreezePaneOff
{
visibility: hidden;
display: none;
position: absolute;
top: -100px;
left: -100px;
}
.FreezePaneOn
{
position: absolute;
top: 0px;
left: 0px;
visibility: visible;
display: block;
width: 100%;
height: 100%;
background-color: #666;
z-index: 999;
filter:alpha(opacity=85);
-moz-opacity:0.85;
padding-top: 20%;
}
.InnerFreezePane
{
text-align: center;
width: 66%;
background-color: #171;
color: White;
font-size: large;
border: dashed 2px #111;
padding: 9px;
}
</style>
</head>
<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
<div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<input type="submit" value="SubmitForm" onclick="FreezeScreen('Your Data is Being Processed...');" />
</body>
</html>
خوب همه چیز تمام شد . با کلیک بر روی دکمه صفحه خاکستری شده و کاربر نمی تواند بر روی عناصر صفحه کلیک کند. تنها چیزی که مانده این است که بعد از پردازش باید کلاس تگ DIV بیرونی به حالت اول باز گردد که آن هم با چند خط جاوا اسکریپت می توان انجام داد.
در این مقاله جهت ساده کردن مطلب ، به توضیح CSS ها نپرداختم که در یک مقاله مجزا به بررسی این کلاس ها می پردازیم .
این مقاله بر گرفته از مقاله آقای Scott Mitchell با عنوان Prevent Users from Submitting a Form Twice می باشد که در آدرس زیر قابل مشاهده است . http://www.4guysfromrolla.com/webtech/100406-1.shtml نویسنده این مقاله یک نسخه نمایشی هم برای این مطلب آماده کرده است که در آدرس زیر قابل مشاهده می باشد . http://www.4guysfromrolla.com/demos/DontSubmitTwice2.htm در صورتیکه نیاز به فایل های gif Animator برای پیاده سازی سیستم فوق دارید سه وب سایت زیر به شما در این راه کمک خواهند کرد :
موفق باشید .