I new in rails, and i can't understand how to rewrite next functionality.
For example:
I have a list of products.
And every product has some field ( category )
def index
if params[:select_query]
#posts = Post.selecting(params[:select_query])
else
#posts = Post.all
end
respond_to do |format|
format.html # index.html.erb
format.js
end
end
Index.html
<%= select_tag "credit_card", options_for_select([["first", 1], ["second", 2], ["third", 3]], 2) %>
<div class='tab'>
<%= render 'table' %>
</div>
<%= link_to 'Select', posts_path(select_query: 'first'), class: 'link', remote: true %>
Index.js.erb
$('.tab').html("<%= j render 'table' %>")
JS
$(function(){
$('#credit_card').on('change', function(){
variable = $(this).find('option:selected').text();
$('.link').attr('href', '/posts?select_query='+variable).click();
});
});
I try to realise same functionality but without additional link ( button )
In perfect way i should have only JS file ( with Ajax )
Could help me rewrite this functionality by ajax.
You could try this
$('#credit_card').on('change', function(){
var variable = $(this).find('option:selected').text();
$.ajax({
url: '/posts',
data: {select_query: variable },
dataType: 'JS'});
});
Or if you don't want the js.erb at all. You can rewrite your controller as:
# ...
respond_to do |format|
format.html # index.html.erb
format.js { render partial: 'table' }
end
And add success handler for your ajax request:
$.ajax({
url: '/posts',
data: {select_query: variable },
success: function(result) {
$('.tab').html(result);
},
dataType: 'JS'});
You could also add success: window.location.reload() to you ajax call
Related
I have an app where a user has a portfolio that has many positions and each position has many movements. So the url for an associated movement index page for a particular position looks like: portfolio_position_movements. I have an index page with and the controller action looks like
def index
#movements = #position.movements.all
respond_to do |format|
format.html
format.json { render json: #movements}
end
end
My ajax call in my movements.js file is this:
var loadData = function(){
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: ?,
dataType: 'json',
success: function(data){
drawBarPlot(data);
},
failure: function(result){
error();
}
});
};
How can I pass in a dynamic route path so this will work with the movement index on any position object?
You can use erb tags in js files, for me i did it as the following:
#edit.js.erb
$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-heading');
$modalHeading.html("Edit <%= #student.full_name.titleize %>'s information");
$modalBody.html("<%= escape_javascript(render 'edit_student') %>");
$modal.modal();
Note: the file extension is .js.erb so rails can process it. I was calling a modal form and the edit method in students_controller.rb was:
def edit
#student = Student.find(params[:id])
respond_to do |format|
format.html # edit.html.erb
format.js # edit.js.erb
format.json { render json: #student }
end
end
Edit:
You can embed the JS code inside html.erb and use rails routes like:
<script>
var loadData = function(){
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: <%= my_ajax_path %>,
dataType: 'json',
success: function(data){
drawBarPlot(data);
},
failure: function(result){
error();
}
});
};
</script>
What is my_ajax_path?
Is a rails route defined in routes.rb for example i need a list of all available sections that students can apply to using ajax so i did the following:
1- defined a method in students_controllers.rb like this one:
def available_sections
batch_id = (params[:batch_id].nil? || params[:batch_id].empty?) ? 0 : params[:batch_id].to_i
if batch_id == 0
#sections = [].insert(0, "Select Section")
else
batch = Batch.find(params[:batch_id])
# map to name and id for use in our options_for_select
#sections = batch.sections.map{|a| [a.section_name, a.id]}
end
end
2- added a route to it in routes.rb
resources :students do
collection do
get :available_sections
post :create_multiple
end
end
3- Inside new.html.erb:
<script type="text/javascript">
$(document).ready(function() {
$('.student_section_id').hide();
$('#student_batch').change(function() {
$.ajax({
url: "/students/available_sections",
data: {
batch_id : $('#student_batch').val()
},
dataType: "script",
success: function () {
if (+$('#student_batch').val() > 0)
{
$('.student_section_id').fadeIn();
}
else
{
$('.student_section_id').fadeOut();
}
}
});
});
});
</script>
Forget about that messy code :D as it was my first steps but you get the point, and for this line url: "/students/available_sections" it should be using rails routes you can get it by calling rails routes from the command line to get a list of all your application routes
I want to send some data from view to controller in rails through ajax.
I have the following code in
app/view/static/home.html.erb
<script type="text/javascript">
var dummy = "testtext";
$('#finish').click(function() {
$.ajax( {
url: '/finish',
type: 'POST',
data: dummy,
dataType: 'text'
});
});
</script>
<body>
<%= button_to "Finish", {:action => 'finish', :controller => 'static'}, :method => :post, id => 'finish' %>
</body>
in
app/view/static/finish.html.erb
<p><%= #data %></p>
app/controller/static_controller.rb
def finish
#data = params[:data]
end
in routes.rb
post 'finish' => 'static#finish'
My understanding is that on button click the ajax script will be executed and rails action will store the data passed from view. This doesn't seem to work. I'm not sure if my understanding of the flow is right.
Because you are calling params[:data] in the controller, you need to specify that {data: dummy} in the AJAX data section
<script type="text/javascript">
var dummy = "testtext";
$('#finish').click(function() {
$.ajax( {
url: '/finish',
type: 'POST',
data: {data: dummy},
dataType: 'text'
});
});
</script>
Also you might want to respond to your AJAX call in your controller using the following
def finish
#data = params[:data]
respond_to do |format|
format.json { insert_your_code_here }
end
end
My class Contribution belongs_to User. I have a form for a new contribution which includes a search field for for the user to whom the contribution will belong -
in /contributions/new.html.erb -
<%= text_field_tag :search, params[:search], id: "search" %>
<%= link_to "Search", search_contributions_path, id: "search_submit" %>
in application.js.erb
$(document).on("click", "a#search_submit", function(){
$.ajax({
url: $(this).attr("href"),
data: {query: $("#search").val() },
success: function(data) {
var user = $.parseJSON(json);
}
});
});
and in contribution_controller.rb -
def search
#users = User.search(params[:search])
render :users => #users.to_json
end
My controller is trying to render a page - how do I make it return the result I want to the view?
you could write:
render json: { users: #users.to_json }
Wouldn't a respond_to fix that? Something like
respond_to :html, :xml, :json
depending on the formats you want to "respond to", obviously.
Here's the source http://apidock.com/rails/ActionController/MimeResponds/ClassMethods/respond_to
You must use the following in your controller:
respond_to :html, :xml, :json
And You can return json as the following:
respond_to do |format|
format.json { render json: #users.result() }
end
Or as the following:
render json: { :users => #users.result().to_json }
I think you used ransak for searching, so you need use #users.result().to_json instead of #users.to_json
The issue is not related to json, your issue is related to javascript change your ajax call to be:
$(document).on("click", "a#search_submit", function(e){
e.preventDefault();
$.ajax({
url: $(this).attr("href"),
data: {query: $("#search").val() },
success: function(data) {
var user = $.parseJSON(json);
}
});
});
I was wondering how you can get 2 variables to update a div tag using an ajax call instead of just 1. My current .js file:
$(document).ready(function() {
$("select").change(function() {
var selected_product_id;
selected_product_id = $(this).val();
$.ajax({
url: "/products/" + selected_product_id,
type: "GET",
success: function(data) {
$("#description").empty().append(data);
}
});
});
});
show.html.erb where i get the data:
<%= #product.item %>
I would like something like this
$.ajax({
url: "/products/" + selected_product_id,
type: "GET",
success: function(data) {
$("#description").empty().append(data[1]);
$("#price").empty().append(data[2]);
}
});
with
<%= #product.item %>
<%= #product.price %>
where my description div gets updated with #product.item and my price div gets updated with #product.price. How could I achieve this?
EDIT
updated .js file
$(document).ready(function() {
$("select").change(function() {
var selected_product_id;
selected_product_id = $(this).val();
$.ajax({
url: "/products/" + selected_product_id,
type: "json",
success: function(data) {
$("#description").empty().append(product.item);
$("#price").empty().append(product.price)
}
});
});
});
show.html.erb:
<%= #product.item %>
<%= #product.price %>
controller:
class ProductsController < ApplicationController
respond_to do |format|
format.html # show.html.erb
format.json { render :json => #product.to_json }
end
def index
end
def show
#product = Product.find(params[:id])
end
end
I'm pretty sure that controller isn't correct. I placed #product before respond_to and it didn't work so I just put respond_to without really knowing where it goes. Sorry for being such a noob. Thanks for all your help.
FINAL EDIT:
working javascript file:
$(document).ready(function() {
$("select").change(function() {
var selected_product_id;
selected_product_id = $(this).val();
$.getJSON("/products/"+selected_product_id,function(data){
$("#description").empty().append(data.item);
$("#price").empty().append(data.price);
});
});
});
Ah, This remembers me a piece of code I wrote for you a week ago!
You can use JSON to render your Product:
#controller
def show
#product = Product.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render :json => #product.to_json }
end
end
And handle the response from the server like this:
$.ajax({
url: "/products/" + selected_product_id,
dataType: 'JSON',
success: function(data) {
var product = JSON.parse(data);
$("#description").empty().append(product.item);
$("#price").empty().append(product.price);
}
});
Edit #1: I found this method: jQuery.getJSON : http://api.jquery.com/jQuery.getJSON/
You could use JSON, return
{"item": "<%=j #product.item %>", "price": <%= #produce.price %>}
then type: 'json' in the ajax call
So I'm following this outdated tutorial on using the jquery-ui slider with rails 3 beta since it's the only one I've found.
My view which has the script
<p>
<p>Showing all stocks between <span id="x_low_selected"><%= #price_range.first %></span> and <span id="x_high_selected"><%= #price_range.last %></span></p>
</p>
<div id="x_slider"></div>
<ul id="x_stock_list">
<%= render 'map' %>
</ul>
<script type="text/javascript">
$(function() {
$("#x_slider").slider( {
range: true,
step: 1,
max: <%= #price_range.last %>,
min: <%= #price_range.first %>,
values: [<%= #price_range.first %>, <%= #price_range.last %> ],
stop: function(event, ui) {
var prices = $('#x_slider').slider('option', 'values');
$('#x_low_selected').html(prices[0]);
$('#x_high_selected').html(prices[1]);
$.ajax({
url: 'http://localhost:3000/users',
type: "GET",
data: { low: prices[0], high: prices[1] },
dataType: 'json'
});
}
});
});
</script>
model method for prices
def self.low_high_prices
[User.minimum(:start), User.maximum(:end)]
end
and the index method in the controller which the ajax should call
def index
#users = User.all
unless params[:low] && params[:high]
#users = User.all
#json = User.all.to_gmaps4rails do |user, marker|
marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
marker.title user.name
end
else
#json = User.where("start >= params[:low] AND end <= params[:high]).to_gmaps4rails do |user, marker|
marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
marker.title user.name
end
end
#price_range = User.low_high_prices
respond_to do |format|
format.html # index.html.erb
format.json { render json: #users }
end
end
Does anyone know why the ajax call isn't being sent to the controller when the slider stops sliding? Not sure if I would be able to use :remote => true because the slider is generated inside the div.
Thanks
Also I am currently using rails 3.2 with ruby 1.9.7
I would guess that your call is going through to the controller, and the controller is returning JSON data.
The problem is that your $.ajax call is doing nothing with the JSON data received.
You need to add a callback function to handle the JSON data passed back in some way in the ajax call:
$.ajax({
url: 'http://localhost:3000/users',
type: "GET",
data: { low: prices[0], high: prices[1] },
dataType: 'json',
success: function (data) {
alert("Success: " + data);
//do something with the data here.
}
});
Also, looking at the controller code, it will only pass back the contents of #users in the JSON data, not the contents of #json or anything else - not sure if that was your intention or not.