1


0

次のスクリプトがエラーを返した場合、「読み込み中」の画像を非表示にするにはどうすればよいですか?

私はmailchimp APIを統合していますが、データを送信している間、ロードアニメーターを表示することで、もう少し使いやすくしたかっただけです。 アニメーターを表示し、成功すると、アニメーションでdivを非表示にします。

ただし、問題は、スクリプトが電子メールが正しくないなどのエラーを返す場合、ローダーも非表示にする必要があることです。これは、これまで試したことに基づいていません。

次のスクリプトでアニメーターのhide()関数を挿入する必要がある場所についてのアイデアはありますか?

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);
        }
    }
}

2 Answer


1


  • http://jquery.malsup.com/form/#options-object [ajaxForm plugin] は、 http://api.jquery.com/jQuery.ajax/でサポートされているオプションを利用できると具体的に述べています。 [.ajax()] *

_ オプションオブジェクトを使用して、jQueryの$ .ajaxメソッドに値を渡すこともできます。 $ .ajaxでサポートされているオプションに精通している場合は、ajaxFormおよびajaxSubmitに渡されるオプションオブジェクトでそれらを使用できます。 _

したがって、「成功」で実行する関数を作成するのと同じ方法で、「エラー」で実行する関数を作成できます。 以下のjQuery * http://api.jquery.com/jQuery.ajax/ [.ajax()] *ページをご覧ください。

  • error(XMLHttpRequest、textStatus、errorThrown):*

_ 要求が失敗した場合に呼び出される関数。 この関数には3つの引数が渡されます。XMLHttpRequestオブジェクト、発生したエラーのタイプを説明する文字列、および発生した場合はオプションの例外オブジェクト。 2番目の引数に有効な値(null以外)は、 "timeout"、 "error"、 "notmodified"、および "parsererror"です。 これは* http://docs.jquery.com/Ajax_Events [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);
    }

`success`コールバックに渡される引数を説明している* http://jquery.malsup.com/form/#options-object [AJAXFormプラグインのドキュメント] *を確認してください。


0


あなたのコードは読みませんでしたが、 jQuery.ajax`関数の complete() `メソッドを試しましたか? サーバーから送信されたエラーコードに関係なく、データが読み込まれると、関数を呼び出します。

complete(XMLHttpRequest、textStatus)

_ 要求が終了したとき(成功およびエラーコールバックが実行された後)に呼び出される関数。 この関数には2つの引数が渡されます。XMLHttpRequestオブジェクトと、リクエストのステータスを分類する文字列( "success"、 "notmodified"、 "error"、 "timeout"、または "parsererror")。 これはAjaxのイベントです。 _

(http://api.jquery.com/jQuery.ajax/から)