On Rails 4, I am trying to submit a form whenever I focus out the input field, without having to click on submit. When I place the script on the html page, it works fine:
<td>
<%= form_for commitment, html: {class:"index_edit_comments"}, remote: :true do |f| %>
<%= f.text_field :comments, class:"index_edit_comments_input" %>
<% end %>
<script>
$(document).ready(function() {
$(".index_edit_comments").each(function() {
$(this).find(".index_edit_comments_input").blur(function() {
$(this).submit();
});
});
});
</script>
</td>
But when I move the same code to a separated .js file, it is not functioning properly. It works right after loading the page, but when I use another function that refreshes the page, it stops working.
On the .js.coffee file it looks like this:
$(document).ready ->
$(".index_edit_comments").each ->
$(this).find(".index_edit_comments_input").blur ->
$(this).submit()
return
return
return
The other function that refreshes the page is this:
At index.html.erb:
<% if commitment.check == true %>
<td><%= link_to 'Yes', toggle_check_commitment_path(commitment), type: "button" %></td>
<% else %>
<td><%= link_to 'No', toggle_check_commitment_path(commitment), type: "button" %></td>
<% end %>
At controller:
def toggle_check
#c = Commitment.find(params[:id])
#c.toggle!(:check)
redirect_to commitments_path
end
Thanks for your help. I've did a lot of research and was not able to figure this out by myself.
After page refresh DOM has change, so your cod will not work.
Try:
$('html').find('.index_edit_comments').each(function() {
$(this).find(".index_edit_comments_input").blur(function() {
$(this).submit();
});
});
If refresh change all DOM html, my code example will not help.
Related
I'll try explain this strange situation as best as possible. Images / Examples are attached
I have a page dedicated to show all the users a particular user is following.
users_controller.rb
def following
#pals = current_user.following
end
following.html.erb
<% #pals.each do |pal| %>
<div class="following-user-btn">
<% if current_user_is_following(current_user.id, pal.wall.id) %>
<%= link_to 'Following' , unfollow_wall_path(pal.wall.id), remote: true, method: :post, class: 'unfollow-button' %>
<% else %>
<%= link_to 'Follow' , follow_wall_path(pal.wall.id), remote: true, method: :post, class: 'btn follow-button' %>
<% end %>
</div>
<% end %>
When I load the page, everything shows up fine, the Following button is next to each user accordingly and unfollowing a user works fine. However after clicking the unfollow button once it will change the href for the other users to the first user you unfollowed. You will not be able to Follow again if the following button is currently being used by another user.
Here is my relationships controller and my javascript
def follow_wall
if current_user.follow #wall.id
respond_to do |format|
format.html { redirect_to root_url }
format.js { render 'walls/follow_wall' }
end
end
end
def unfollow_wall
if current_user.unfollow #wall.id
respond_to do |format|
format.html { redirect_to root_url }
format.js { render 'walls/unfollow_wall' }
end
end
end
Unfollow_wall.js.erb
$('.unfollow-button').bind('ajax:success', function(){
$(this).closest('.unfollow-button').hide();
$(this).closest('.following-user-btn').html('<%= link_to 'Follow' , follow_wall_path(#wall.id), remote: true, method: :post, class: 'btn follow-button' %>');
});
Follow_wall.js.erb
$('.follow-button').bind('ajax:success', function(){
$(this).closest('.follow-button').hide();
$(this).closest('.following-user-btn').html('<%= link_to 'Following' , unfollow_wall_path(#wall.id), remote: true, method: :post, class: 'unfollow-button' %>');
});
I even tried changing it to this:
$('#follow-button').attr('class', 'btn unfollow-button')
.text('Following')
.attr('href', "/<%= #wall.id %>/unfollow_wall")
.attr('id', 'unfollow-button');
$('#unfollow-button').text('Follow')
.attr('class', 'btn follow-button')
.attr('href', "/<%= #wall.id %>/follow_wall")
.attr('id', 'follow-button');
No luck for either
Notice the href is correct for all users upon a fresh reload.
When I unfollow the user in the middle, everything is still fine.
Now when I Unfollow the top user the top user href changes to the middle user? This is where I'm really getting confused?
This has been doing my head in for the past few days... ANY help is REALLY appreciated. Thank you!
I don't think you should be binding an ajax:success event at that point in the code.
Binding an event with a function to an element means that, from that time on, the element will watch for the event and react to it by running the function whenever the event happens. This means that the binding should be done before the expected time of the first event.
However Rails will run the JS in unfollow_wall.js.erb as a response to the button being clicked - that's not a time for binding the function with an event, that's a time for running the function.
The way I would do this is to not do binding, but to use the wall id in the element identifiers on the page like this:
Here see the id of the outer div of each button
<%# following.html.erb %>
<% #pals.each do |pal| %>
<div id="following-user-btn-<%= pal.wall.id %>">
<% if current_user_is_following(current_user.id, pal.wall.id) %>
<%= link_to 'Following' , unfollow_wall_path(pal.wall.id), remote: true, method: :post, class: 'unfollow-button' %>
<% else %>
<%= link_to 'Follow' , follow_wall_path(pal.wall.id), remote: true, method: :post, class: 'btn follow-button' %>
<% end %>
</div>
<% end %>
and in the js just find the button with the right id in the outer div
# unfollow_wall.js.erb
$('#following-user-btn-<%= #wall.id %>').find('.unfollow-button').hide();
$('#following-user-btn-<%= #wall.id %>').html('<%= link_to 'Follow' , follow_wall_path(#wall.id), remote: true, method: :post, class: 'btn follow-button' %>');
the js code in the unfollow_wall.js.erb file is just as it is here in entirety, not enclosed in a bind function.
The same would apply to the other js file of course.
for some reason when I embed a javascript in the html document this code works here's the process_orders.html.erb code
<script>
function myFunction(val) {
if (val.length == 2) {
document.getElementById('search_button').focus();
alert("Hello! I am an alert box!!");}
}
</script>
<%= form_tag(process_orders_mailers_path, :method => "get") do %>
<%= text_field_tag :id, nil, autofocus: true, onkeyup:"myFunction(this.value)" %>
<%= submit_tag "Search", :name => nil, :id => 'search_button' %>
<% end %>
however when I put this code in an external js file it does work. Here is the code in the file mailers.js. That is the ONLY code that is in the mailers.js file.
The mailers.js is the same name of the controller that the form above belongs to:
function myFunction(val) {
if (val.length == 2) {
document.getElementById('search_button').focus();
alert("Hello! I am an alert box!!");}
}
essentially what I am trying to do is after 2 characters get entered in the text field the alert is displayed. Again, it works fine when all the code is in the html file.... thanks for the help
I've been able to implement a search function using AJAX in Rails but when a user types in a search query and doesn't find anything the result currently displays nothing. Instead of this, I want to display a message such as: 'Sorry nothing was found!', but I can't seem to get this to work.
This is my code from the index.js.erb file:
$('#products').append('<%= escape_javascript render(#products) %>');
$('.pagination').replaceWith('<%= escape_javascript paginate(#products) %>');
This is the code in my index.html.erb file:
<%= form_tag products_path, method: :get, authentication: false, id: 'search-form' do %>
<%= text_field_tag :search, params[:search] %>
<%= submit_tag "Search" %>
<% end %>
<div class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" id="products">
<% #products.each do |product| %>
<%= render product %>
<% end %>
</div>
And finally this is the bit of relevant code in my products_controller.rb file:
respond_to :html, :js, :json
def index
#products = if params[:search].present?
Product.where("name LIKE ?", "%#{params[:search]}%")
else
Product.all
end
#products = Product.order(created_at: :desc).page(params[:page]).per(13)
respond_with #products
end
def search
#products = Product.where("name LIKE ?", "%#{params[:search]}%")
render #products
end
Sorry I should've included this in the question as well. Now I am able to get this message of "Sorry nothing was found!" message to display when a search query comes up with nothing, BUT the problem is that I have to press enter twice in order for it to display the message. What can I do to change my code here so when nothing is found the first time it displays: "Sorry nothing was found!"?
This is the code in my assets/javascripts/products.js file:
$(document).ready(function(){
$('#search-form').submit(function(event){
event.preventDefault();
var searchValue = $('#search').val();
$.get('/products/search?search='+searchValue)
.done(function(data){
console.log(data);
if ($("#products").children().length != 0){
$('#products').html(data);
}else{
$('#products').html("<h3>Sorry nothing was found!</h3>");
}
});
});
});
I believe that's all the necessary information needed to understand this question. If you need more clarification in order to understand what I'm doing, I'll be glad to provide it.
Thank you all for your input!
I'm following the railscasts rails ajax tutorial and geting into some trouble. Everything went well, except the live keyup. The live search does not work, I have to click the search button to get the result.
Here is my application.js
$("#emos_search input").keyup(function() {
$.get($("#emos_search").attr("action"), $("#emos_search").serialize(), null, "script");
return false;
});
index.html.erb
<%= form_tag emoticons_path, :method => 'get', :id => "emos_search" do %>
<p>
<%= text_field_tag :search, params[:search] %>
<%= submit_tag "Search", :name => nil %>
</p>
<div id="emos"><%= render 'emos' %></div>
<% end %>
emoticons_controller.rb
def index
#emoticons = Emoticon.search params[:search]
end
emoticon.rb
def self.search(search)
if search
where('name LIKE ? or emo LIKE ?', "%#{search}%", "%#{search}%")
else
scoped
end
end
I don't know what is the problem. I think I already followed the steps in tutorial. And there is nothing showed in js console.
bit new to Ajax and rails.
I have a link on an image that when clicked should replace the image.
Here's my link in the view:
<div id="flag_<%= message.id %>">
<%= link_to image_tag("white_star.png"), flag_message_path(message), remote: true %>
</div>
this calls flag method on messages controller. For format.js i have flag.js:
{$('#flag_<%=#message.id%>').html('<% if #message.flag == false %><img alt="White_star" src="/assets/white_star.png" title="flag">
<% else %>
<img alt="Red_star" src="/assets/red_star.png" title="flag">
<% end %>');
}
this returns to the browser:
{
$('#flag_94').html('<img alt="White_star" src="/assets/white_star.png" title="flag">
');
}
which seems ok to me, yet nothing happens.... Any thoughts??
thanks
Everything seems ok, but I would drop the surrounding accolades in your format.js.erb. Those are not needed.
If there is an error in your javascript, you should see it in the javascript console.
It is generally good practice to extract code like this into a partial.
So you would have a replace_image.html.erb :
<% if #message.flag == false %>
<img alt="White_star" src="/assets/white_star.png" title="flag">
<% else %>
<img alt="Red_star" src="/assets/red_star.png" title="flag">
<% end %>
and in your format.js.erb you would just do
$('#flag_<%=#message.id%>').html("<%= escape_javascript(render :partial => 'replace_image') %>");
Hope this helps.