javascript - 如何调用参数来自 Ruby 模型的 javascript 函数？

标签 javascript jquery html ruby-on-rails ruby

这就是我到目前为止所得到的:用户将转到 View 并单击“创建事件”按钮，该按钮将在我的事件表中保存一个带有开始日期和结束日期的事件。

当用户单击“创建事件”时，将在事件 Controller 中创建该事件:

class EventsController < ApplicationController
  before_filter :logged_in?


  def new
    @event = Event.new
    @calendar = current_customer.calendar

  end


  def create

    @calendar = current_customer.calendar

    @event = @calendar.events.build(event_params)
    if @event.save
      redirect_to '/main'
    else
      redirect_to '/compose'
    end
  end

  private
  def event_params
    params.require(:event).permit(:calendar_id, :name, :starts_at, :ends_at) 
  end

并且用户会自动发送到他们的主页 (/main)。这是 html 日历所在的位置。 javascript 函数将位于我的 application.js 文件中，日历 html 将位于我的 main.html.erb 文件中。

我想要做的是能够在事件创建时调用一个 javascript 函数，该函数将更改用户主页上的 html 日历以显示该事件(只是用红色遮挡日期和时间)。 javascript函数需要接受新创建的事件的参数(starts_at、ends_at)才能工作(我认为)。

我对 ruby​​ on Rails、javascript 和 html 非常陌生，所以如果您有有用的答案，请像我 5 岁一样解释一下!!

编辑:这是我用来链接到事件 Controller 的创建方法的 View 代码:

<div class="jumbotron">

  <div class="container">
    <div class="form">
      <h1>Create A Meeting</h1>

      <%= form_for(@event) do |f| %>

          <%= f.text_field :name, :placeholder => "Title" %>
          <!--< f.collection_select :location, Location.all, :id, :locName %> FOR WHEN LOCATIONS ARE A THING-->
          <!--< f.text_field :body, :placeholder => "Short Description" %> NEXT STEP -->

          <div>
            <h2>when do you want it to start?</h2>
            <%= f.datetime_select :starts_at, :placeholder => "when do you want it?"   %>
          </div>



          <div>
            <h2>when do you want it to end?</h2>
            <%= f.datetime_select :ends_at, :placeholder => "when should it end?"  %>
          </div>


          <%= f.submit "Create Meeting", class: "btn-submit" %>
      <% end %>
    </div>
  </div>
</div>

Pages Controller (生成 main 的地方):

class PagesController < ApplicationController

  #before_action :require_customer, only: [:main]

  def home

  end


  def main

  end

end

路线文件:

Rails.application.routes.draw do

  root 'pages#home'
  get '/main' => 'pages#main'
  get '/signup' => 'customers#new'
  resources :customers, :calendars

  get '/signupbus' => 'businesses#new'
  resources :businesses

  get '/login' => 'sessions#new'
  post 'login' => 'sessions#create'
  delete 'logout' => 'sessions#destroy'

  get '/compose' => 'events#new'
  resources :events

这里是我的每周日历 View 的 html 片段(我知道这很糟糕，但我不知道如何改进):

</div>

<div class="jumbotron">

  <div class="container">
    <div class="main2">

      <a class="btn-main" href="/compose">Create a Meeting</a>

    </div>
  </div>
</div>



<div class = "calendarContainer">

<table class= "weeklyCalendar">
  <tr>
    <td class = "blankTopLeft">
    </td>
    <td class = "daytd" width=75 valign=top >
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Mon</span></i></p>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>14</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Tue</span></i></p>
      <p class=MsoNormal ><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>15</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Wed</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Thu</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Fri</span></i></p>
    </td>
    <td class = "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sat</span></i></p>
    </td>
    <td class= "daytd" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'><i><span style='font-size:13.0pt;font-family:"Calibri Light",sans-serif'>Sun</span></i></p>
    </td>
  </tr>
  <tr class = "Monday" style='height:28.05pt'>
    <td class = "timetd" width=75 valign=top>
      <p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
              text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
              font-family:"Calibri Light",sans-serif'>  9:00  </span></i></p>
    </td>
    <td id = "mon900" class ="freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "tue900" class ="freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "wed900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "thu900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "fri900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "sat900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
    <td id = "sun900" class = "freeslot" width=75 valign=top>
      <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
              normal'>&nbsp;</p>
    </td>
  </tr>
  <tr style='height:27.75pt'>
    <td class = "timetd" width=75 valign=top>
      <p class=MsoNormal align=right style='margin-bottom:0cm;margin-bottom:.0001pt;
              text-align:right;line-height:normal'><i><span style='font-size:13.0pt;
              font-family:"Calibri Light",sans-serif'>10:00</span></i></p>
    </td>

最佳答案

使用 Controller 中现有的 create 方法创建新事件并重定向到 PagesController 的 main 方法后，然后，您必须在您的 main 方法中重新加载 event。

为此，您需要知道所需事件的id，这意味着您必须从重定向的任何地方传递它，这意味着您必须在 main 方法的路由中为其腾出空间。

所以，在你的 route :

get '/main/:callendar_id' => 'page#main'

然后从您的 create 方法中，使用新创建的事件的 ID 重定向到此路径。

 def create

    @calendar = current_customer.calendar

    @event = @calendar.events.build(event_params)
    if @event.save
      redirect_to "/main/#{@callendar.id}"
    else
      redirect_to '/compose'
    end
  end

并从 PagesController 的 main 方法重新加载事件:

def main
  @callendar = Callendar.find(params[:callendar_id])
end

这对您来说非常有用，并会在您的主页面上为您提供更新后的日历和新事件。

关于javascript - 如何调用参数来自 Ruby 模型的 javascript 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34334144/

上一篇：javascript - 使用 AngularJS 获取数组中选定的按钮 id

下一篇：javascript - 使用闭包创建的私有(private)函数如何访问构造函数中定义的变量？

相关文章：

javascript - 提交按钮禁用时不会提交表单

javascript - 返回 Javascript Number 的原始值

html - 类与ID-可读性

javascript - 将自定义符号设置为 HighCharts 图例

javascript - 使用 jQuery 的 $.ajax() 或 $.getScript() 方法时有什么方法可以识别重定向吗？

javascript - jQuery 中的 .load 未在 IE6 中加载 cfcharts

javascript - 单击带有轮播的切换按钮后，Bootstrap navbar-collapse 消失

javascript - 单击行内的按钮时，防止触发表行 onclick 事件

javascript - javascript 和 HTML 是不可能分开的吗？

javascript - 如何从特定行获取数据？

©2024 IT工具网  联系我们