JavascriptまたはRuby on Railsでページをリロードする方法

Question

JavascriptまたはRuby on Railsのコードを使用して、新しい位置でソートした後でページをリロードするようにしています。

$("#serialize").click -> 
c = set: JSON.stringify($("#sortable").nestedSortable("toHierarchy", 
    startDepthCount: 0 
)) 
$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 
false 

私はここ

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 
window.location.reload(false); 
false 

それを追加するのではと思っていますしかし、それは順序を台無しように思えます。ここに私のレールコード

class SiteController < ApplicationController 

def savesort 
neworder = JSON.parse(params[:set]) 
prev_item = nil 
neworder.each do |item| 
    dbitem = Category.find(item['id']) 
    prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item) 
    sort_children(item, dbitem) unless item['children'].nil? 
    prev_item = dbitem 
end 
Category.rebuild! 
render :nothing => true 
    end 
end 

私も変化を考えていているレンダリング：何も=>真root_urlをr​​edirect_toないようにそれはどちらか動作するようには思えません。ここ

は、私はページを更新するためのコードを追加する必要があり、私のroutes.rbを（スペースのために短縮）

locksmithing::Application.routes.draw do 
    get "site/home" 
    match "/savesort" => 'site#savesort' 
    root to: 'site#home' 
end 

ので、ですか？ Javascriptまたはサイトコントローラ内にありますか？または別の解決策がありますか？前もって感謝します。

Answer 1

まず、お使いの$.postコールは、おそらくそれを期待していることをしません。この：

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 

はこれと同じである：

$.post "savesort", c 

私はあなたの意図がとき、非同期$.post通話終了$('#output').html()を実行することだと思いますが、あなたはそのためのコールバック関数を必要としています。あなたの$.postのこの部分：$.postコールが構築されており、その戻り値は$.postをして何をするか分からないでしょうjQueryオブジェクトになりながら

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 

が実行されます。それを修正するには、ちょうど、まあ、コールバックでコールバックをラップ：

$.post "savesort", c, -> 
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 

あなたはPOSTが完了する前に、あなたはページをリロードしますあなたの$.post後すぐにwindow.location.reload(false)を入れて、それはあなたがする欲しいものはおそらくない場合それはあなたの「秩序が乱れた」問題を説明するでしょう。

$.post "savesort", c, -> 
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 
    window.location.reload(false) 

を、何も返されない場合は、何かを返された問題ではないようにあなたの元のコードが完全にSiteController#savesortからの応答を無視した：POSTが完了した後にそれが実行されるように$.postコールバックにそれを移動してみてください、またはリダイレクトされます。上記のコールバックの変更は、コントローラが返すものを無視しますが、それは問題ありません。:nothing => trueはそれにとって賢明なことです。

これですべての作業が完了したら、コントローラーに新しいデータを返してページに挿入し、$.postコールバックで新しいデータをページに挿入できるようになりました。これはかなり標準的なAJAXアプローチです。

Answer 2

サーバーにはpostがあるので、サーバーは小さな部分を送信して、変更された部分だけを再レンダリングすることができます。

いずれかを宣言していない、あなたのコントローラのアクションを適応させるには、アクションをリダイレクト/レンダリング：

class SiteController < ApplicationController 

    def savesort 
    neworder = JSON.parse(params[:set]) 
    prev_item = nil 
    neworder.each do |item| 
     dbitem = Category.find(item['id']) 
     prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item) 
     sort_children(item, dbitem) unless item['children'].nil? 
     prev_item = dbitem 
    end 
    Category.rebuild! 
    end 
end 

これは今savesort.js.erbと呼ばれる、デフォルトのビューを探します。そのビューでは、カテゴリのリストを上書きするために何かを行うことができます。

もちろん

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>") 

が、実際には、それはまた、画面のより多くの関連する部分を更新してしまうのでしょう：インスタンスのよう

このファイルには、ブラウザで実行され、純粋なJavaScriptが含まれています。

これはこれまでに推奨される方法です。これは、画面の部分的な更新のみを行い、ユーザーに最も反応すると感じます。