JQuery класс переключения на клик

0

У меня есть следующий div,

   <div id="mainoutput">
        <img src="/img/preloader.gif" alt="loading" class="preloader" />
    </div>

Начало моего AJAX/Jquery - это,

        $(document).ready(function() {
            $(".preloader").hide();
            $("#button").click(function() {
                 $(".preloader").slideToggle( "slow" );
                 var host = $("#hostinput").val();
                 var record = $("#recordinput").val();
                 $.ajax({
                      url : "/cachecheck_ajax",
                      type : "POST",
                      dataType: "json",
                      data : {
                          hostinput : host,
                          recordinput : record,
                          csrfmiddlewaretoken: '{{ csrf_token }}'
                          },
                      success: function(json){

                      do some stuff...

                      $(".preloader").slideToggle( "slow" );
                      $('#mainoutput').html(table).hide().slideToggle( "slow" );

Все работает нормально. Я нажимаю кнопку "Отправить", показывает предварительный загрузчик, пока мой аяксский успех не удастся, прелоадер будет пронумерован, а мой главный div (#mainoutput) будет показан.

Однако, если я хочу снова отправить, я хочу, чтобы #mainoutput был переключен (скрыт), а затем preloader, чтобы показать снова. Каков наилучший способ сделать это?

Я попробовал следующее, но он просто закончил сломать ajax, и мой json был только что возвращен,

    $(document).ready(function() {
        $(".preloader").hide();
        $("#button").click(function() {
             // addition
             if($('#mainoutput').is(':visible'));{
                 $("#mainoutput").slideToggle( "slow" ).html();
             }
             //
             $(".preloader").slideToggle( "slow" );
             var host = $("#hostinput").val();
             var record = $("#recordinput").val();
             $.ajax({
Теги:

1 ответ

0
Лучший ответ

Я бы использовал методы jQuery.Ajax beforeSend и Complete callback. Надеюсь, код ниже поможет вам!

$(document).ready(function() {
    var xhr = null;
    $(".preloader").hide();

    $("#button").click(function() {
        var host = $("#hostinput").val();
        var record = $("#recordinput").val();

        if (xhr != null) {
            xhr.abort();    //Abort Existing XHR Call
            $(".preloader").hide(); //By Default hide the Element
        }

        //Get Referance in xhr variable
        xhr = $.ajax({
            url : "/cachecheck_ajax",
            type : "POST",
            dataType: "json",
            data : {
                hostinput : host,
                recordinput : record,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            beforeSend: function (jqXHR, settings) {
                $(".preloader").slideToggle( "slow" );  //Before sending to Server, Show the Element
            },
            success: function(json, textStatus, jqXHR) {

                //TODO: Do some stuff...!!!

                $('#mainoutput').html(table).hide().slideToggle( "slow" );
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //TODO: Handle Errors here...!!!
            },
            complete: function (jqXHR, textStatus) {
                //jQuery will delegate call after XHR. So Hide the Element

                $(".preloader").slideToggle( "slow" );
            }
        });
    });
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню