Как показать пульсометр или другой индикатор во время операции AJAX? - PullRequest
Новая
       0

Как показать пульсометр или другой индикатор во время операции AJAX?

3 голосов
/ 20 апреля 2011

Я хотел бы знать, как показать ajax-загрузчик gif , пока функция "remote" занята внутренними процедурами.

Если возможно, не могли бы вы посмотреть пример молока и сказать мне, как он вписался бы в этот код. Просто нажмите «Показать скрипт, используемый на этой странице», чтобы просмотреть источник.

Спасибо

Ответы [ 3 ]

4 голосов
/ 21 апреля 2011

Предполагая, что вы уже знаете, как AJAX.Основная процедура заключается в том, что в начале операции вы показываете изображение, а в конце, когда получаете результаты с сервера, вы его скрываете. 

<!--html-->
<img id='ajaxLoader' src='mahAjaxLoader.gif' />
<!--has display:none via CSS-->

- 

//js
function doAjaxStuff() {
    $('#ajaxLoader').toggle(); //toggle visibility; it's now shown

    //other stuff

    $.ajax({
        //normal AJAX stuff
        onComplete : function() {
            $('#ajaxLoader').toggle(); //it's hidden again
            //other oncomplete stuff
    });
}

См .:

Редактировать: remote метод принимает объектный литерал какзапрос ajax делает.Так что подключите это: 

remote : {
    beforeSend : function() {
        $('#ajaxLoader').toggle();
    }
    onComplete : function() {
        $('#ajaxLoader').toggle();
    }
}
1 голос
/ 21 апреля 2011

Я взял это со страницы, которую вы создали. Для упрощения я поставил все это как js, но вы можете создать элемент с html и применить стили в таблице стилей. 

$(document).ready(function(){
    $("#signupwrap").prepend("<div id='ajax_loader'><img src='path_to_image' /></div>");
    $("#ajax_loader").css({
        width: $("#signupwrap").width(),
        height: $("#signupwrap").height()
    }).hide();

    $("#ajax_loader img").css({
        position: "absolute",
        top:"300px" //or wherever you want to put it
        left:"50%",
        marginLeft:$(".ajax_loader img").width()/2
    });
});


submitHandler: function() {
    alert("submitted!");
    var dataObj = "sdfsd" // get all the values and build the ajax data object
    $("#ajax_loader").show();
    $.ajax({
        url:"your_url",
        data: dataObj,
        success:function(val){
            $("#ajax_loader").hide();

        };
    });
},
1 голос
/ 21 апреля 2011

Для вашего вызова AJAX: 

var GetWSDataJSON = function (ServiceUrl, Parameters, onSuccess, onFailure, onComplete){
    $.ajax({
        type: "POST",
        data: "{" + Parameters + "}",
        url: basePath + ServiceUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            var msg = result.d;
            onSuccess(msg);
        },
        error: function (request, status, throwerror) {
            onFailure();
        },
        complete: function () {
            if (onComplete != undefined) {
            onComplete();
        }
     }
  });
}

Затем в вашем текущем запросе AJAX: 

function SomeFunctionHere() {
    $('#containerDiv').showLoading();
    GetWSDataJSON('WebServices/Service.asmx/GetYourData', 'someData: "' + someVar + '"', SomeFunction_Success, SomeFunction_Failure, SomeFunctionComplete);
}

Наконец, ваши функции для после вызова AJAX: 

var SomeFunction_Success = function(msg){ //do something with the msg }
var SomeFunction_Failure = function(){ //do something with the error }
var SomeFunction_Complete = function(){ $('#containerDiv').hideLoading(); }
...