In Rails 3, I want to trigger a javascript that displays a pop-up after the user clicks a link to join a group which determines if a user is eligible for joining (controller action determines if they are eligible).
I need to pass the id to the controller, receive the message from the controller, and then trigger the javascript using the message.
I can't get the javascript to trigger. Can someone please help me figure out what I'm doing wrong? I think it's in the link in the view.
controller action:
def join
#group = Group.find(params[:id])
if ineligible
#message = "Sorry, you can't join."
elsif current_user
if !#group.already_joined(current_user)
#message = GroupUser.create(#group,current_user,nil,nil)
else
#message = "You're already registered for this group"
end
else
#message = "If you're already a user, but not a member of this group, please login, and then click the join link again. If you aren't a user yet, please join!"
end
end
javacript in header
<%= javascript_include_tag "jquery" %>
<script>
$(#message).msg('<% #message %>', {
type : 'confirm'
});
</script>
view
<%= link_to 'Join',{:onclick => {:controller => 'groups', :action => 'join', :id => #group.id} }%>
<div id="message"></div>
Try to wrap your #message selector in quotes:
<%= javascript_include_tag "jquery" %>
<script>
$('#message').msg('<% #message %>', {
type : 'confirm'
});
</script>
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.
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 trying to follow along with the instructions on how to implement jquery-tokeninput here:
How to use jquery-Tokeninput and Acts-as-taggable-on
I am trying to attach tags to a "post". I can use the text field in my form to create new tags. However, the javascript just will not fire at all. It's as if none of the code even exists. I don't get any error messages. The text field just acts as a normal text field with no javascript events firing. What can be the issue? Here is my relevant code:
post model
attr_accessible :tag_list
acts_as_taggable_on :tags
posts controller
def tags
query = params[:q]
if query[-1,1] == " "
query = query.gsub(" ", "")
Tag.find_or_create_by_name(query)
end
#Do the search in memory for better performance
#tags = ActsAsTaggableOn::Tag.all
#tags = #tags.select { |v| v.name =~ /#{query}/i }
respond_to do |format|
format.json{ render :json => #tags.map(&:attributes) }
end
end
routes
# It has to find the tags.json or in my case /products/tags.json
get "posts/tags" => "posts#tags", :as => :tags
application.js
$(function() {
$("#post_tags").tokenInput("/posts/tags.json", {
prePopulate: $("#post_tags").data("pre"),
preventDuplicates: true,
noResultsText: "No results, needs to be created.",
animateDropdown: false
});
});
Out of frustration I also created a posts.js.coffee file just to see if that was the problem:
$ ->
$("#post_tags").tokenInput "/posts/tags.json",
prePopulate: $("#post_tags").data("pre")
preventDuplicates: true
noResultsText: "No results, needs to be created."
animateDropdown: false
post form view
<%= f.label :tag_list %>
<%= f.text_field :tag_list, :id => "post_tags", "data-pre" => #post.tags.map(&:attributes).to_json %>
Am I missing something here? Any help would be greatly appreciated!!!
Thanks!!
I'm using the jQuery autocomplete plugin, and I want to customize this event:
select: function(event, ui) {
$('.topic_field').val(ui.item.topic.name);
return false;
Essentially, it triggers callbacks when an element from the dropdown list is selected. As of now, it only adds the selected element to the text field. I want both the field to be populated and for my application to send a POST request to the video update controller action, so that the user does not need to explicitly press the button. How can I do this?
UPDATE:
Here is the form in the show view of the video controller:
<%= form_for #video, :url => {:action => "update"}, :remote => true do |f| %>
<div class="field">
<%= f.text_field :topic_names, :class => "topic_field" %>
</div>
<%= f.submit "Add Topic" %>
<% end %>
Here is my jQuery code:
var url = $('.edit_video').attr('action');
var val = ui.item.topic.name;
$.post(url, {data:val});
This is in my routes.rb:
resources :videos
resources :video_votes
resources :users
resources :profiles
resources :genres
resources :topics
resources :topicables
resource :session
Here's my update action:
def update
#video = current_user.videos.find(params[:id])
respond_to do |format|
if #video.update_attributes(params[:video])
format.html { redirect_to(#video) }
format.js
else
format.html { render :action => "edit" }
end
end
end
Check out the jQuery.post documentation on how to post the data from your select box to the relevant controller action.
I'm not familiar with the autocomplete plugin, but I presume it follows an onChange event on your select box. When the user has made a selection, you should execute the following (untested):
var url = $('myForm').attr('action');
var val = $('mySelectBox').val();
$.post(url, {data:val})
In your controller, you could access this using:
params[:data]
which would return the value of your select box. You can then use this as normal in your controller code.
use the jquery ajax function to fetch the data from your action url ("/topics/list") or something
$.post('video/update',
data: {yourdata},
function(data) {
//callback function
}
);
in your video#update be sure to return something for your js request:
def update
blah
respond_to do |format|
format.js { return somethinghere }
end
end
I was trying out Rails again, this time the 3 version, but I got stuck while writing tests for an action that I only call remotely.
A concrete example:
Controller
class PeopleController < ApplicationController
def index
#person = Person.new
end
def create
#person = Person.new(params[:person])
#person.save
end
end
View (index.html.erb)
<div id="subscription">
<%= form_for(#person, :url => { :action => "create" }, :remote => true) do |f| %>
<%= f.text_field :email %>
<%= f.submit "Subscribe" %>
<% end %>
</div>
View (create.js.erb)
<% if #person.errors.full_messages.empty? %>
$("#subscription").prepend('<p class="notice confirmation">Thanks for your subscription =)</p>');
<% else %>
$("#subscription").prepend('<p class="notice error"><%= #person.errors.full_messages.last %></p>');
<% end %>
How can I test that remote form submission? I would just like to find out if the notice messages are being presented correctly. But if I try to do just
test "create adds a new person" do
assert_difference 'Person.count' do
post :create, :people => {:email => 'test#test.com'}
end
assert_response :success
end
It will say that the "create" action is missing a template.
How do you guys usually test remote calls?
Could you just use the 'xhr' function instead of the 'post' function? An example can be found at http://weblogs.java.net/blog/2008/01/04/testing-rails-applications, if you search for 'xhr'. But even then, I'm curious, even with a remote call, don't you need to return SOMETHING? Even just an OK header?