没有在Rails应用程序中刷新页面,AJAX就无法加载
AJAX not loading without page refresh in Rails app
我在Rails应用程序中添加了一个AJAX脚本,这样我的表单就会自动将一个car对象添加到car提要中。在幕后,汽车正在像它应该的那样发布到提要上。然而,网页上什么都没有发生,直到我刷新,然后新车弹出。如何在不刷新页面的情况下实现此功能?
AJAX脚本create.js.rb
$('#car_feed').replace("<%= escape_javascript(render 'shared/feed') %>");
$('#new_car').replace("<%= escape_javascript(render 'shared/car_form') %>");
$('#car_errors').html("<%= escape_javascript(render 'shared/error_messages', object: @car) %>");
这是表格:
_car_form.html.erb
<%= form_for(@car, html: {multipart: true, remote: true}) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<h3> Add Your Car</h3>
<div class="field">
<%= f.text_area :year, placeholder: "Year i.e. '1993" %>
<%= f.text_area :brand, placeholder: "Brand i.e. 'Ford'"%>
<%= f.text_area :model, placeholder: "Model i.e. 'Mustang'" %>
<%= f.text_area :vin, placeholder: "17 digit VIN number" %>
<%= f.text_area :mileage, placeholder: "Current Car Mileage" %>
</div>
<p> Add a Photo </p>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<%= f.submit "Add Car", class: "btn btn-add btn-primary" %>
<% end %>
<button class="btn btn-hide btn-primary"> Hide Form </button>
<script type="text/javascript">
$('#car_picture').bind('change', function() {
size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert('Maximum file size is 5MB. Please choose a smaller file.');
}
});
</script>
以及应该通过AJAX添加到的提要:
_feed.html.erb
<div id="car_feed">
<% if @feed_items.any? %>
<ul class="cars">
<%= render @feed_items %>
</ul>
<% else %>
<h3> You haven't added any cars yet.</h3>
<h3> Add one in the sidebar!</h3>
<% end %>
</div>
轨道日志中的一切看起来都很好:
Started POST "/login" for 128.252.110.217 at 2015-02-27 01:16:38 +0000
Processing by SessionsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"gFDS0iSBZl38m/LMPXulLCxvNgsjMQWMA3P/K+VEVzzTvQfTShKud3UaCRRlz6jL4JFtnwFiA6jukBfxZ7WpIw==", "session"=>{"email"=>"andrew@example.com", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"Log in"}
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."email" = ? LIMIT 1 [["email", "andrew@example.com"]]
(0.2ms) begin transaction
(0.1ms) commit transaction
Redirected to http://rails-tutorial-ajhausdorf.c9.io/
Completed 302 Found in 129ms (ActiveRecord: 1.2ms)
我认为你应该使用railscasts.com上发布的关于它们的"selected"或"jquery input"库"rayan bates"
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 获取ajax加载的图像的大小
- 分页:如何用AJAX加载第一个页面
- 页面加载之前的jQuery Ajax加载程序
- ajax加载了内容,脚本没有执行
- 如何使用post和ajax加载视图Codeigniter
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- ajax加载()后,包含图表的图像不会重新绘制
- 如果数据为空,Ajax加载不会停止
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 将内容ajax加载到html弹出窗口中
- 导航栏和AJAX加载
- 用于各个元素的Ajax加载程序
- 通过AJAX加载页面并执行javascript和CSS
- 使用ajax加载页面的一部分
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 显示全屏Ajax加载程序的最佳方式
- 获取通过AJAX加载的元素
- 如何在rails应用程序中测试AJAX加载的内容
- 如何在Ajax加载新内容时停止JavaScript执行