Right now I am using:
<%=button_to_function "✓", checkButton(), :class => "buttonGrey"%>
But the javascript function needs something to be passed to it so it can toggle the class( I want the buttons class to be changed upon pressing it) What would I pass as a param to represent the button?
Since "button_to_function" is deprecated since Rails 4.0.2, now you can use "button_tag" helper.
Exemple:
<%= button_tag "Do It", type: 'button', onclick: "myFunction()", class: 'btn btn-default' %>
Note: If you use CoffeeScript, declare your function as:
window.myFunction =>
...
because in CofeeScript, functions are not global scoped by default.
You can execute javascript directly in the button_to_function.
In your case:
<%= button_to_function "✓", '$(this).toggleClass("buttonGrey buttonGreen");', :class => "buttonGrey" %>
Hope this helps!
Inside checkButton(), you should be able to access this and manipulate it using jQuery or whatever your framework is.
For example, using jquery:
$(this).toggleClass("buttonGrey buttonGreen");
Just use straight up jquery.
$(".buttonGrey").on("click", function() {
// do something
});
Use the on click event inside the button tag
Related
I want to use
link_to 'Cancel', edit_project_path(#project, url_options)
to cancel the edit and go back to the edit page.
I use jQuery UI Tabs for a tabbed edit page. Each tab has it's own form and submit/cancel buttons.
When I click a Cancel link I want to go back to the active tab. So I set
url_options = {:anchor => active_tab_id}
The problem is: the page doesn't reload because of the anchor.
Adding data-no-turbolink does not help:
link_to 'Cancel', edit_project_path(#project, url_options), :data => {:no_turbolink => true}
try using
<%=link_to("Cancel", edit_project_path(#project, url_options), method: :get)%>
this helped me better
The only way to do it is with javascript.
Add custom data attribute to the link:
link_to 'Cancel', edit_project_path(#project, url_options), :data => { :reload => true }
Then put this javascript somewhere, for example in app/javascripts/reload_hash.js
$(function(){
$('a[data-reload="true"').on('click', function(e) {
window.location = $(e.target).attr('href');
window.location.reload(true);
});
});
Say we have a select box:
/app/views/tape/_form.html.erb
<%= f.select :tape, Tape::LIST_TAPES %>
and a .js.coffee file that i would like to trigger when some value is selected in selectbox:
/app/assets/javascripts/tapes.js.coffee
function selectBoxValue(value){
# value -- selected in selectbox;
console.log("box_value = ", value);
}
How can it be done in RoR 3.2?
Here's what i mean within html+js.
P.S.
I'm new to Rails. Sorry for my English and thank you.
Something like that:
<%= f.select :tape, Tape::LIST_TAPES, :id => 'some_id' %>
js file:
$(function(){
$('#some_id').change(function(){
selectBoxValue(this.value);
});
});
Pay attention that your select tag already has id so you can use it and remove :id => 'some_id'
I want to open a pop-up window on click of 'link', then show some data there and close it.
I am using 'link_to' to create 'link'.
The part of code looks as:
<%= link_to 'Display Links', :controller=>'aaa', :action=> 'xyz_links', ....... %>
Previously, in rails2.3.x you could just do:
link_to "foo", foo_path(foo), :popup => true
But now in Rails3, this option has been deprecated
Another option is to use the Rails 3 unobtrusive way of event
delegating those links:
First add an attribute "data-popup" to your link_to if you want it to open
in a new window
Then if you are using the jquery adapter, add to application.js inside the document
ready handler:
$('a[data-popup]').live('click', function(e) {
window.open($(this).attr('href'));
e.preventDefault();
});
Or with the prototype adapter, use this code inside the document ready
handler:
document.on("click", "a[data-popup]", function(event, element) {
if (event.stopped) return;
window.open($(element).href);
event.stop();
});
You can find the same discussion here:
http://groups.google.com/group/rubyonrails-talk/browse_thread/thread/e1f02d9e0977071b/814d69e4d56cea65?show_docid=814d69e4d56cea65&utm_medium=twitter&pli=1
I haven't tried this but have this in ruby docs:
<%= link_to name, url, :popup => ['dialog name','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'] %>
pls check at
http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#29-Window-open-a-dialog-of-no-menu-no-status-have-scroll
I have got this line of code in form:
f.select(:SUB_ASSAY_TYPE, #types, {:prompt => 'Select the Type'}, {:onChange => "alert(this.value)}) %>
What i want to do is to assign the 'this.value' to a ruby variable on onchange event like shown below:
{:onChange => "alert(this.value); #rubyvar = (this.value)" }
I know that's not how it should be done but i have no idea how to do this in ajax or using remote function.
Many thanks for your help
There is no way to set a ruby variable from the client, since its evaluated on your server.
What you need is an Ajax call which renders some new javascript to the client.
How do I add an onchange event here?
Framework: rails
Database: MySQL
I am populating the options from the database and that made me use options_from_collection_for_select
select_tag(:variable,options_from_collection_for_select(:all, :id, :name))
select_tag takes an options hash as its final parameter, in which you can add any HTML attributes for the select. So to add an onchange attribute:
select_tag :variable, options_from_collection_for_select(:all, :id, :name), onchange: 'yourOnChangeHandler()'
try something like:
:onchange => remote_function(:url => {:controller => 'controller', :action => 'action'})
For a select_tag, just add:
{:onchange => "myHandler();" }
Also, if onchange doesn't work you might want to try onChange with a capital C.
Finally, make sure NOT TO CONFUSE a select_tag with a form select.
See my answer to a similar question, only regarding a form select and not a select_tag
Adding An Onchange Event To A Form Select
You may want to add an onchange attribute inline:
select_tag(:variable,options_from_collection_for_select(:all, :id, :name)), {:onchange => "(function(e){ e.target.value }).apply(this,arguments)"}
For my case, I'm not sure where to put the named functions, or sometimes I find it tedious to create a function just to create a simple tag. So people tend to write an inline function.
but a simple line like {onchange: "e.target.value"} won't work, because there are no variables (e.g. event) defined.
Solution would be a self executing function that accepts arguments