Блог

Главная - Вопросы по программированию - Показывать и скрывать элемент (строку состояния) при запуске и завершении Ajax-запроса

Показывать и скрывать элемент (строку состояния) при запуске и завершении Ajax-запроса

#javascript #jquery #html #css #ajax

#javascript #jquery #HTML #css #ajax

Вопрос:

У меня есть форма для загрузки фотографий через Ajax, строка состояния появляется при запуске запроса и работает должным образом. Проблема в том, что когда запрос завершен, панель остается активной и появляется миниатюра фотографии. Панель должна появиться снова, если будет сделан другой запрос.

Я хотел бы скрыть панель, когда запрос завершен, и попробовал несколько вещей, но ни одна из них не сработала, это мой код:

    //jQuery Ajax to Post form data
   $.ajax({
    url : post_url,
    type: "POST",
    data : form_data,
    contentType: false,
    cache: false,
    processData:false,
    xhr: function(){
     //upload Progress
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id   " .progress-bar").css("width",   percent  "%");
       $(progress_bar_id   " .status").text(percent  "%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"
   }).done(function(res){ //
    $(my_form_id)[0].reset(); //reset form
    $(result_output).html(res); //output response from server
    submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
   });

Это HTML-код для отображения индикатора выполнения:

 <div id="progress-wrp">
 <div class="progress-bar"></div>
</div>

Комментарии:

1. попробуйте это $(progress_bar_id » .progress-bar»).css(«display», «none»);

2. использовать $(progress_bar_id " .progress-bar").fadeOut() при загрузке

3. @FerasSalim Пытается … панель исчезает навсегда (в начале и в конце) … это не работает.

4. если он все еще находится в вашем dom, вы можете показать его в начале вашего запроса.

5. вы должны добавить эту строку, когда прогресс будет завершен на 100%, добавьте его в функцию done @GePraxa

Ответ №1:

Что вы пробовали? Вы пробовали скрыть () в нижней части вашего метода done()? (это также показывает () его при выполнении запроса)

$("#progress-wrp").show(); получает элемент по его идентификатору с помощью jquery и показывает его (в данном случае при запуске запроса).

$("#progress-wrp").hide(); получает элемент по его идентификатору с помощью jquery и скрывает его (в данном случае, когда запрос выполнен ()).

 xhr: function(){
     //upload Progress
     $("#progress-wrp").show();
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id   " .progress-bar").css("width",   percent  "%");
       $(progress_bar_id   " .status").text(percent  "%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"

    .done(function(res){ //
        $(my_form_id)[0].reset(); //reset form
        $(result_output).html(res); //output response from server
        submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
       $("#progress-wrp").hide();
       });