###前提・実現したいこと
rails 4 ローカル環境
マークダウンで書けるブログ機能を実装しました。
今回、そのブログにリアルタイムプレビュー機能を実装したいです。
https://github.com/katoy/qiita_markdown_example
上記のサイトを参考に一通り実装は完了しました。
###発生している問題・エラーメッセージ
ブログの記事を作成するページ(pages/new)に遷移して文字を入力してもプレビューに反映されません。
しかし、一度ページをリロードして文字を入力すれば正常にプレビューに反映されます。
turbolinksをlink_toで下記のように記述して切ると正常に動きます。
data: {"turbolinks" => false}
turbolinksを切れば正常に動くのですが、私はまだ初心者でturbolinksを切っていいものなのかどうか判断できません。
もっと他にこうした方がいいとか、このままでも大丈夫なのかアドバイス頂けると嬉しいです。
よろしくお願いします。
###該当のソースコード
参考サイトをとりあえずそのまま真似してみた感じになりますが、下記のように記述しています。
pages_controller.rb
# Pages Controller class PagesController < ApplicationController include ApplicationHelper before_action :set_page, only: [:show, :edit, :update, :destroy] # GET /pages # GET /pages.json def index @pages = Page.all end # GET /pages/1 # GET /pages/1.json def show end # GET /pages/new def new @page = Page.new end # GET /pages/1/edit def edit end # POST /pages # POST /pages.json def create @page = Page.new(page_params) respond_to do |format| if @page.save format.html { redirect_to @page, notice: 'Page was successfully created.' } format.json { render :show, status: :created, location: @page } else format.html { render :new } format.json { render json: @page.errors, status: :unprocessable_entity } end end end # PATCH/PUT /pages/1 # PATCH/PUT /pages/1.json def update respond_to do |format| if @page.update(page_params) format.html { redirect_to @page, notice: 'Page was successfully updated.' } format.json { render :show, status: :ok, location: @page } else format.html { render :edit } format.json { render json: @page.errors, status: :unprocessable_entity } end end end # DELETE /pages/1 # DELETE /pages/1.json def destroy @page.destroy respond_to do |format| format.html { redirect_to pages_url, notice: 'Page was successfully destroyed.' } format.json { head :no_content } end end def api_markdown markdown = qiita_markdown(params[:text]) p markdown render text: markdown end private # Use callbacks to share common setup or constraints between actions. def set_page @page = Page.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def page_params params.require(:page).permit(:body) end end
pages.coffee
$ -> update_preview = (text) -> $.ajax url: '/api_markdown' type: 'POST' data: {text: text} success: (data) -> $('#preview').html(data) return error: (xhr, status, err) -> $('#preview').html 'エラー発生 ' + err return $('#page_body').on 'keyup change', -> update_preview($(this).val()) return
routes.rb
resources :pages post 'api_markdown' => 'pages#api_markdown'
_form.html.erb
<%= form_for(@page) do |f| %> <div class="field"> <%= f.label :body %><br> <%= f.text_area :body, cols: 80, rows: 10 %> </div> <div class="actions"> <%= f.submit %> </div> <% end %> <div id="preview"><%= qiita_markdown(@page.body) %></div>
###試したこと
jquery-turbolinksというgemをインストールして
//= require jquery.turbolinksを追記しました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/06 13:03