I'd like to have a small dropdown menu where users can select the website's language. For that, I have
<%= f.select(:lang, options_for_select([%w(中文 ch), %w(English en), %w(日本語 jp), %w(한국어 kr)], 'en')) %>
I'd like this to appear on all pages, and I don't think it's necessary to have that stored in a model, so I was thinking of making it with virtual attribtues.
I'm just a bit confused as to where/how I should make this virtual attribute :lang so that the dropdown appears on all pages and the language persists throughout the users' visit to the webpage. Should I make a getter/setter method in my application_controller.rb?
Thanks!
Something that appears on many pages that you only want to define once is often defined as a helper.
app/helpers/application_helper.rb
class ApplicationHelper
def language_select
form_for :language, :url => some_path do |form|
form.select(:lang, options_for_select([%w(中文 ch), %w(English en), %w(日本語 jp), %w(한국어 kr)], 'en'))
end
end
end
In your views then:
<%= language_select %>
You can store lang attribute to session. use ajax to store user's selection.
in your page:
<%=select_tag(:lang, options_for_select([%w(中文 ch), %w(English en), %w(日本語 jp), %w(한국어 kr)], session[:lang]||'en'))%>
<script type="text/javascript">
$('#lang').change(function(){
$.ajax({
url: "languages/select",
type: "GET",
data: {'value=' + $('#lang').val() },
})
});
</script>
in app/controllers/languages_controller.rb
def LanguagesController
def select
session[:lang] = params[:value]
render js: ''
end
end
in config/route.rb, make sure you have:
get "languages/select"
Javascript uses JQuery ,it seems like you are using Rails 4, it should work.
Related
I am trying to dynamically populate a select list and I am getting a 404 error when I make my ajax call to my controller. I have looked around but cannot find out why I am getting this error.
My controller where the method I want to call is.
class UsersController < ApplicationController
def index
##users = User.all
myList = [["A",1],["B"],2]
#classList = myList
render "index.html.erb"
end
.
.
.
def changeclasses
#classlist = [["B",2]]
end
end
And this is my view
<%= form_for UnoClass.new do |f| %>
Department: <%= select_tag(:city_id, options_for_select([['Accounting', 'ACCT'], 2),
{ id: 'departSelect'}) %>
<br />
Course : <%= select_tag(:course, options_for_select(#classList)) %>
<br />
Section : <%= f.text_area :section %>
<br />
<%= f.text_area :sessionId, value: request.session_options[:id], style: "display:none;" %>
<%= f.submit %>
<% end %>
<script>
$(document).ready(function() {
$('#departSelect').change(function() {
$.ajax({
url : "/changeclasses"
});
});
});
</script>
and my routes.rb
Rails.application.routes.draw do
resources :uno_classes
resources :users
root :to => 'users#index'
get '/changeclasses' => "users#changeclasses"
This is the error that I grab from the developer tools on chrome.
GET http://localhost:3000/changeclasses 404 (Not Found)
So, when I make a change to the upper select box departSelect, it makes a call to changeclasses but it cannot find it.
Also when I do rake routes the correct route shows up.
changeclasses GET /changeclasses(.:format) users#changeclasses
I have not implemented the method yet but it should change the #classList and therefore change the contents of the course select box and it never gets called because of the 404 error.
Any help would be appreciated because I cannot figure out why there is a problem here.
Here's some ideas on things you can try to get it working.
First. Create a view called "changeclasses.js.erb" in your Users views folder which is what Rails will by default look to load unless you tell it otherwise since its a js request. You can/should also put the js that you want to run with this particular method in that file (changeclasses.js.erb).
Second. Try updating the ajax call's datatype to "script" so that it will be processed by your controller as js.
$.ajax({
url : "/changeclasses",
dataType: "script"
});
Third. If all that doesn't fix it, I would add the below code to your controller to make it sure it is responding to js requests.
class UsersController < ApplicationController
respond_to :js
Hope one of those helps!
I have a view like this (/app/views/projects/new.html.erb)
how should I use if else function to do this?
<p>
<%= f.label :payment_type, "payment_type" %>
<%= f.radio_button :payment_type, 1, checked: true %>(1)
<%= f.radio_button :payment_type, 2 %>(2)
</p>
if payment_type == 1
show these things
else(or payment_type == 2)
show these things
end
my controller save this views(/app/controllers/projects_controller.rb):
def new
#project = Project.new
end
def create
#project = Project.new(params.permit![:project])
end
how do I use it property
Javascript
You'll need to use Javascript to give you some front-end interactivity.
To give you some specifics - when you run a Rails application, the *rails" part of the system will run in the backend -- meaning that each time you render an "view", your controller is going to pull the data from your model, allowing Rails to create a pure HTML output for you.
The issue you have is that when you render this output, you cannot then invoke Rails functionality again for that call (look up how stateless technology works -- An example of a stateless protocol is HTTP, meaning that each request message can be understood in isolation.), meaning you need some way to manage the front-end area of your interface.
This is done with Javascript:
[Javascript] is most commonly used as part of web browsers, whose
implementations allow client-side scripts to interact with the user,
control the browser, communicate asynchronously, and alter the
document content that is displayed
--
This is how you'll handle it:
JSFiddle
"Bind" the radio inputs to a "change" event
When the change event is triggered, perform the business logic directly in your JS
Append the changes to the view (DOM)
Rails
Here's what you'll need to do specifically:
#app/assets/javascripts/application.js
$(document).on("change", 'input[type="radio"]', function(){
if($(this).val = "1") {
// something here
}else{
// something else here
};
});
#app/views/controller/your_view.html.erb
<%= f.label :payment_type, "payment_type" %>
<%= f.radio_button :payment_type, 1, checked: true %>(1)
<%= f.radio_button :payment_type, 2 %>(2)
--
Ajax
Further to this - if you wanted to return Rails-based business logic to your view, you'll want to use ajax. I won't go into too much detail with this, apart from saying that this will essentially send a "pseudo request" to your browser.
Here's how you'd set it up:
#config/routes.rb
resources :payments do
get :type, on: :collection #-> domain.com/payments/type
end
This custom method will allow you to perform the business logic you need:
#app/controllers/payments_controller.rb
class PaymentsController < ApplicationController
def type
type = params[:type]
if type == "1"
...
else
...
end
end
end
This will then give you the ability to crate an ajax call to this method:
#app/assets/javascripts/application.js
$(document).on("change", 'input[type="radio"]', function(){
$.ajax({
url: "payments/type",
data: { type: $(this).val() },
success: function(data) {
alert("Success");
}
});
});
<% if payment_type == 1 %>
these
<% else %>
those
<% end %>
I have a page that works with various models.
One of the items is "Language", where I select the language and level. But I can only insert a single language. I wonder what the best way to insert a "New" button to add another language, even if the edit page (because even though I need to include in the edit page too)
I'm using accepts_nested_attributes_for and simple_form.
Have tried several solutions but could not find any similar tutorial with what I need.
When you mention you have a page which works with various models, you need to remember views != models. In rails, views are used to show data you have defined in your controllers.
When you ask about inserting a new button to add a new language, this will be entirely dependent on your interface, and how you wish it to work. A good example would be this:
#app/views/languages/_new_lang.html.erb
<%= form_for Language.new, url: language_path do |f| %>
<%= f.text_field :name %>
<%= f.submit "Create" %>
<% end %>
A better way to do this will be to use ajax & render a layout-less element on your page:
#app/views/controller/your_view.html.erb
<%= button_to "Test", new_language_path, remote: true, id: "test" %>
#app/controllers/languages_controller.rb
Class LanaguageController < ActiveRecord::Base
layout Proc.new { |controller| controller.request.xhr? ? false : "application" }
end
#app/assets/javascripts/application.js.erb
$(document).on("ajax:success", "#test", function(data) {
$(data).appendTo("body");
});
This will allow you to send the required data through to your system to create a new language. Can be improved, so if you want to use it please let me know in the comments
In rails, what kind of AJAX call would need to be made in order to create and modify resources. Say if i had a resource like this
Man(age: integer, country_from:string, residence:string)
Now how would this be made through an AJAX call (like sending post to my create function, how would parameters be sent in, how would my controllers be setup). Be detailed, my AJAX is very, very, very weak. (right now i have my Man made like rails generate scaffold Man age:int country_from:string ...)
PS
Im using rails 3
So I believe there are two sides to this: the javascript and the controller changes.
In your controller you need to ensure it can return json output (or xml or whatever your chosen ajax-y output is):
def man
# do your work
return_data = {}
# initialize your return data
respond_to do |format|
render :json => return_data.to_json, :layout => nil
end
end
There are many ways to generate your json output but basically you have to make sure it's in a shape that is easily consumed on the view javascript.
I use jQuery and here's the code to execute an ajax call:
function foo(some_param) {
$.ajax({
type: 'GET',
url: "/<controller>/man?FOO=" + some_params,
dataType: 'json',
success: handle_success,
error: handle_errors
}
function handle_success(data) {
# process return JSON. it's a javascript object corresponding to the shape
# of your JSON. If your json was a hash server side, it will be an 'object', etc
}
function handle_error(data) {
# handle error cases based upon failure in the infrastructure, not
# failure cases that you encounter due to input, etc.
}
You can tie the foo function to some button or onclick as you desire.
I am not sure this is complete enough. Let me know if you need more detail, etc.
Rails 3 can help by telling the form that you want it to be "remote" (ajax)
<%= form_for #man, :remote=>true do |f| %>
<div class="field">
<%= f.label :man %>
<%= f.text_field :man %>
</div>
<%= f.submit "Save", :disable_with=>"Saving..."%>
<% end %>
in your Controllers
class MansController < ApplicationController
respond_to :js, :html
def update
#man = Man.find(params[:id])
#man.update_attributes(params[:man])
respond_with #man
end
end
Then, you can have
/app/views/mans/update.js.erb
<% if #man.errors.any? %>
alert("This is javascript code that either renders the form in place of the other form");
<% else %>
alert("success!")
<% end %>
Note: Wherever I say "mans" above, it might be "men"
I need some help on how to implement a jquery-ui autocomplete in my Rails app.
I want to add autocompletion to a text field where the user can enter in a customer name. As there can be hundreds of customers, I will need to pull the suggested auto-completion values 'remotely', as in, from a table (at least this is what I understand).
The main point I am failing to understand is how to provide the suggested values to the autocompletion textbox. I have read the jquery-ui docs, but I seem to be a bit dense on this matter.
So what I am really after is an example of how I can get this to work in a Rails app, not necessarily a full description of how the javascript is built (that's what the jquery-ui team has done for me =) ).
For example, how do I prepare the data for the autocompletion, and how do I attach the autocompletion functionality to a textbox.
Well I never got an answer to my question above so I ended up having to figure it out for myself. I thought I should post the solution I came up with in case there are any other guys out there who are wondering the same thing.
First thing you should know is that this is my first experience with javascript, and I am just getting the hang of Rails. So by all means, feel free to edit, comment anywhere you feel I have gone wrong with this. Right or wrong at least I know that it functions the way I wanted it to.
I think the best way to show this is by example. So the following is how I got the autocomplete widget to work in my app. You can go ahead and put the following code in your app even if you don't understand what is happening, then we can go over how each part is working by example. After this you should have a grasp on how to modify it for your use or refractor it.
**INCLUDE JQUERY UI IN YOUR RAILS APP.**
Download a copy of the [jQuery UI][ui] and place jquery-ui-1.8.2.custom.min.js inside your /public/javascript directory. Also make sure you have a copy of jQuery itself and that this is also in the same folder.
Include the jQuery UI file and the jQuery file in your application.html.erb file like this.(you can name the files as you please as long as they match)
<%= javascript_include_tag 'jquery.min', 'jquery-ui-1.8.2.custom.min.js' %>
In your download of jQuery UI, you will have a folder that contains all of your CSS data. The name will vary based on the theme you chose, for example I chose the theme 'cupertino'. Place the entire folder containing your CSS data into '/public/stylesheets/'. Then include the CSS file in your application.html.erb like this.
<%= stylesheet_link_tag 'cupertino/jquery-ui-1.8.2.custom' %>
**EXAMPLE AUTOCOMPLETE JAVASCRIPT**
Now take the following chunk of code and place it in one of your 'new' views. You can use this in any view, but realize that I have literally taken it from an existing view belonging to a controller called 'links_controller', and it is pulling data from a 'people_controller'. Hopefully you know enough about Rails to work out what you need to change so this works for you.
-- Begin big chunk of code --
<script type="text/javascript">
$(function() {
// Below is the name of the textfield that will be autocomplete
$('#select_origin').autocomplete({
// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
minLength: 2,
// This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
source: '<%= people_path(:json) %>',
// This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
focus: function(event, ui) {
$('#select_origin').val(ui.item.person.given_name);
return false;
},
// Once a value in the drop down list is selected, do the following:
select: function(event, ui) {
// place the person.given_name value into the textfield called 'select_origin'...
$('#select_origin').val(ui.item.person.given_name);
// and place the person.id into the hidden textfield called 'link_origin_id'.
$('#link_origin_id').val(ui.item.person.id);
return false;
}
})
// The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized.
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
// For now which just want to show the person.given_name in the list.
.append( "<a>" + item.person.given_name + "</a>" )
.appendTo( ul );
};
});
</script>
<h1>New link</h1>
<% form_for(#link) do |f| %>
<%= f.error_messages %>
<!-- Place the following text fields in your form, the names are not important. What is important is that they match the names in your javascript above -->
<p>
Select which person you want to link:<br />
<!-- This is the textfield that will autocomplete. What is displayed here is for the user to see but the data will not go anywhere -->
<input id="select_origin"/>
<!-- This is the hidden textfield that will be given the Persons ID based on who is selected. This value will be sent as a parameter -->
<input id="link_origin_id" name="link[origin_id]" type="hidden"/>
</p>
<!-- end of notes -->
<p>
<%= f.label :rcvd_id %><br />
<%= f.text_field :rcvd_id %>
</p>
<p>
<%= f.label :link_type %><br />
<%= f.text_field :link_type %>
</p>
<p>
<%= f.label :summary %><br />
<%= f.text_area :summary %>
</p>
<p>
<%= f.label :active %><br />
<%= f.check_box :active %>
</p>
<p>
<%= f.submit 'Create' %>
</p>
<% end %>
-- End Big Chunk of Code --
Okay now to connect the dots.
**PROVIDE DATA FOR AUTOCOMPLETE TO USE AS SUGGESTIONS**
Lets start by connecting up some data that the autocomplete textfield can display in the drop down suggestions. The format we will be using is JSON, but don't worry if you are not familiar with it ... neither am I =). It is good enough to know that it is a way to format text so that other parts of yours/other applications can use it.
The data the textfield will need for the autocomplete is specified in the 'source:' option. Because we want to send a list of peoples names and their ID to the autocomplete we will put the following as the source.
source: '<%= people_path(:json) %>'
The rails helper above will translate to a string "/people.json". You do not need to create a page at "/people.json". What you do need to do is tell your people_controller what to do when it receives a request for /people with the .json format. Put the following into your people_controller:
def index
# I will explain this part in a moment.
if params[:term]
#people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
else
#people = Person.all
end
respond_to do |format|
format.html # index.html.erb
# Here is where you can specify how to handle the request for "/people.json"
format.json { render :json => #people.to_json }
end
end
Now we have all the people in #people being sent to the autocomplete textfield. This brings up the very next point.
**FILTER DATA USED FOR AUTOCOMPLETE SUGGESTION, BASED ON INPUT**
How does the autocomplete textfield know how to filter the results based on what you type?
The autocomplete widget assigned to the textfield will send whatever you type into the textfield as a parameter to your source:. The parameter being sent is "term". So if you were to type "Joe" into the textfield, we would be doing the following:
/people.json?term=joe
That is why we have the following in the controller:
# If the autocomplete is used, it will send a parameter 'term', so we catch that here
if params[:term]
# Then we limit the number of records assigned to #people, by using the term value as a filter.
#people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
# In my example, I still need to access all records when I first render the page, so for normal use I assign all. This has nothing to do with the autocomplete, just showing you how I used it in my situation.
else
#people = Person.all
end
Now that we have limited the number of records assigned to #people based on what is typed into the autocomplete textfield, we can now turn that into JSON format for the autocomplete suggestions.
respond_to do |format|
format.html # index.html.erb
format.json { render :json => #people.to_json }
end
Now, just review the comments inside the "Big Chunk of Code" which should explain the rest of how this ties together.
At the end you should have a textfield on your page that acts as the autocomplete and a hidden field that will send the ID in a parameter to your controller.
**CUSTOMIZE YOUR OWN AUTOCOMPLETE**
Once you understand the above and you want to modify it for your use, you should know that the format JSON returned from your controller looks like this:
[{"person":{"id":1,"given_name":"joe","middle_name":"smith","family_name":"jones","nationality":"australian"}}]
The way to access the different values from the JSON string in your javascript in this case would be:
ui.item.person.name_of_some_attribute_such_as_given_name
Pretty, simple. A lot like accessing an ActiveRecord attribute in Rails.
One last note. I spent a lot of time looking for a different way to supply the hidden value, as I thought this function should have been built into the jquery widget. However, this is not the case. It is clearly shown in the official jQuery example that the way to send a different value then selected as a parameter, is to use a hidden field.
Dale
[ui]:http://jqueryui.com/download
jQuery 1.9/1.10 removed the key autocomplete and added uiAutocomplete
.data("uiAutocomplete") instead of .data("autocomplete")
After modifying to above,it worked for me.
Dale's Answer is quite the tutorial. One thing to note is that using your first query, the datasource will only return matches beginning with the string you type. If you want search anywhere in the word, you need to change:
#people = Person.find(:all,:conditions =>
['given_name LIKE ?', "#{params[:term]}%"])
to
#people = Person.find(:all,:conditions =>
['given_name LIKE ?', "%#{params[:term]}%"])
(added an extra % to the query)
I basically followed Dale's advice below but my controller and js files were slightly diff- his version was giving me issues for some reason (maybe bc of jquery updates)
Context: I'm trying to autocomplete names of DJs typed in by users - also a newb
DJs Controller
class DjsController < ApplicationController
def index
if params[:term]
#djs = Dj.is_dj.where('lower(name) LIKE ?', "%#{params[:term].downcase}%")
respond_to do |format|
format.html
format.json { render :json => #djs.map(&:name) }
end
end
end
end
html.erb file
<script type="text/javascript">
$(function() {
$('#select_origin').autocomplete({
source: '<%= djs_path(:json) %>'
})
$('.submit-comment').click(function(){
var dj_name = $('#select_origin').val();
$('#link_origin_id').val(dj_name);
})
})
</script>
This is a great help.
In addition to it in case if you need to fetch url of image of user, it might not be possible with to_json. For that add the following code in model.
def avatar_url
avatar.url(:thumb)
end
And then in controller instead of to_json use as_json
respond_to do |format|
format.json {render :json => #users.as_json(:only => [:id,:name,:username], :methods => [:avatar_url]) }
end
It's important to note that if your 'source' is relatively small, for example 50 elements, the implementation should be different (and a lot simpler). It is mentioned in the fourth paragraph of the official doc:
https://api.jqueryui.com/autocomplete/
When using local data all you need to do is obtain the data and pass it to the autocomplete method, and it will do the filtering for you. You don't need to go back and forth to the server every time a term es entered.
function filterByTags(tags) {
$("#stories-filter").autocomplete({
source: tags,
autoFocus: true
});
}
$("#stories-filter").click(function() {
$.ajax({
dataType: 'json',
method: 'GET',
url: 'tags/index',
data: $(this).data('project-id'),
success: function (response) {
if(response.success) {
var tags = response.data.tags;
filterByTags(tags);
}
},
error: function (response) {
if(response.status === 422) {
var $errors = 'There are no tags in this project',
$errorsContainer = $('.error-container');
$errorsContainer.append($errors);
$errorsContainer.show();
}
}
});
});
Since this is old, but google still comes here, a small note about the main answer, which is essentially good, but some things have changed:
see answer about jquery having changed .data("uiAutocomplete") to .data("autocomplete")
Also i would recommend a separate route on the resource collection that just handles json
use rabl to create smaller json (or pluck for larger models)
ilike , not like, for case insensitive
the % in front, so the search is not just start_with.
valiable traversal in the methods, like item.person.name are just item.name (so drop the .person)
use coffee (in haml)
use a limit, and where as in: Person.where('given_name ilike ?', "%#{params[:term]}%").limit(20)