提出を押すと、ボタンの左のアイコンがfontawesomeを使ってLoading ajaxアイコン

Question

に変わります。

アイコンで飾られたsubmit-buttonがあります。 ajaxとfontawesomeを使用してアイコンの変更をどのようにすることができますか？サブミットを押すと、左のアイコンがLoading ajaxアイコンに変わり、send buttonが無効になります。 ajax response errorの場合、エラーアイコンを表示し、send" buttonが有効になっている場合、エラーメッセージを表示します。 success：チェックマークアイコンを表示します。

のhtmlのパート：

<pre> 
    <div id="#form-submit" class="field decoration clearfix submit"> 
     <a href="" class="button add">Submit</a> 
    </div> 
</pre> 

CSSのパート：

.button:before { 
    background: #ccc; 
    background: rgba(0,0,0,.1); 
    float: left; 
    ..... 
} 

.add:before { 
    content: "\2709"; 
} 

私は、Ajaxのため、このような構造を作るためにしようと、それが正しいのですか？まず

$(".button").click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     beforeSend:function(xhr,opts){ 
     $(".button:before").append('<i class="fa fa-spinner" aria-hidden="true"></i>'); 
     }, 
     success(function(){ 
     $(".button:before").append('<i class="fa fa-check" aria-hidden="true"></i>'); 
     }, 
     .error(function(){ 
     $(".button:before").append('<i class="fa fa-exclamation" aria-hidden="true"></i>'); 
     }, 
}); 
}); 

Answer 1

は、あなたのボタンにアイコンを追加し、それは以下のようにfa fa-sendとしてクラスを持つようにするiタグを追加します。

<pre> 
    <div id="#form-submit" class="field decoration clearfix submit"> 
    <a href="javascript:void(0)" class="button add"><i class="fa fa-send"> </i> Submit</a> 
    </div> 
</pre> 

今、あなたは以下のようにiconのクラスを変更することができます。

$(".button").click(function(e){ 
    e.preventDefault(); 
    var _ctrl=$(this); 
    _ctrl.find('i').removeClass('fa-send').addClass('fa-spinner').attr('disabled',true); 
    $.ajax({ 
     url:url, 
     type:'GET', 
     success:function(){ 
     _ctrl.find('i').removeClass('fa-spinner').addClass('fa-check'); 
     }, 
     error:function(){ 
     _ctrl.find('i').removeClass('fa-spinner').addClass('fa-send').attr('disabled',false); 
     }, 
    }); 
}); 

注意を - あなたは内に行うには、いくつかの操作を持っていない限り、あなたは、詰め込むのこれらの種類のbeforeSendajaxオプションは必要ありません。あなたがボタンをクリックすると直ちにアイコンを変更することができるからです。訂正されたajax構造にはほとんど問題がありません