CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-3jquery
Kellogs
Kellogs

Reputation: 471

Rails: Rendering Partials through Ajax with Buttons

I currently have a page that displays a list of micropost and the page also inlcludes several tabs such as Most Recent Most Discussed Most Viewed. I was wondering what the best way to render the different types of list orders of the micropost without refreshing the whole page and through ajax. I am unsure how to go about doing this but I am willing to learn if someone lends me help. Thank you :). I have this much so far.

Page HTML

<div id='ContentHeader'>
<%= render 'microposts/new' %>
<div class='StreamTabContainer'>
<ul class='StreamTabs'>
<li class='StreamTab StreamTabRecent active'>
<%= link_to 'Most Recent', some_path, :remote => true, :class => 'TabText' %>
</li>
<li class='StreamTab StreamTabDiscussed'>
<%= link_to 'Most Discussed', some_path, :remote => true, :class => 'TabText' %>
</li>
<li class='StreamTab StreamTabViews '>
<%= link_to 'Most Views', some_path, :remote => true, :class => 'TabText' %>
</li>
<li class='StreamTab StreamTabRated'>
<%= link_to 'Highest Rated', some_path, :remote => true, :class => 'TabText' %>
</li>
</ul>
</div>
</div>


<div id='ContentBody'>
<div id='ajax'></div>
<%= render 'users/microposts', :microposts => @microposts %>
</div>

Upvotes: 4

Views: 1156

Answers (1)

coderates
coderates

Reputation: 270

Looks like you are on the right path. Your view appears to be correct at a quick glance.

There are just a few final pieces for making this work, starting with making sure your controller can accept js calls:

 # Inside Controller's action
 respond_to do |format|
     format.js
 end

Once you have set that up, you need to create the javascript for returning to the client for each call. Create the files in your view folder

 # app/views/controllerName/actionName.js.erb
 $('#ajax').html("<%= escape_javascript(render(:partial => 'content', :sortingType => 'type')) %>");

The above will allow you to render the partial which shows posts (in this example I have named it content), and pass in a local variable of sortingType to the partial. That response will be place inside the html of div id="ajax" (from your example). The last step is to create the view partial which will render all of your posts sorted the way you would like 

# app/views/resourceName/_content.html.erb
# Simply create your view partial here, which uses the :sortingType to display your posts in the order you need

Hopefully this will get you closer to your intensions.

Edit: Realized I had some issues with my quotes.

Upvotes: 5

Related Questions