I have a view with a bunch of elements in it.One of them (a div) is shown depending of a value that changes inside a select_tag (also within the same page).
I'm getting the selected ID from the select_tag element
$('#some_id').on('change',function(){
//$(this).val()
})
but then just don't know how to fetch the object and check for one of its properties and that way know if I should show the div or not?.
I thought of sending that id to the server...do whatever I need over there and then come back to the view and try something like this
<% if some_condition %>
<div>
...
</div>
<% end %>
This (of course) might not be the way.I'd be glad to understand how this happens
You way of doing it after getting some data from the server onChange of the select would work. You might also consider this approach.
But if you could pre-populate the divs and add a class or some other attribute it with which you could relate to the chosen option in the select field, then you can prevent the server call entirely.
<div class="opt1Val selectOptsDiv"> </div>
<div class="opt2Val selectOptsDiv"> </div>
<div class="opt3Val selectOptsDiv"> </div>
hide all these divs initially with css display: none;.
$('#some_id').on('change',function(){
var selectedOptionVal = $(this).find("option:selected).val();
$("." + selectedOptionVal).show();
})
But I guess you would be able to do this if the showing and hiding of the div's depend only on the selected option value and do not have to go through some other processing at the server end.
Related
Edited:
I am trying to achieve cascading dropdown.
In my 1st dropdown, I get all the distinct Names.
<%= f.input :names, collection: names.distinctnames, :label => "Select Name" %>
On selecting the name, how to access the value and pass it to controller/model so that I can filter based on the values and bind it to the next dropdown.
In my Model, I have the following scope
scope :distinctnames, ->{ Names.distinct.pluck(:names)}
Here, I want to add another scope that gives the cities for the selected name.
So, how would I get the data selected in my view and get all the values in the next dropdown.
If this is the wrong approach, can someone suggest me the alternative one with and example.
My code
<!DOCTYPE html>
<html>
<head>
<script>
$(document).on('change', '#names_id', function(){
var custId = $(this).val();
return custId;
});
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panle-heading">Panel Primary</div>
<div class="panel-body">
<%= simple_form_for #ruby, url:{action: 'create'}, html: {class: 'form'} do |f| %>
<%= f.select :names_id, options_for_select(Names.distinctnames), {}, {:multiple => true} %>
<%= f.select :city_name, options_for_select(Names.where(names_id: custId).pluck(:city_name)), {}, {:multiple => true} %>
<% end %>
</div>
</div>
</div>
</div>
<div>
</body>
</html>
Here, at the time of loading the the view I get undefined local variable or method `custId' for #<#
How to load the all other dropdowns empty and then bind the value from the selected dropdown value to the second one.
So as I understand, You got more than one drop down list but the got dependency, Like selected value from drop-down list 1 will affect values in drop-down list 2, In this case reaching the controller action will need the form to be submitted, If what I'm thinking about is right I have more than one idea:
First one
You will use javascript or JQuery library to add this dynamic behavior to you page, the scenario is going to be like this:
1- User will select value
2- an actionListner is fired using js when select.
3- send a request to the server
4- get data according to parameters you sent to the server
5- enable the next drop-down list after binding returned data from the server.
This solution won't need you to refresh the page, Which I think will make user satisfied.
Second solution
You will put actionListner on drop-down and submit the form when user select value.
This gonna need a little bit validation in you server-side plus a little bit effort to save data that was filled if there is other inputs(saving them in instance variables I mean like #select_drop_1 and use them in inputs as user gonna feel that values are not missed).
Third solution
If it is applicable that you make this data available once user opened the form, By this I mean grouping this data, Making a query that groups cities by these distinct names, So that when user select a name, a simple js code will run enabling and binding data to the next drop-down and so on.
If I were you I would choose either first or third option, Pardon me because I don't know the schema of your application, I don't know if it is applicable to make grouping I'm imagining that Names got its table and there is another one called City.
Hope it helps.
There is the structure like:
<div class="parent">
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">
<div class="CheckBox">
</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
</div>
In my script I am writing a loop for each of the 4 div's under div[#class='parent'] and aiming to click the checkbox if there is, i.e.
members = page.all(:xpath, '//div[#class='parent'])
members.each do |a|
if **page.has_xpath?(a).find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']")**
a.find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
However I can't look for the correct usage of has_xpath? with xpath including variable.
Please advice? Thank you!
has_xpath? takes an XPath expression (not an element) and returns a boolean (true/false) based on whether there are any elements that match that expression within the current scope - http://www.rubydoc.info/gems/capybara/Capybara/Node/Matchers#has_xpath%3F-instance_method. Since it returns true/false you can't then call find on it. For the example you posted there's no need for XPath or checking for the existence of the elements, just find all the matching elements and call click on them. Something like
page.all('div.parent div.fieldRow div.Checkbox').each { |cb| cb.click }
or
page.all('div.parent div.Checkbox').each { |cb| cb.click }
if the fieldRow class isn't something you really need to check.
Note: this assumes clicking the elements doesn't invalidate any of the other matched elements/change the page.
If you REALLY need to do it with the whole members and looping on them , using XPath, and checking for presence then it would be something like
members = page.all(:xpath, './/div[#class='parent'])
members.each do |a|
if a.has_xpath?(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']")
a.find(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
Note: the .// at the beginning of the XPath expressions is needed for scoping to work correctly - see https://github.com/teamcapybara/capybara#beware-the-xpath--trap - which is an issue using CSS selectors doesn't have, so you should really prefer CSS selectors whenever possible.
I am using tabs and want to load multiple index pages into tabs. For instance:
class AnimalsController < ApplicationController
def index
#dogs = Dog.all
#cats = Cat.all
end
end
Then in my views/animals/index.html.erb
<ul class="tabs">
<li>Dogs</li>
<li>Cats</li>
</ul>
<div id="#dogs">
<%= render #dogs %>
</div>
<div id="#cats">
<%= render #cats %>
</div>
Is refactoring out into a partial the only way to achieve this?
I'd like to have them loaded statically at once and not have to resort to doing an Ajax.load() when the tab is clicked.
You have your answer in the question itself. Why don't you just use javascript to hide the two partials and call them when their respective tab is clicked? You don't need ajax for this at all :)
Since you did not mention the javascript library that you use, I will give a generic solution using jquery:
Also you need not add a # to your respective div's ids. Change it to this:
<ul class="tabs">
<li id="dogs">Dogs</li>
<li id="cats">Cats</li>
</ul>
<div id="dogs" class="subTabs">
<%= render #dogs %><hr />
</div>
<div id="cats" class="subTabs">
<%= render #cats %><hr />
</div>
$(document).ready(function() {
$('.subTabs').hide(); //Hide the subTabs as soon as the DOM is loaded.
$('li').live('click', function(e) {
$('.subTabs').hide(); //Calling this again so as to remove an already loaded
tab, if any. You can refactor this part to make it
even simpler.
$('body').find('.subTabs').attr('id',$(this).attr('id')).show();
//This finds the ".subTabs" whose id is the same as the "li" id that
was clicked and shows it. Ofcourse, even this can be made even more
compact had i known your entire DOM structure.
});
});
Edit:
You also have to make sure that you style it using CSS to make it look more like tabs if you haven't already. :)
Hope this helps. :)
You typically only want to use a partial if you are using the same or almost the same code in more than one place.
When you say "index page", do you really want to use the same code that is used in an index of another controller? If so, then a partial is the best strategy.
Don't use JavaScript to solve a layout / code organization problem.
I have a rails project where the the view displays a list of items. I use acts_as_list to make the list DnD orderable and in_place_editing on each item to, well, edit it.
My problem is that when I DnD the items around, the item I drag automagically becomes editable when I drop it. Any tips on how I can avoid that behavior.
Ideally, I'd like to make it editable by clicking a small icon next to the item, but I don't know how to make that work with this plugin.
Thanks in advance.
This happens because the element you are dragging has a listener on mouseup that begins the edit. You can specify an :external_control in the options hash if you want a different element to trigger the edit.
<div id="<%= dom_id(#obj) -%>">
<span><%= #obj.to_s -%></span>
<img id="<%= dom_id(#obj, :edit) -%>" src="edit_handle.png"/>
</div>
<%= in_place_editor(dom_id(#obj), :external_control => dom_id(#obj, :edit)) %>
<%= draggable_element(dom_id(#obj)) %>
I am trying to write a rails application which lets you go to a certain page, say /person/:id. On this page it shows a set of available resources. I want each resource to have a button next to it, which reserves that resource to that person (by creating a new instance of an Allocation model.) As an extension, I'd like several buttons by each resource, that cancel reservations and do other things. I'd also like to input data alongside some of the buttons, e.g. to allocate some % of a resource.
My problem is I can't work out how to sensibly do this without repeating myself, or having a very hacky controller. How can I do this without matching on the value part of the submit buttons (the text on the buttons), or using any javascript?
Additionally, if you have two forms on a page, how do you set it up so changes on both forms are saved when any submit button is clicked?
im using jQuery, and this is what i did :
<script type="text/javascript">
$(document).ready(function() {
$('#bulk_print').click(function(){
var target = '<%= bulk_print_prepaid_vouchers_path(:format => :pdf) %>';
$('#prepaidvoucher_bulk_print').attr('action', target);
$('#prepaidvoucher_bulk_print').submit();
});
$('#bulk_destroy').click(function(){
var target = '<%= bulk_destroy_prepaid_vouchers_path %>';
$('#prepaidvoucher_bulk_print').attr('action', target);
$('#prepaidvoucher_bulk_print').submit();
});
});
</script>
<% form_tag '#', :method => :post, :id => 'prepaidvoucher_bulk_print' do %>
your form details
<button class="button" type="submit" id="bulk_print">
<%= image_tag("web-app-theme/printer.png", :alt => "Print Selected Vouchers") %> Print Selected Vouchers
</button>
<button class="button" type="submit" id="bulk_destroy">
<%= image_tag("web-app-theme/cross.png", :alt => "Delete Selected Vouchers") %> Delete Selected Vouchers
</button>
<% end %>
The idea is to change the form action on the fly, based on which button is clicked
Make each row in the list a form and put the info about the item in question there. Of course, you'll need to submit and reload the page with each action. The only way around this is to use checkboxes instead of buttons and make it one big form — or to use Javascript.
As for your second question, if you want to have a submit button affect two "forms," you should make them both part of the same form. You can have multiple submit buttons on the form if you need to. Otherwise, you could dynamically generate a third form with Javascript filled with the values from the original form — but that wouldn't work in all cases (e.g., file inputs).