Как скрыть мое изображение загрузки, если следующий скрипт возвращает ошибку? - PullRequest
1 голос
/ 22 сентября 2010

Я интегрирую mailchimp API и просто хочу сделать его немного более удобным для пользователя, отображая загрузочный аниматор во время отправки данных.У меня он показывает аниматор, и в случае успеха он скрывает div с анимацией.

Проблема, однако, если скрипт возвращает ошибку, такую ​​как неправильное письмо, мне нужно, чтобы загрузчик скрылся какхорошо - что это не основано на том, что я пробовал до сих пор.

Есть идеи, где мне нужно было бы вставить функцию hide () для моего аниматора в следующем скрипте?

<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
$(document).ready( function($) {
  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
  var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://somethingorother.us2.list-manage.com/subscribe/post-json?u=a9cf617dfdf4f2eaoeuaoeub75b&id=4b3aoeu1e2a0&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                beforeSubmit: function(){
                    $('#mc_embed_signup .mc-field-group p').hide();
                    $('#subscribe_loading').fadeIn();
                    $('#mce_tmp_error_msg').remove();
                    $('.datefield','#mc_embed_signup').each(
                        function(){
                            var txt = 'filled';
                            var fields = new Array();
                            var i = 0;
                            $(':text', this).each(
                                function(){
                                    fields[i] = this;
                                    i++;
                                });
                            $(':hidden', this).each(
                                function(){
                                  if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                    this.value = '';
                              } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                    this.value = '';
                  } else {
                                      this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                  }
                                });
                        });
                    return mce_validator.form();
                }, 
                success: mce_success_cb
            };
  $('#mc-embedded-subscribe-form').ajaxForm(options);

});
function mce_success_cb(resp){
    $('#subscribe_loading').hide();
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
      });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);            
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
</script>

Ответы [ 2 ]

1 голос
/ 22 сентября 2010

Плагин ajaxForm специально говорит, что вы можете использовать опции, поддерживаемые .ajax()

Обратите внимание, что объект параметров также можно использовать для передачи значений в метод $ .ajax jQuery.Если вы знакомы с опциями, поддерживаемыми $ .ajax, вы можете использовать их в объекте опций, передаваемом ajaxForm и ajaxSubmit.

Таким же образом вы создаете функцию, которая выполняется на success, вы можете сделать тот, который выполняется на error.Взгляните на страницу jQuery .ajax() под:

error(XMLHttpRequest, textStatus, errorThrown):

Aфункция, вызываемая в случае сбоя запроса.Функции передаются три аргумента: объект XMLHttpRequest, строка, описывающая тип возникшей ошибки и необязательный объект исключения, если таковой произошел.Возможные значения для второго аргумента (кроме нуля): «timeout», «error», «notmodified» и «parsererror».Это Ajax Event .


В вашем случае просто скройте изображение ошибки, как и в случае успеха.что-то вроде:

// ... code
options = {
    // ... code
    success: function(responseXML)
             { mce_success_cb(responseXML); }, // <== mce_... takes an argument
    error:   function() { $('#subscribe_loading').hide(); 
                          // any other stuff to do on error;
                         }
};
// ... code

Вы можете использовать аргументы (XMLHttpRequest, textStatus, errorThrown) для анонимной функции, чтобы получить информацию об ошибке, сохранить и / или отобразить ее.


Если вы хотите обработать случай, когда есть успешный ответ AJAX, но есть ошибка в ответе, измените mce_success_cb() ... Похоже, он уже настроен на обработку ошибоктакого рода, так что это просто вопрос добавления дополнительной функциональности, которую вы хотите:

// ...
function mce_success_cb(resp){
    $('#subscribe_loading').hide();
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        // ...
        // This stuff happens if resp.result == "success"
        // ...
    } else {
        // Add in the error handling functionality you want here
        var index = -1;
        var msg;
        //...

Некоторые общие проблемы

Позаботьтесь, чтобы сосчитать все ваши скобки и скобки, так какпохоже, что вы оставили некоторые открытыми.

Начало вашего документа готово должно выглядеть следующим образом:

$(document).ready( function() {  // <== No need to pass anything to this
    // This will all be executed when the document is ready.
    // ...
});             // <== Maker sure to close all parens and brackets!!!

Кроме того, обратный вызов success даст вам несколько параметров, так что вы можетеНе используйте ссылку на функцию для вашего success обратного вызова, она должна выглядеть примерно так:

    success: function(responseXML)
    {
        mce_success_cb(responseXML);
    }

Убедитесь, что вы посмотрите на документацию плагина AJAXForm описание аргументов, переданных обратному вызову success.

0 голосов
/ 23 сентября 2010

Я не прочитал ваш код, но вы пробовали метод complete() для функции jQuery.ajax? Вызывает функцию после загрузки данных независимо от кода ошибки, отправленного сервером.

complete(XMLHttpRequest, textStatus)

Функция, которая вызывается по завершении запроса (после успешного выполнения и обратного вызова с ошибкой). Функция получает два аргумента: объект XMLHttpRequest и строку, классифицирующую статус запроса («success», «notmodified», «error», «timeout» или «parsererror»). Это Ajax Event.

http://api.jquery.com/jQuery.ajax/)

...