在表单提交之后和重定向之前添加加载屏幕

时间:2012-09-20 12:55:44

标签: asp.net-mvc-3 jquery screen loading

我有一个带MVC3和Jquerymobile的移动应用程序。在表单提交(使用ajax函数)我想在提交和重定向时显示加载图标(ajax-loader.png)。谢谢!

我的ajax功能:

 $("#add").click(function () {
    $.validator.unobtrusive.parse($('form'));  //added
    if ($("form").valid()) {
        var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val());
        $.ajax({
            url: '@Url.Action("SaveLine", "AddLine")',
            type: 'post',
            data: { ids: IDs },
            dataType: 'json',
            traditional: true,
            success: function (data) {
                if (data.success == true) {
                    $("#ajaxPostMessage").html(data.Success);
                    $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function () {
                        window.location.href = '@Url.Action("Index", "AddLine")';
                    }).delay(1800)
                }
                else {
                    $("#ajaxPostMessage").html(data.Error);
                    $("#ajaxPostMessage").addClass('ajaxMessage');
                    $("#ajaxPostMessage").show();
                }
            }
        });
    }
    return false;
});

1 个答案:

答案 0 :(得分:0)

尝试(未经测试):

$("#add").click(function () {
    $.validator.unobtrusive.parse($('form'));  //added
    if ($("form").valid()) {
        var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val());
        $.ajax({
            url: '@Url.Action("SaveLine", "AddLine")',
            type: 'post',
            data: { ids: IDs },
            dataType: 'json',
            traditional: true,
            beforeSend: function(jqXHR, settings){
                $.mobile.showPageLoadingMsg();
            },
            success: function (data) {
                $.mobile.hidePageLoadingMsg();
                if (data.success == true) {
                    $("#ajaxPostMessage").html(data.Success);
                    $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function () {
                        window.location.href = '@Url.Action("Index", "AddLine")';
                    }).delay(1800)
                }
                else {
                    $("#ajaxPostMessage").html(data.Error);
                    $("#ajaxPostMessage").addClass('ajaxMessage');
                    $("#ajaxPostMessage").show();
                }
            }
        });
    }
    return false;
});

来源:

http://forum.jquery.com/topic/how-to-show-hide-loading-spinner-in-jquery-mobile http://api.jquery.com/jQuery.ajax/