0

Twitter Bootstrap を使用して、モーダル フォームでサインアップ プロセスを処理しようとしています。フォームを送信し、モーダルを閉じることができ、DOM が目立たないように更新されないことを除いて、すべて正常に動作します。

ユーザーがサインインすると、ナビゲーション バー (パーシャルでレンダリングされ、ルビが含まれる) に「サインアップ」のリンクが表示されなくなり、「サインアウト」のリンクが取得されます。

renderフォーム送信を管理する coffeescript ファイルで使用できないため、サインアップ/モーダルフォーム送信の成功を反映させるために、いわばナビゲーションバーを再レンダリングするにはどうすればよいですか?

モーダルフォーム (HAML):

= simple_form_for @user, remote: true, html: {data: {type: 'html'}, class: 'form-horizontal'} do |f|
  %div.modal-header
    %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
    - if @user.errors.any?
      #error_explanation
        %h2= "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:"
        %ul
          - @user.errors.full_messages.each do |msg|
            %li= msg
  %div.modal-body
    =render 'form', f: f
  %div.modal-footer
    = f.button :submit, name: 'Sign Up', class: "btn-primary", id: "new_user_button"
    =link_to "Sign In", signin_path

jquery処理フォーム送信:

$ ->
    $("#new_user_button").click ->
      valuesToSubmit = $("#new_user").serialize()
      $("#signup_modal").modal "hide"
      $.ajax(
        url: "/users"
        data: valuesToSubmit
        type: "POST"
      ).success (data, status) ->
            #update the DOM?

コントローラ：

def create
    @user = User.new(params[:user])
    respond_to do |format| 
      if @user.save
              #SignupMailer.new_subscriber(@user).deliver
              sign_in @user
              format.html { redirect_to root_path, notice: "Thank you for signing up!" }
              format.json { render json: @user, status: :created, location: @user }
              # format.js {'create'}
            else
              format.html { render action: "new" }
              format.json { render json: @user.errors, status: :unprocessable_entity }
              #format.js
            end
    end

Navigation Partial (HAML): フォームの送信 とモーダルの終了後にこれらの要素を目立たないように変更する必要があります!

%ul.nav.nav-pills.pull-right
  -if signed_in?
    %li{:class => "#{'active' if current_page?(user_path(current_user))}"}=link_to "Your page", user_path(current_user)
    %li=link_to "Sign out", signout_path, :class => "#{'active' if current_page?(root_path)}"   
  -else
    %li= link_to_modal 'Sign Up', new_user_path, :width=> "600", :height =>"400", :remote => true, :id => "new_user_link"
    %li=link_to "Sign In", signin_path, :class => "#{'active' if current_page?(root_path)}"
4

0 に答える 0