بررسی تغییرات ذخیره نشده در صفحه توسط jQuery
جمعه 10 مهر 1394در این مقاله قصد داریم نحوه چک کردن اطلاعات و تغییرات ذخیره نشده کاربر در صفحه توسط jquery را آموزش دهیم.اگر کاربر قصد خروج و یا رفرش صفحه بدون ذخیره اطلاعات را داشته باشد این مورد توسط jquery چک شده و به او هشدار داده می شود
می خواهیم با کمک jQuery کدی بنویسیم که اگر کاربر در صفحه تغییراتی ایجاد کردو یا اطلاعاتی وارد نمود اما آن را ذخیره نکرد و قصد reload صفحه را داشت به او هشدار دهیم که آیا میخواهداز صفحه خارج شود و یا اینکه قصد ماندن در صفحه را دارد.
یک صفحه Html ساده ساخته ایم .در این صفحه یک جدول وجود دارد که در سلولهای آن اطلاعاتی را وارد کرده ایم .در برخی از سلول ها هم Input وجود دارد که کاربر می تواند در آنها اطلاعات وارد کند.
کد های صفحه به صورت :
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>ایمان</td>
<td>مدائنی</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>برنامه نویسان</td>
<td>برنامه نویسان</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>سجاد</td>
<td>باقرزاده</td>
<td><input class="text" type="text" /></td>
</tr>
</table>
</body>
بعد از اجرا چنین صفحه ای خواهیم دید.
حال در قسمت head صفحه فایل جاوا اسکریپت مربوطه را اضافه می کنیم و سپس در قسمت اسکریپت مربوط به آن کد های زیر را وارد می کنیم :
<script src="Scripts/jquery-2.0.2.min.js"></script>
<script>
var unsaved = false;
$(document).on('change', '.table .text', function () {
unsaved = true;
});
$(document).on('mouseover', '.table td', function () {
$(this).attr('title', $(this).text());
});
function unloadPage() {
if (unsaved) {
return "آیتم ذخیره نشده دارید.";
}
}
window.onbeforeunload = unloadPage;
</script>
در این قسمت یک متغیر unsaved با مقدار اولیه false تعریف کرده ایم. اگر کاربر در هر یک از input ها اطلاعاتی وارد کند و یا بر روی جدول با موس هاور کند تابع window.onbeforeunload باعث فراخوانی تابع unloadpage می شود.
پیغام خطایی که کاربر در صورت عدم ذخیره خواهد گرفت به صورت زیر است .البته ما در این پروژه سازو کاری برای ذخیره در نظر نگرفته ایم و تنها در صورت انجام تغییرات و رفرش کردن صفحه پیغام خطا نمایش داده خواهد شد.
- Jquery
- 1k بازدید
- 1 تشکر