导轨 - AJAX来为新/创建行动导轨、来为、行动、AJAX

2023-09-10 15:02:13 作者:[勋宝]

我已经有了一个时间表,上面有事件的谐音,这样就可以直接CRUD事件在时间轴页面上。我有它的工作,这样你可以删除一个事件,并删除随着时间线部分刷新,无需在页面清爽。

但我无法得到它的工作的一个新的事件,或编辑之一。请有人可以帮我找出我要去的地方错了?谢谢!

我已经把$ C $下一个新的事件在这里,因为我敢肯定,新的和删除,我可以工作,如何编辑排序。

时间表/显示:

 < D​​IV ID =显示时间线>
   <%=渲染:部分=> show_timeline%>
 < / DIV>

    < D​​IV ID =我的时间线箱>
        <%=渲染:部分=> my_timeline%>
    < / DIV>

< D​​IV ID =新事件>
    <%=渲染:部分=> new_event:当地人=> {:事件=> Event.new(:timeline_id => @ timeline.id)}:远程=>真%>
< / DIV>
 

时间表/ _new_event.html.erb:

 <%=的form_for(事件)做| F | %>
  <如果event.errors.any%? %>
    < D​​IV ID =error_explanation>
      < H2><%=复数(event.errors.count,错误)%>禁止该事件被保存:< / H>

      < UL>
      <%event.errors.full_messages.each办|味精| %>
        <李><%=味精%>< /李>
      <%结束%GT;
      < / UL>
    < / DIV>
  <%结束%GT;

  <%= f.hidden_​​field'timeline_id',:价值=> current_user.timeline.id%>
  < D​​IV CLASS =字段>
    <%= f.label:日期%>< BR />
    <%= f.date_select:START_DATE,:为了=> [:一天,:月:年]:START_YEAR => 1800%>
  < / DIV>
  < D​​IV CLASS =字段>
    <%= f.label:标题%>< BR />
    <%= f.text_field:标题,:大小=> 50%GT;
  < / DIV>
  < D​​IV CLASS =字段>
    <%= f.label:event_description%>< BR />
    <%= f.text_area:文本:大小=> 47x4%>
  < / DIV>
  <%= check_box_tagblockCheck:价值=> 1,:检查=>假%>
  < D​​IV CLASS =字段ID =media_box>
    <%= f.label:媒体%>&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;<跨度>请此处&lt粘贴URL; / SPAN>&LT ; BR />
    <%= f.text_field:媒体:大小=> 50%GT;
  < / DIV>
  < D​​IV CLASS =字段>
    <%= f.label:media_description%>< BR />
    <%= f.text_area:标题,:大小=> 47x3%>
  < / DIV>
  < D​​IV CLASS =行动>
    <%= f.submit'创建活动,:类=> BTN BTN-成功%>
  < / DIV>
<%结束%GT;
 

事件/ create.js.erb:

  $('#新事件)HTML('<%= escape_javascript(渲染:部分=>中/时间表/ new_event:当地人=> { :事件=> Event.new(:timeline_id => @ timeline.id)})%>');
$('通知')的html(< P>事件已成功创建< / P>中)。
$('通知')显示(300)。
$('#我的时间线箱)HTML('<%= escape_javascript(渲染:部分=>中/时间表/ my_timeline)%>')。
$('#显示时间线)HTML('<%= escape_javascript(渲染:部分=>中/时间表/ show_timeline)%>')。
 

事件控制器:

 高清新
    @event = Event.new

    respond_to代码做|格式|
      的format.html#new.html.erb
      format.json {渲染JSON:@event}
      format.js
    结束
  结束

DEF创建
    @event = Event.new(PARAMS [:事件])

    respond_to代码做|格式|
      如果@ event.save
        的format.html {redirect_to时@ event.timeline,通知:事件已成功创建 }
        format.json {渲染JSON:@event,状态:创建,地点:@event}
        format.js
      其他
        的format.html {渲染的动作:新}
        format.json {渲染JSON:@ event.errors,状态:unprocessable_entity}
        format.js
      结束
    结束
  结束
 

解决方案

:远程=>在选项渲染:偏在时限/不需要显示视图

相反,的form_for _new_event.html.erb 应具备的选项:远程(这使得表单提交通过AJAX)和:格式(这种请求的答复是在JavaScript),例如:

 <%=的form_for事件:远程=>如此,:格式=> :JS做| F | %>
 

I've got a timeline with events partials on it so that you can CRUD events directly on the timeline page. I've got it working so that you can delete an event, and the delete partial refreshes along with the timeline, without the page refreshing.

But I can't get it working for a new event, or to edit one. Please can someone help me figure out where I am going wrong? Thanks!

I've put the code for a new event here, as I'm sure between the new and delete, I can work out how to sort the editing.

timelines/show:

 <div id="show-timeline">
   <%= render :partial => "show_timeline" %>
 </div>

    <div id="my-timeline-box">
        <%= render :partial => "my_timeline" %>
    </div>

<div id="new-event">
    <%= render :partial => "new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) }, :remote => true %>
</div>

timelines/_new_event.html.erb:

<%= form_for(event) do |f| %>
  <% if event.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:</h2>

      <ul>
      <% event.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%=f.hidden_field 'timeline_id', :value => current_user.timeline.id %>
  <div class="field">
    <%= f.label :date %><br />
    <%= f.date_select :start_date, :order => [:day, :month, :year], :start_year => 1800 %>
  </div>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :headline, :size => 50 %>
  </div>
  <div class="field">
    <%= f.label :event_description %><br />
    <%= f.text_area :text, :size => "47x4" %>
  </div>
  <%= check_box_tag "blockCheck", :value => "1", :checked => false %>
  <div class="field" id="media_box">
    <%= f.label :media %>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Please paste a URL here</span><br />
    <%= f.text_field :media, :size => 50 %>
  </div>
  <div class="field">
    <%= f.label :media_description %><br />
    <%= f.text_area :caption, :size => "47x3" %>
  </div>
  <div class="actions">
    <%= f.submit 'Create Event', :class => "btn btn-success"  %>
  </div>
<% end %>

events/create.js.erb:

$('#new-event').html('<%= escape_javascript( render :partial => "/timelines/new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } ) %>');
$('.notice').html("<p>Event was successfully created.</p>");
$('.notice').show(300);
$('#my-timeline-box').html('<%= escape_javascript( render :partial => "/timelines/my_timeline" ) %>');
$('#show-timeline').html('<%= escape_javascript( render :partial => "/timelines/show_timeline" ) %>');

events controller:

def new
    @event = Event.new

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @event }
      format.js
    end
  end

def create
    @event = Event.new(params[:event])

    respond_to do |format|
      if @event.save
        format.html { redirect_to @event.timeline, notice: 'Event was successfully created.' }
        format.json { render json: @event, status: :created, location: @event }
        format.js
      else
        format.html { render action: "new" }
        format.json { render json: @event.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end

解决方案

The :remote => true option on render :partial in the timelines/show view is not required.

Instead the form_for in _new_event.html.erb should have the options :remote (this makes the form submit via ajax) and :format (this requests the response be in JavaScript), e.g.:

<%= form_for event, :remote => true, :format => :js do |f| %>

 
精彩推荐
图片推荐