I am trying to build a select menu whose options simply point to URLs:
# Ruby:
form_tag "", :method => 'get' do
select_tag "", options_for_select([["Memberships", memberships_url], ["Transactions", transactions_url]])
end
# jQuery:
$('form').on('change', function() {
$(this).submit();
});
However, this isn't working. What am I missing?
All you are doing is submitting the form which does not process as a redirection you would need an additional hook for the form onsubmit event to process the redirection but based on your concept this seems unnecessary .
How does this work:
$('form select').on('change', function() {
window.location.href = $(this).val();
});
Or all in jQuery I believe you can use
$('form select').on('change', function() {
$(location).attr('href',this.val());
});
Obviously this hook will apply to all form select DOM objects so I would suggest adding an id to the select like so (notice I dropped the form tag as it is not needed for functionality)
select_tag "navigation", options_for_select([["Memberships", memberships_url], ["Transactions", transactions_url]])
$('#navigation').on('change', function() {
window.location.href = $(this).val();
});
You could also simulate a redirect instead of a link click using
window.location.replace($(this).val());
Related
I have been using the select 2 jquery plugin by including the "select2-rails" gem.
The only changes I did to make it work is to just initialise the plugin when the html page loads:
<script>
$( document ).ready(function() {
$("#e2").select2();
});
</script>
Then I assigned the e2 value to my select_tag input in the view file:
<%= select_tag :skills, options_for_select(Skill.all.collect{|e| [e.name,e.id]}, #skills), {:id => 'e2', :multiple => true } %>
When the user clicks on the input it automatically shows a drop down list with options for the user to choose from. I thought that it will be way better if the user started typing first before the drop down list would appear (as the Chrome browser).
I checked the documentation and did not find anything that would be helpful for that. I am sure there must be something I am missing. Any idea?
You can accomplish that by using the option minimumInputLength, like this:
<script>
$( document ).ready(function() {
$("#e2").select2({
minimumInputLength: 1
});
});
</script>
I am trying to hide this button in ruby once it is clicked so it doesn't show up again and the user thinks their request has not went through. I just want this clickable once then removed from page not just disabled
<% if #ride_request clicks %>
<%= link_to "Book Ride", :controller => "/request", :action => "book", :id => #ride.id %>
Consider using disable_with, which IIRC works with both link_to and submit buttons:
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
You can this javascript (jQuery) inside your controller specific .js file
$(document).ready(function() {
$('#replace_id').click(function (){
$(this).hide();
});
});
All you need to do now is add the id of the object and substitute it with replace_id.
you could try jQuery's element.hide() http://api.jquery.com/hide/#hide
or you could toggle css' display:none for that button
or you could try jQuery's element.remove() http://www.w3schools.com/jquery/html_remove.asp
Your question is actually about JS, rather than Rails.
You have to remember Rails is a server-side framework, which means it takes a request from the front-end, and then processes a response for you. This means that any UX stuff on the front-end needs to be handled with JS
To do that, you'd be best using the $("element").remove(); function of Javascript:
DEMO
$(document).on("click", "element", function(){
$(this).fadeOut(150, function() {
$(this).remove();
});
});
This will fade the button out, and then remove it from the DOM
I have an error when making a dynamic select. My ajax doesn't work when I change my select.
This is the view code:
<%= select_tag 'cost', options_for_select(Cost.all.map { |c| ["#{c.types}", c.id] }),:id => "cost_select" %>
<script type="text/javascript">
$(document).ready(function(){
$("#cost_select").live('change',function(){
$.ajax({
url: "finances/cost_type",
type: "GET",
data: {'cost=' + $('#cost_select option:selected').value() },
})
});
});
</script>
Im my finances controller, I have this:
def cost_type
#places = Place.find_by_cost_id(params[:cost])
respond_with #places
end
I make the cost_type.js.erb file, and my response is in js.
My problem is when i change the select tag dont active no one action, how is the problem whit the code in my searchs i find this code working but what is the problem?
UPDATE:
my routes.rb contains:
get "finances/cost_type" => "finances#cost_type"
I solved my original question with the following:
$(document).ready(function(){
$("#cost_select").change(function(){
$.ajax({
url: "finances/cost_type",
type: "GET",
data: {cost: $("#cost_select option:selected").val() },
})
});
});
With this, I received a valid response (which I verified via firebug):
$("#cost_select").after("<select id="from_money" name="from_money"><option value="2">Luz</option></select>
");
However, the data isn't appearing in my view. I tried putting it in a different <div> but the <select> won't appear.
I don't know what is wrong, please provide me with any possible suggestions.
change your javascript to
$(document).ready(function(){
$("#cost_select").live('change',function(){
$.ajax({
url: "/finances/cost_type",
type: "GET",
data: { cost: $('#cost_select').val() }
})
});
});
the extra / before finances makes sure that you're using absolute paths. the data part is also wrong as pointed out in one of the comments but this is a cleaner version.
I'm experiencing some strange behavior with .bind() and .unbind() in JQuery, even though my situation is seemingly identical to an example given on the JQuery site. In this case, the bind/unbind is applied to a JQuery tab (one of many). When the tab is clicked, it loads a controller action through ajax.
# show.html.erb:
$(document).ready( function(){
var projectNav = function(){
$("#tabs-project .loadingDiv").show();
$.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' })
};
$("#projectMenuButton").bind('click', projectNav);
});
# show_project.js.erb
$("#tabs-project .loadingDiv").remove();
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>')
$("#projectMenuButton").unbind('click', projectNav);
The .unbind() part isn't working like that - clicking the menu button again reloads the partial again.
When I change the existing unbind to $("#projectMenuButton").unbind('click');, it unbinds everything including the tab's principal function (to switch the view to the right div).
You have a scope problem... projectNav is only defined within the scope of the $(document).ready, so it is undefined when passed into unbind. A solution:
# show.html.erb:
var projectNav = function(){
$("#tabs-project .loadingDiv").show();
$.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' })
};
$(document).ready( function(){
$("#projectMenuButton").bind('click', projectNav);
});
# show_project.js.erb
$("#tabs-project .loadingDiv").remove();
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>')
$("#projectMenuButton").unbind('click', projectNav);
How do I create a link of this type:
<a href="#" onclick="document.getElementById('search').value=this.value">
using method link_to in Rails?
I couldn't figure it out from Rails docs.
You can use link_to_function (removed in Rails 4.1):
link_to_function 'My link with obtrusive JavaScript', 'alert("Oh no!")'
Or, if you absolutely need to use link_to:
link_to 'Another link with obtrusive JavaScript', '#',
:onclick => 'alert("Please no!")'
However, putting JavaScript right into your generated HTML is obtrusive, and is bad practice.
Instead, your Rails code should simply be something like this:
link_to 'Link with unobtrusive JavaScript',
'/actual/url/in/case/javascript/is/broken',
:id => 'my-link'
And assuming you're using the Prototype JS framework, JS like this in your application.js:
$('my-link').observe('click', function (event) {
alert('Hooray!');
event.stop(); // Prevent link from following through to its given href
});
Or if you're using jQuery:
$('#my-link').click(function (event) {
alert('Hooray!');
event.preventDefault(); // Prevent link from following its href
});
By using this third technique, you guarantee that the link will follow through to some other page—not just fail silently—if JavaScript is unavailable for the user. Remember, JS could be unavailable because the user has a poor internet connection (e.g., mobile device, public wifi), the user or user's sysadmin disabled it, or an unexpected JS error occurred (i.e., developer error).
To follow up on Ron's answer if using JQuery and putting it in application.js or the head section you need to wrap it in a ready() section...
$(document).ready(function() {
$('#my-link').click(function(event){
alert('Hooray!');
event.preventDefault(); // Prevent link from following its href
});
});
just use
=link_to "link", "javascript:function()"
another solution is catching onClick event and for aggregate data to js function you can
.hmtl.erb
<%= link_to "Action", 'javascript:;', class: 'my-class', data: { 'array' => %w(foo bar) } %>
.js
// handle my-class click
$('a.my-class').on('click', function () {
var link = $(this);
var array = link.data('array');
});