CODEWITHSUNDEEP
jqueryruby-on-railsajaxsorting
Brandon Booth
Brandon Booth

Reputation: 39

How do you sort posts in rails and have them reload in AJAX?

Here is a good starting point but I'm not sure how to call these methods from the view nor do I know how to update things from the view. The idea is that a nav will sort between Ascending By Date, Descending by date, Upvotes and Down votes. I'm using the act as votable gem My best guess for my model is

#Message.rb
scope :recent, -> { order(created_at: :desc) }
scope :upvoted,    -> { order(:cached_votes_up => :desc) }
scope :oldest, -> { order(created_at: :asc) }

def self.sort_by(sort_param)
  case sort_param
  when 'recent'
    recent
  when 'upvoted'
    upvoted
  when 'oldest'
    oldest
  else
    all
  end
end

I don't know how to call this method(presumably from the index) and i also don't know how to use AJAX to update the view.

Upvotes: 1

Views: 836

Answers (2)

Brandon Booth
Brandon Booth

Reputation: 39

Simplest answer for me was Adding the scope's to my model

#Message.rb
scope :recent, -> { order("created_at DESC") }
scope :oldest, -> { order(created_at: :asc) }
scope :upvoted, -> { order(:cached_votes_up => :desc) }
scope :downvoted, -> { order(:cached_votes_down => :desc) }

Defining the methods in the controller with a render action to the index.

#messages_controller.rb
def recent
 @messages = Message.recent
 render action: :index
end

def oldest
 @messages = Message.oldest
 render action: :index
end

def upvoted
 @messages = Message.upvoted
 render action: :index
end

def downvoted
 @messages = Message.downvoted
 render action: :index
end

And creating the corresponding routes via a collection.

collection do
  get :recent
  get :oldest
  get :upvoted
  get :downvoted
end

And my nav on my view.

<ul class="nav nav-tabs card-header-tabs">
  <li class="nav-item">
    <%= link_to "Recent", recent_messages_path, class: "nav-link active" %>
  </li>
  <li class="nav-item">
    <%= link_to "Oldest", oldest_messages_path, class: "nav-link active" %>
  </li>
  <li class="nav-item">
    <%= link_to "Upvoted", upvoted_messages_path, class: "nav-link active" %>
  </li>
  <li class="nav-item">
    <%= link_to "Downvoted", downvoted_messages_path, class: "nav-link active" %>
  </li>
</ul>

My app is here https://boiling-beach-61535.herokuapp.com/

Upvotes: 1

fabOnReact
fabOnReact

Reputation: 5942

you should read the guide

http://guides.rubyonrails.org/working_with_javascript_in_rails.html and get a better understanding of AJAX

How are you going to trigger the method? The user will somehow click a button or a link?

This is an example of how to bind the submit button of a form to an ajax action

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns

Basically the form button submit will execute the users_controller#create which will execute the following code inside create.js.erb

$("<%= escape_javascript(render @user) %>").appendTo("#users");

as you see from this example the advantage, is that as this is a js.erb file you can use the variable @user and just append it to the #user div

you can search for rails ajax for more informations and you can watch youtube vidoes about AJAX to get a better understanding

The idea is that AJAX stands for asynchronous javascript and xml request, right now we use json and not xml. The Client side will send a request and the server will send a response. The information are send through json and the client side use as scripting language json

In your case, I suggest. Identify the link or button that triggers the request, then set up the rails ajax by following the guide, configure you controller#action to respond with js and create the js.erb file so that you can reorder the information on the page. You can create an instance of the variable with the list of items reordered in your controller#action and then append that list of items in your html with javascript

Upvotes: 0

Related Questions