Rails 4 AJAX 请求在尝试显示控制器索引操作时不起作用
Rails 4 AJAX request not working when trying to display controller index action
我正在构建一个小型应用程序,为用户提供 add/edit/remove 办公地点的后端,在面向 public 的网站上,我有一个模式,我想在其中显示办公地点,在后端,所有内容都加载到索引视图中,没问题,但是当我尝试将位置加载到 public 面向模式时,没有任何显示。
当我尝试在检查 window (chrome) 中解决此问题时,当我单击 link 启动模式时没有任何反应。
如有任何帮助,我们将不胜感激,因为 AJAX 对我来说还是有些陌生。
My AJAX request (located in the app/views/layout/application.html.erb
file:
<script>
$(document).ready(function() {
$("#publicLocation").on("click", function() {
$.ajax({
url: '/locations',
dataType: 'script',
method: 'GET'
})
})
});
</script>
My locations index action:
class LocationsController < ApplicationController
before_action :set_location, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, except: [:index, :show]
# GET /locations
# GET /locations.json
def index
@locations = Location.all
@location = Location.new
end
end
My modal window:
<div class="modal fade" id="publicLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<table class="table" id="container_locations">
<thead>
<tr>
<th><center>city</center></th>
<th><center>tel number</center></th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% if @locations.present? %>
<div id="containerLocations">
<%= render @locations %>
</div>
<% else %>
<td colspan="11"><center><h5>no locations added. please add your first location now.</h5></center></td>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The table that populates with each entry:
<tbody>
<tr id="location_<%= location.id %>">
<td class="hidden-sm-down"><center><%= location.unit_number %></center></td>
<td class="hidden-sm-down"><center><%= location.street_number %></center></td>
<td class="hidden-sm-down"><center><%= location.street_name %></center></td>
<td class="hidden-sm-down"><center><%= location.quad %></center></td>
<td><center><%= location.city %></center></td>
<td class="hidden-sm-down"><center><%= location.province %></center></td>
<td class="hidden-sm-down"><center><%= location.postal_code %></center></td>
<td><center><%= location.tel_number %></center></td>
<td><center><%= link_to 'Show', location %></center></td>
<td><center><%= link_to 'Edit', edit_location_path(location) %></center></td>
<td><center><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></center></td>
</tr>
</tbody>
And finally my Nav Link to open the modal:
地点
And here is the server output when I click the link to open the modal:
Started GET "/locations?_=1492293579724" for ::1 at 2017-04-15 15:59:40 -0600
Processing by LocationsController#index as JS
Parameters: {"_"=>"1492293579724"}
Rendering locations/index.html.erb within layouts/application
Location Load (0.4ms) SELECT "locations".* FROM "locations"
Rendered locations/_location_edit.html.erb (0.5ms)
Rendered collection of locations/_location.html.erb [1 times] (13.1ms)
Rendered locations/_locations_form.html.erb (3.5ms)
Rendered locations/index.html.erb within layouts/application (46.1ms)
Rendered nav/_signed_out.html.erb (2.2ms)
Rendered users/shared/_links.html.erb (0.7ms)
Rendered users/sessions/_user_login.html.erb (16.6ms)
Rendered locations/_location_edit.html.erb (0.1ms)
Rendered collection of locations/_location.html.erb [1 times] (14.4ms)
Rendered locations/_public_locations.html.erb (28.4ms)
Completed 200 OK in 232ms (Views: 218.4ms | ActiveRecord: 0.4ms)
我认为您需要完成 AJAX 请求。您正在向 /locations
路由发出 GET
请求,我认为它呈现了部分路由?您需要捕获 AJAX 请求的响应,并告诉浏览器将其放置在页面的哪个位置。
您将它作为 ERB 文件中的脚本标记,但它可能在资产文件夹中的 JavaScript 树中工作得更好。
典型的 AJAX 请求如下所示(使用 jQuery):
$("#publicLocation").on("click", function() {
$.ajax({
url: '/locations',
method: 'GET'
}).done(function(response){
// Tell the app where to put the response here
// the response contains your partial, which you can append to an empty
// div in your html.
}).fail(function(error){
console.log(error)
})
})
我正在构建一个小型应用程序,为用户提供 add/edit/remove 办公地点的后端,在面向 public 的网站上,我有一个模式,我想在其中显示办公地点,在后端,所有内容都加载到索引视图中,没问题,但是当我尝试将位置加载到 public 面向模式时,没有任何显示。
当我尝试在检查 window (chrome) 中解决此问题时,当我单击 link 启动模式时没有任何反应。
如有任何帮助,我们将不胜感激,因为 AJAX 对我来说还是有些陌生。
My AJAX request (located in the app/views/layout/application.html.erb file:
<script>
$(document).ready(function() {
$("#publicLocation").on("click", function() {
$.ajax({
url: '/locations',
dataType: 'script',
method: 'GET'
})
})
});
</script>
My locations index action:
class LocationsController < ApplicationController
before_action :set_location, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, except: [:index, :show]
# GET /locations
# GET /locations.json
def index
@locations = Location.all
@location = Location.new
end
end
My modal window:
<div class="modal fade" id="publicLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<table class="table" id="container_locations">
<thead>
<tr>
<th><center>city</center></th>
<th><center>tel number</center></th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% if @locations.present? %>
<div id="containerLocations">
<%= render @locations %>
</div>
<% else %>
<td colspan="11"><center><h5>no locations added. please add your first location now.</h5></center></td>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The table that populates with each entry:
<tbody>
<tr id="location_<%= location.id %>">
<td class="hidden-sm-down"><center><%= location.unit_number %></center></td>
<td class="hidden-sm-down"><center><%= location.street_number %></center></td>
<td class="hidden-sm-down"><center><%= location.street_name %></center></td>
<td class="hidden-sm-down"><center><%= location.quad %></center></td>
<td><center><%= location.city %></center></td>
<td class="hidden-sm-down"><center><%= location.province %></center></td>
<td class="hidden-sm-down"><center><%= location.postal_code %></center></td>
<td><center><%= location.tel_number %></center></td>
<td><center><%= link_to 'Show', location %></center></td>
<td><center><%= link_to 'Edit', edit_location_path(location) %></center></td>
<td><center><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></center></td>
</tr>
</tbody>
And finally my Nav Link to open the modal:
地点
And here is the server output when I click the link to open the modal:
Started GET "/locations?_=1492293579724" for ::1 at 2017-04-15 15:59:40 -0600
Processing by LocationsController#index as JS
Parameters: {"_"=>"1492293579724"}
Rendering locations/index.html.erb within layouts/application
Location Load (0.4ms) SELECT "locations".* FROM "locations"
Rendered locations/_location_edit.html.erb (0.5ms)
Rendered collection of locations/_location.html.erb [1 times] (13.1ms)
Rendered locations/_locations_form.html.erb (3.5ms)
Rendered locations/index.html.erb within layouts/application (46.1ms)
Rendered nav/_signed_out.html.erb (2.2ms)
Rendered users/shared/_links.html.erb (0.7ms)
Rendered users/sessions/_user_login.html.erb (16.6ms)
Rendered locations/_location_edit.html.erb (0.1ms)
Rendered collection of locations/_location.html.erb [1 times] (14.4ms)
Rendered locations/_public_locations.html.erb (28.4ms)
Completed 200 OK in 232ms (Views: 218.4ms | ActiveRecord: 0.4ms)
我认为您需要完成 AJAX 请求。您正在向 /locations
路由发出 GET
请求,我认为它呈现了部分路由?您需要捕获 AJAX 请求的响应,并告诉浏览器将其放置在页面的哪个位置。
您将它作为 ERB 文件中的脚本标记,但它可能在资产文件夹中的 JavaScript 树中工作得更好。
典型的 AJAX 请求如下所示(使用 jQuery):
$("#publicLocation").on("click", function() {
$.ajax({
url: '/locations',
method: 'GET'
}).done(function(response){
// Tell the app where to put the response here
// the response contains your partial, which you can append to an empty
// div in your html.
}).fail(function(error){
console.log(error)
})
})