内容が読み込まれるのを待つことなくブーストモーダルをすぐに表示

Question

私のアプリケーションでは、ブートストラップモーダルポップアップを使用しています。ここに私が走っている問題があり、解決策を見つけることができませんでした。

jQuery("#show-invoice").click(function(){ 
     jQuery('#invoice-details').modal('show'); 

     ...a call to an api to retrieve invoice details... 
     ...it takes about 2-3 seconds to retrieve... 
}); 

私はChromeで＃ショー請求書リンクをクリックしたときに問題がある、API呼び出しのためのモーダル待機が完了するまでに：

のは、私はこのようになりますclickイベントリスナーを持っているとしましょうモーダルウィンドウが表示される前に2-3秒の遅延が生じます。 Firefoxでは、モーダルウィンドウがすぐに表示されるので、意味があります。jQuery（ '＃invoice-details'）。modal（ 'show'）;は何よりも先に実行されます。

私の質問は、偶数が発生するとすぐにモーダルウィンドウを表示させ、何も待たないようにする方法です。jQuery（ '＃invoice-details'）。すべてのブラウザで？

Answer 1

あなたは非同期AJAX呼び出しを行うことができますすぐにこの後

jQuery('#invoice-details').modal('show'); 

をモーダルを表示することができます。 データがロードされている間、モーダルに請求書の詳細の代わりにロードアイコンを表示する必要があります。データがロードされた後、アイコンを新しいロードされたデータで置き換えることができます。このようなもの：

jQuery.ajax({ 
    url: 'invoice_details_url', 
    type: 'get', 
    success: function (invoice_details_data) { 
     jQuery('#invoice-details .invoice-details-container'). 
       empty().append(invoice_details_data); 
    }, 
    async:true, 
});