I am trying to get follow buttons to change without refreshing the page on click. The following code works but only for the first post in the loop I am rendering in the view. The rest don't change/work.
In my view
<% #tweets.reverse.each do |tweet| %>
...
<% if current_user.id != tweet.user.id %>
<% if current_user.following?(tweet.user) %>
<%= link_to "Unfollow", relationships_path(user_id: tweet.user), data: { remote: true, type: :json, method: :delete }, :class => "follow-btn btn btn-primary" %>
<% else %>
<%= link_to "Follow", relationships_path(user_id: tweet.user), data: { remote: true, type: :json, method: :post }, :class => "follow-btn btn btn-primary" %>
<% end %>
<br>
<% end %>
<hr/>
<% end %>
<% end %>
application.js
$(document).on('ajax:success', '.follow-btn', function(event){
let $el = $(this);
let method = this.dataset.method;
if (method === 'post') {
$el.text('Unfollow');
this.dataset.method = 'delete';
} else if (method === 'delete') {
$el.text('Follow');
this.dataset.method = 'post';
}
});
How can I make it to update all the follow buttons that point to the same user in the loop?
Here is the newer code
application.js
$(document).on('ajax:success', '.follow-btn', function(event){
let $el = $(this);
let method = this.dataset.method;
if (method === 'post') {
$('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Unfollow'); });
this.dataset.method = 'delete';
} else if (method === 'delete') {
$('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Follow'); });
this.dataset.method = 'post';
}
});
Controller
def create
current_user.follow(#user)
respond_to do |format|
format.html
format.json { head :created }
end
end
def destroy
current_user.unfollow(#user)
respond_to do |format|
format.html
format.json { head :no_content }
end
end
Here the buttons still work but now don't change in the view. How can I get this to work?
Count
On the same view but rendered through a partial (users/_search_users.html.erb) I count like so. How can I make it so this count also updates without page refresh on button click?
<% #users.each do |user| %>
...
<td stlye="padding:0 60px 0 60px;" col width="130" align="right"><b><%= user.followers.count %> Followers</b></td>
<% end %>
I'd like to get both the button and count to update on click without refresh. I can add more code if needed.
ty
$(document).on('ajax:success', '.follow-btn', function(e) {
// the JSON fetched
let data = e.details[0];
// the method we are changing to
let method = this.dataset.method === 'post' ? 'delete' : 'post';
// lookup table for the text
let txt = {
post: 'Follow',
delete: 'Unfollow'
}[method];
// loop through elements with the same href
$(`.follow-btn[href="${this.getAttribute('href')}"]`).each(function() {
// change the attributes of the single node in the loop
this.dataset.method = method;
$(this).text(`${txt} (${data.count})`);
});
});
// This mocks the ajax call purely for the sake of this stacksnippets example.
// Do not include this in your actual implementation
$(document).on('click', 'a[data-remote]', function(e) {
window.setTimeout(function() {
let event = jQuery.Event('ajax:success');
event.details = [{ count: 5 }, 'No Content'];
$(e.target).trigger(event);
}, 25);
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>User 1</p>
Follow
Follow
</div>
<div>
<p>User 2</p>
Follow
Follow
</div>
You can provide counts in the JSON responses by using render json::
def create
current_user.follow(#user)
respond_to do |format|
format.html
format.json do
render json: { count: #user.followers.count },
status: :created
end
end
end
def destroy
current_user.unfollow(#user)
respond_to do |format|
format.html
format.json do
render json: { count: #user.followers.count },
status: :ok
end
end
end
I'm just guessing the association so adjust according to your models.
Related
I'm trying to add a comment to a link (this is a mock Reddit application built with Rails and JavaScript/JQuery) through an AJAX request to avoid an entire page load (I can't use remote: true in this application).
I'm able to add comments and append them the list of comments through Rails, but when I try to use the AJAX method, I get a 400 Bad Request Error.
Here's my script:
`
function submitViaAjax() {
$("#new_comment_button").on("click", function (e) {
url = this.action
//var commentText = document.getElementById("comment_body").innerHTML
//var myJSON = JSON.stringify(commentText);
data = {
'authenticity_token': $("input[name='authenticity_token']").val(),
'comment': {
'content': $("#comment_body").val()
}
};
console.log(data);
$.ajax({
type: "POST",
url: url,
data: data,
headers: { 'Content-Type': 'application/json' },
success: function (response) {
var $ul = $("div.comments_section ul");
$ul.append(response)
}
})
e.preventDefault();
})
};
And here's my Links show page that has the form:
<div class="comments_section">
<%= render 'comments/comments' %>
</div>
<!--<div id="comments">
</div> -->
<%= simple_form_for [#link, Comment.new] do |f| %>
<div class="field">
<%= f.text_area :body, class: "form-control" %>
</div>
<br>
<%= f.submit "Add Comment", class: "btn btn-primary", id: "new_comment_button", data: { disable_with: false } %>
<% end %>
Any insight would be greatly appreciated.
UPDATE: My controller code, per request:
class CommentsController < ApplicationController
before_action :set_comment, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!
def index
if params[:link_id]
#link = Link.find(params[:link_id])
#comments = #link.comments
else
#comments = Comment.all
end
respond_to do |format|
format.html { render :index }
format.json { render json: #comments }
end
end
def create
#link = Link.find(params[:link_id])
#comment = #link.comments.new(comment_params)
#comment.user = current_user
respond_to do |format|
if #comment.save
format.html { redirect_to #link, notice: 'Comment was successfully created.' }
format.json { render json: #comment, status: :created, location: #comment }
render 'comments/show', :layout => false
else
format.html { render action: "new" }
format.json { render json: #comment.errors, status: :unprocessable_entity }
end
end
end
# DELETE /comments/1
# DELETE /comments/1.json
def destroy
#comment.destroy
respond_to do |format|
format.html { redirect_back fallback_location: root_path, notice: 'Comment was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_comment
#comment = Comment.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def comment_params
params.require(:comment).permit(:link_id, :body, :user_id)
end
end
Echoing what #Taplar said, there does not look to be an action attribute for the #new_comment_button element; is this actually encoded somewhere? As well, that action attribute has to be the exact value of your AJAX 'service' - is this correctly set up?
I am trying to render a partial from a controller in rails 5 using ajax(on success) but the blank data is passed to ajax after the action renders a partial.
The Same code was working with rails4. I have also updated the responder gem too for rails5.
Controller:
respond_with do |format|
format.html do
if request.xhr?
#images = get_images
session[:prev_images] = submitted_ids
session[:prev_winner] = winner_id
#prev_images = Lentil::Image.find(submitted_ids).sort_by{ |i| i.id }
#prev_winner = session[:prev_winner]
render :partial => "/lentil/thisorthat/battle_form", :locals => { :images => #images, :prev_images => #prev_images, :prev_winner => #prev_winner }, :layout => false, :status => :created
end
end
Ajax:
$(document).on('ajax:success', function (evt, data, status, xhr) {
// Insert new images into hidden div
$('.battle-inner:eq(1)').replaceWith(data);
$('.battle-inner:eq(1)').imagesLoaded()
.done(function () {
// Remove old images
$('.battle-wrapper:eq(0)').remove();
// Div with new images moves up in DOM, display
$('.battle-wrapper:eq(0)').show();
// Hide Spinner
$('#spinner-overlay').hide();
});
_battle_form:
<div class="grid battle-inner">
<%= semantic_form_for :battle, :remote => true, :url => thisorthat_result_path do |form| %>
<% #images.each do |image| %>
<div class="battle-image-wrap grid__cell">
</div>
<% end %>
<% end %>
</div>
Is your request processing as JS?
Try replacing format.html to format.js
It was an issue with jquery-ujs which is no more a dependency for rails>5.1. rails-ujs dependency needs to be used instead.
https://blog.bigbinary.com/2017/06/20/rails-5-1-has-dropped-dependency-on-jquery-from-the-default-stack.html
//To read data from response
.on('ajax:error', function(event) {
var detail = event.detail;
var data = detail[0], status = detail[1], xhr = detail[2];
// ...
});
I am following section 4 (Server Side Concerns) to set up ajax on a page. I've copied the tutorial text completely (replacing the model names with my own) and it creates and saves my "Participants" record and refreshes the partial....but it posts this weird code below the just submitted form:
$("
\n\n Helper:sampleemail#sample.com \n<\/li>\n\n").appendTo("#participants");
This seems to be some sort of weird mash-up of my partial information and my creat.js. It's not really an error...just extra code.
Here's my code
class ParticipantsController < ApplicationController
def new
#participant = Participant.new
#participants = #participants.recently_updated
end
def create
#participant = Participant.new(participant_params)
respond_to do |format|
if #participant.save
format.html { redirect_to #participant, notice: 'Helper Invited!' }
format.js {}
format.json { render json: #participant, status: :created, location: #participant }
else
format.html { render action: "new" }
format.json { render json: #participant.errors, status: :unprocessable_entity }
end
end
end
_form.html.erb
<ul id="participants">
<%= render #participants %>
</ul>
<%= form_for(#participant, remote: true) do |f| %>
<%= f.label :email %><br>
<%= f.email_field :email %>
<%= f.submit 'SUBMIT' %>
<script>
$(document).ready(function() {
return $("#new_participant").on("ajax:success", function(e, data, status, xhr) {
return $("#new_participant").append(xhr.responseText);
}).on("ajax:error", function(e, xhr, status, error) {
return $("#new_participant").append("<p>Oops. Please Try again.</p>");
});
});
</script>
<script>
$(function() {
return $("a[data-remote]").on("ajax:success", function(e, data, status, xhr) {
return alert("The helper has been removed and notified.");
});
});
</script>
_participant.html.erb
<li >
<%= participant.email %> <%= link_to participant, remote: true, method: :delete, data: { confirm: 'Are you sure?' } do %>REMOVE<% end %>
</li>
create.js.erb
$("<%= escape_javascript(render #participant) %>").appendTo("#participants");
destroy.js.erb
$('#participants').html("<%= j (render #participants) %>");
It seems like you are both responding with a js.erb file and listening for the ajax:success event. You should only need to do one. Right now the ajax:success listener is appending the response to the form and the response is javascript code. Remove that listener and you should get the desired results.
i need two buttons in my view but only one should use remote, so i decided to use a link and a submit button in the following way:
view
<%= form_for(#new_word , :url => {:action => "create"}) do |f| %>
... skipped code ...
<%= link_to("build word", '#', :class => "build", "data-button" => "build") %>
... skipped code ...
<div id="build_name"></div>
<%= submit_tag l(:btn_save), :name => 'btn_save' %>
<% end %>
<script type="text/javascript">
jQuery(".build").click(function(){
var form_value = jQuery('#new_nc_project').serialize();
var button = $(this).data("button");
var content = $('#nc_project_keyword_tokens').val();
if(button == "build"){
$.ajax({
type:'POST',
url: '<%= url_for :action => 'build' %>',
data: $.param({keyword_tokens: content})
});
}
});
</script>
controller
def build
#response = {resp: "text"} //just example text for testing
respond_to do |format|
format.json { render json: #response }
format.js { render js: #response }
end
end
build.js.erb
$('#build_name').append('<p><%= #response[:resp] %></p>');
If I look at my server console, I see no listing from "build.js.erb" file.
What am I doing wrong, is there a other way to make the "#respond" visible in at view?
Thanks, dot
To render build.js.erb you should do this
respond_to do |format|
format.json { render json: #response }
format.js # this will render build.js.erb by default.
end
I have a rails app, in which my Posts model has Comments and the comments are votable. I'm using acts_as_votable.
I currently have the voting on the comments working. Now I'm trying to implement some javascript so that the page does not have to refresh every time someone votes on a comment, so that the vote goes through.
Here is what I had before(which was working):
In my comments controller:
def upvote_post_comment
#post = Post.find(params[:post_id])
#comment = #post.comments.find(params[:id])
#comment.liked_by current_user
respond_to do |format|
format.html {redirect_to :back}
end
end
And in my view:
<% if user_signed_in? && current_user != comment.user && !(current_user.voted_for? comment) %>
<%= link_to image_tag(‘vote.png'), like_post_comment_path(#post, comment), method: :put %> <a>
<%= "#{comment.votes.size}"%></a>
<% elsif user_signed_in? && (current_user = comment.user) %>
<%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>
<% else %>
<%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>
<% end %>
And this is what I now have:
In my comments controller:
def upvote_post_comment
#post = Post.find(params[:post_id])
#comment = #post.comments.find(params[:id])
#comment.liked_by current_user
respond_to do |format|
format.html {redirect_to :back }
format.json { render json: { count: #comment.liked_count } }
end
end
And in my view:
<% if user_signed_in? && current_user != comment.user && !(current_user.voted_for? comment) %>
<%= link_to image_tag(‘vote.png'), like_post_comment_path(#post, comment), method: :put, class: 'vote', remote: true %>
<a><%= "#{comment.votes.size}"%></a>
<script>
$('.vote')
.on('ajax:send', function () { $(this).addClass('loading'); })
.on('ajax:complete', function () { $(this).removeClass('loading'); })
.on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
.on('ajax:success', function (data) { $(this).html(data.count); });
</script>
<% elsif user_signed_in? && (current_user = comment.user) %>
<%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>
<% else %>
<%= image_tag(‘voted.png')%><a><%= "#{comment.votes.size}"%></a>
<% end %>
This shows me the error message: "There was an issue"
And when I refresh the page, I see that the vote went through and I see this in my terminal:
Started PUT “/1/comments/1/like" for 127.0.0.1 at 2014-04-06 18:54:38 -0400
Processing by CommentsController#upvote_post_comment as JS
Parameters: {"post_id"=>”1”, "id"=>”1”}
How do I get the voting to work via Javascript? So that the vote goes through, the vote count updates and the vote icon updates to voted.png instead of vote.png?
Your log says the request is formatted as JS.
Processing by CommentsController#upvote_post_comment as JS
Add data: { type: :json } to the link_to method to request a JSON format like so,
<%= link_to image_tag('vote.png'), like_post_comment_path(#post, comment), method: :put, class: 'vote', remote: true, data: { type: :json } %>
This will tell the controller you want a JSON response not a Javascript response.
Edit - updates from the comments.
Update controller to use,
format.json { render json: { count: #comment.likes.size } }
Update JS to use,
.on('ajax:success', function(e, data, status, xhr) { $(this).html(data.count); });