有什么好的建议来提醒/提醒用户在网页上编辑字段后要保存？

Question

I have an asp.net-mvc site and a page that has a large number of editable fields table rows, etc that all can be edited. Because the page is quite long the save button often is not visible on the screen given screen size.

We have run into issues where people have said they go in an make changes but they forget to click "save" because its not obvious on the screen. I want a solution that visibly reminds the user once they make changes that those have not been persisted yet until they click save.

Is there any recommended best practice / examples for doing something like this?

Answer 1

I would personally implement a notification popup eg Bootstrap Notify . I would create some JS to execute the notification this after X minutes.

Answer 2

I like to show a bootstrap alert. I position the alert absolutely to show on the top of my page like this:

I use a helper object JSFiddle

(function() {

    var notify = new Notify({
        container: document.getElementById('alerts'),
        template: `<div class="alert alert-{{type}}" role="alert"><div class="text-center">{{message}}</div></div>`
    });

    notify.danger('Some error message');

}());

Answer 3

You can have a toastr that will pop up in the screen like this:

<script>
$(document).ready(function () {
    toastr.options.showMethod = 'slideDown';
    toastr.options.closeButton = true;
    toastr.info('Don't forget to save');

    {

    }
});
</script>

And in the bundle config do this:

bundles.Add(New StyleBundle("~/Content/css").Include("~/Content/bootstrap.css",
        "~/Content/toastr.css"));

bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/toastr.js"))