ポストコール中にレンダリングされたタブ間を移動するのを防ぐ

Question

私は様々なタブを持つページを持っています。 1つのタブの下に、jsonファイルをアップロードする機能があります。このアップロードはフォームタグを使用して行われます。

tab4.html.erb：formタグの提出に

<%= form_tag({action: :add}, multipart: true, id: 'myform') do %> 
     <%= file_field_tag 'json_file' %> 
    <% end %> 
    <button id="upload-button">UPLOAD</button> 

、私はroutes.rbを資源とjQueryを介してコントローラ内の関数を呼び出します。

routes.rbを：

resources :controller do 
    collection do 
     post 'add' 
    end 
    end 

jQueryのフォームを送信：

$('#upload-button').on('click', function() { 
     if ($('#json_file').val()) { 
      $('#myform').submit(); 
     } 
    }); 

controller.rb：

def add 
    file = params[:json_file] 
    file_content = file.read 
    json_content = JSON.parse(file_content, symbolize_names: true) 
    begin 
     // post call 
     redirect_to :some_other_page 
    rescue 
     // post call fails with exception 
     redirect_to // same page with a param to show failure 
    end 
    end 

この関数は、ポストに本体にJSONファイルの内容を送信します別のサービス。

このポストコールが行われているとき、私はユーザーがRuby on Railsアプリケーションで利用できる他のタブを切り替えるのを防止したいのですか？これを達成する方法はありますか？

フォームの送信でajaxコールを使用し、スピナーでオーバーレイを表示してからコントローラのadd関数を呼び出し、完了するまでユーザーがどこからでもクリックしないようにすることを考えました。

これを達成するためのより良い解決策がありますか？

Answer 1

@chumakoffの提案を使って解決しました。私はそれぞれのタブにクラスを与え、提出すると、それらの上でクリンキングを防止しました。リロード後、動作はデフォルトに戻ります。

$('#upload-button').on('click', function() { 
    if ($('#json_file').val()) { 
     preventNavigation(); 
     $('#myform').submit(); 
    } 
}); 

function preventNavigation() { 
     $(".tab").on('click', function(){ 
      alert("Please wait till the upload is complete"); 
      return false; 
     }); 
} 

この結果、ポストコール中にタブをクリックしたときにアラートメッセージが表示され、ユーザーはナビゲートできなくなります。