I am using twitter bootstrap and will_paginate. I have a laptop MVC with an index function which displays all of the laptops in the database. I also have a hidden form on the page which allows the user to input a price range and only laptops in that price range are showed, via an AJAX call. I am trying to follow the Railscast Episode #114 (revised), but the code conflicts with the price range stuff, and I'm not sure how to fix it. Code below:
index.js.erb
$("#laptops").html("<%= escape_javascript(render(#laptops)) %>");
$("#laptops").append('<%= j render(#laptops) %>');
$('.pagination').replaceWith('<%= j will_paginate(#laptops) %>');
laptops.js.coffee
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 100
$('.pagination').text('Fetching more results...')
$.getScript(url)
$(window).scroll
index.html.erb
<div id="hidden_form">
<%= form_tag laptops_path, :method => :get, :remote => true do %>
<%= hidden_field_tag "min_price", params[:min_price] %>
<%= hidden_field_tag "max_price", params[:max_price] %>
<%= submit_tag "Get Laptops", class: "btn btn-primary", :name => nil %>
<% end %>
</div>
<div class="laptops" id="laptops">
<%= render #laptops %> <%#use :locals => ... to send other vars to partial%>
</div>
<%= will_paginate %>
Laptops Controller:
#laptops = Laptops.search(min,max).paginate(page: params[:page], per_page: 10)
Related
I am lost, I do not know what I'm doing wrong! I have 4 radio buttons and a hidden field (value = "1"). When you click on the second radiobutton, the value of the hidden field changes to 2 and so on. This works fine with a js function.
Different divs will be showed when a different radiobutton is selected. Now, when I'm trying to get the value of the hidden field in my controller it always returns nil.
Here's the code:
view:
(radiobuttons, hiddenfield and one div)
<div>
<%= form_tag patients_path do %>
<%= radio_button_tag 'searchRBN', 'patient', true, :onchange => "checkRadioButton()" %>
<%= label_tag :byPatient_patient, "Patient" %>
<%= radio_button_tag 'searchRBN', 'staff', false, :onchange => "checkRadioButton()" %>
<%= label_tag :byStaff_staff, "Staff" %>
<%= radio_button_tag 'searchRBN', 'ocmw', false, :onchange => "checkRadioButton()" %>
<%= label_tag :byOcmw_ocmw, "OCMW" %>
<%= radio_button_tag 'searchRBN', 'mutuality', false, :onchange => "checkRadioButton()" %>
<%= label_tag :byMutuality_mutuality, "Mutuality" %>
<%= hidden_field_tag :hidden_one, "1" %>
<% end %>
</div>
<div id="searchByPatient">
<%= form_tag patients_path, :method => 'get' do %>
<p>
<%= text_field_tag :search1, params[:search1] %>
<%= submit_tag "Search", :name => nil %>
</p>
<% end %>
</div>
controller:
def index
#staff_all = Staff.all
#ocmw_all = Ocmw.all
#mutuality_all = Mutuality.all
debugger
if params[:hidden_one] == '1'
#patients = Patient.searchByName(params[:search1])
elsif params[:hidden_one] == '2'
#patients = Patient.searchByStaff(params[:search2])
else
#patients = Patient.all
end
end
It's because you have two forms. When you submit the second form it won't send the fields of the first form. If you put everything in one form it will work as expected.
Use only single form:
Also as a workaround use two submit tag in a single form:
differentiate both the action with params[:action]
For Example:
<%= form_for :attachment_metadata, :url=>{:action=>'delete_files'}, :html=>{:onsubmit=> "return confirm('Are you sure, you want to delete selected files?');",:multipart => true} do |f| %>
<table>
..........Some stuff here..........
</table>
<%= submit_tag 'Reprocess', :class =>'button' %>
<%= submit_tag 'Remove', :class =>'button' %>
<% end %>
params[:commit] can differentiate the actions of two submit tags.
#action = params[:commit]
it gives #action value as "Reprocess" if your click the Reprocess button and gives "Remove" value if you click the Remove button,
Then you will get your values.
I am passing a collection (#feed_items) to a _feed_item partial via the :collection option and converting it to dailypost with :as => :dailypost.
Inside the _feed_item partial I rendered another partial for _like_button, and i used :locals to continue using dailypost.
Everything works fine with the database. Likes get added and taken out :) BUT
I am trying to use (AJAX) to create.js.erb & destroy.js.erb the like button.
For some reason only the top post gets updated correctly and i have to refresh the page to see the ones below it.
I know the solution involves assigning a unique post id to each "like" element, say "like-123", but that is where i am stuck.......
I also know that the problem may be in _feed_items.html.erb because i am passing two ids....any suggestions??
Views
_feed.html.erb
<% if #feed_items.any? %>
<ol>
<%= render partial: 'shared/feed_item', collection: #feed_items, :as => :dailypost %>
</ol>
<% end %>
_feed_items.html.erb
<li id="<%= #dailypost.id %>">
<span class="user">
<%= link_to dailypost.user.name, dailypost.user %>
<span class="content"><%= dailypost.content_html %></span>
<div id="like">
<%= render :partial => 'likes/like_button', :locals =>{:dailypost => dailypost} %>
</div>
</li>
_like_button.html.erb
<% if like = current_user.likes.find_by_dailypost_id(dailypost.id) %>
<%= form_for like, :html => { :method => :delete }, :remote => true do |f| %>
<%= f.submit "Unlike" %>
<% end %>
<% else %>
<%= form_for current_user.likes.build, :remote => true do |f| %>
<div><%= f.hidden_field :dailypost_id, value: dailypost.id %></div>
<%= f.hidden_field :user_id %>
<%= f.submit "Like" %>
<% end %>
<% end %>
create.js.erb
$("#like").html("<%= escape_javascript(render :partial => 'like_button', :locals => {:dailypost => #dailypost}) %>");
destroy.js.erb
$("#like").html("<%= escape_javascript(render :partial => 'like_button', :locals => {:dailypost => #dailypost}) %>");
Controller
class LikesController < ApplicationController
respond_to :html, :js
def create
#like = Like.create(params[:like])
#dailypost = #like.dailypost
respond_to do |format|
format.js
format.html { redirect_to :back }
end
end
def destroy
like = Like.find(params[:id]).destroy
#dailypost = like.dailypost
respond_to do |format|
format.js
format.html { redirect_to :back }
end
end
end
Hmmm.Replace the first-line in _feed_items.html.erb with this.
<li id="dailypost<%= dailypost.id %>">
and In create.js.erb and destroy.js.erb, make changes
$("#like").html(...)
To
$("#dailypost<%= dailypost.id%> #like").html(...)
This should Work.
I have a form that submits when you chose a radio button (below). Currently the page refreshes when it submits and I'd like to use Jquery and remote submission so it doesn't refresh. Any idea where to start with this?
<%= simple_form_for(#order) do |f| %>
<%= f.input :orderstatus_id, :as => :radio, :label => false do %>
<% current_user.account.orderstatuses.order(:status_order).each do |os| %>
<p id="invoice-color-select">
<%= f.radio_button :orderstatus_id, os.id, :class => 'selector', :onclick => "this.form.submit();" %>
<%= f.label "#{os.name}", :style => "background: ##{os.color}", :class => 'status' %>
</p>
<% end %>
<% end %>
<div style="margin-top:20px">
<% if !current_user.account.has_plan? || current_user.account.plan_key== "ultra" %>
<a class="fancybox" href="#editstatus">Edit</a>
<% end %>
</div>
<% end %>
I added this into my view:
<%= f.radio_button :orderstatus_id, os.id, :class => 'selector', :onclick => "this.form.submit();" %>
You can see the :onclick portion here.
I'm using Rails 3.2 and I'm making my first Ajax request.
This is my code:
def create
#post = Post.find(params[:post_id])
#comment = Comment.new(params[:comment])
respond_to do |format|
if #comment.save
format.html {
redirect_to #post
}
format.js
else
format.html {
render 'posts/show'
}
format.js
end
end
end
So, I understand that I return a js template.
So, question 1: Is really a good idea to use this approach instead the standard sending json / receiving json in a $.ajax call?
My create.js.erb:
$(".commentlist").append("<%= escape_javascript(render(:partial => #comment)) %>");
Working perfectly.
But... how I validate the form? (Without ajax works perfectly).
I'm seeing that the js.erb is like the html.erb but with js instead of html (I still see this weird, I think that is easier to use controller.coffee, but I will learn this way too :)).
So question 2: How I validate ? I see that what I get in the ajax call is the entire html and my two action vars (#post and #comment).
Just that, I need to learn the Rails approach to do ajax :)
P.S: My _form.html.erb:
<%= form_for comment, :url => post_comments_path(comment.post), :remote => true do |f| %>
<% if comment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being added:</h2>
<ul>
<% comment.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= f.hidden_field :post_id %>
<p>
<%= f.label :name %>
<%= f.text_field :name %>
</p>
<p>
<%= f.label :email %>
<%= f.text_field :email %>
</p>
<p>
<%= f.label :url %>
<%= f.text_field :url %>
</p>
<p>
<%= f.label :content %>
<%= f.text_area :content %>
</p>
<p class="no-border">
<%= f.submit "Post", :class => "button" %>
</p>
<% end %>
I am working on Rails 3.1 Jquery Ajax demo app listed here https://github.com/samnang/ajax_rails31_demo. I am trying to add code to delete comments. I have modified comments_controller.rb and added a destroy action. I also added a link to the app/views/_comment.html.erb to include a Destroy link. I am able to get the comment to delete and the comment count is decremented by 1, but the comment partial does not update removing the entry. Only upon page refresh does the page display correctly. Here is my code
app/controllers/comments_controller.rb
class CommentsController < ApplicationController
respond_to :html, :js
def index
#comments = Comment.all
end
def create
#comment = Comment.new(params[:comment])
#comment.save
respond_with #comment, :location => comments_url
end
def destroy
#comment = Comment.find(params[:id])
#comment.destroy
respond_with #comment, :location => comments_url
end
end
app/views/comments/index.html.erb
<% title "Comments for Ajax in Rails 3.1" %>
<div id="comments_count"><%= comments_count %></div>
<div id="comments">
<%= render #comments %>
</div>
<h3>Add your comment:</h3>
<%= form_for Comment.new, :remote => true do |f| %>
<%= f.error_messages %>
<p>
<%= f.label :name %><br />
<%= f.text_field :name %>
</p>
<p>
<%= f.label :content, "Comment" %><br />
<%= f.text_area :content, :rows => '12', :cols => 35 %>
</p>
<p><%= f.submit %></p>
<% end %>
app/views/comments/_comment.html.erb
<div class="comment">
<strong><%= comment.name %></strong>
<em><%= comment.created_at.strftime('%b %d, %Y at %I:%M %p') %></em>
<%= simple_format comment.content %>
<%= link_to "Destroy", comment,:remote => true, :confirm => "You Sure", :method => :delete %>
</div>
app/vews/comments/create.js.coffee
$('<%= escape_javascript(render(:partial => #comment))%>')
.appendTo('#comments')
.hide()
.fadeIn()
$('#new_comment')[0].reset()
$('#comments_count').html '<%= comments_count %>'
app/views/comments/destroy.js.coffee
$('#new_comment')[0].reset()
$('#comments_count').html '<%= comments_count %>'
The destroy jquery portion is where I believe I am messing up. How do I reload the partial to remove the deleted comment?
I have updated my example on Github to support destroy action. In your example you didn't remove dom element in your destroy.js.coffee. Check out full code on Github again or look at below snippets:
app/views/comments/_comment.html.erb
<div id=<%= dom_id(comment) %> class="comment">
<strong><%= comment.name %></strong>
<em>on <%= comment.created_at.strftime('%b %d, %Y at %I:%M %p') %></em>
<%= link_to "Remove", comment, :method => :delete, :remote => true %>
<%= simple_format comment.content %>
</div>
app/views/comments/destroy.js.coffee
$('#comments_count').html '<%= comments_count %>'
$('#<%= dom_id(#comment) %>')
.fadeOut ->
$(this).remove()