twitter bootstrap modal with ruby on rails - ruby-on-rails

I have run into a bit of a problem and a head scratcher, as I'm not sure whether what I want to do is even possible with RoR.
A bit of background info: I have an app with several controllers... and would like to work with 2 of them for this modal example. The first is a users_controller and the other is a recommendations_controller.
Here is what I'm trying to do: In the user index view I have a lists of posts. Each post has a recommend button. If a user clicks it he/she is sent to the recommendation index page, and can search and find a user he/she would like to share the post with. The reason I have it set up this way is because the Recommendation model creates the recommend relationship.
I would like like it so when the user clicks the recommend button on the User index page, a modal appears (one that accesses the recommendation controller) and the user can search for the user he/she would like to share the post with. Basically, I want to know whether it's possible to access the Recommendation controller via the User controller's index view page.
If it's not, is there a work around? I can post the code I have if it's helpful, but I'm not sure that would help in this case--as I'm trying to see whether it's even possible to do what I'm trying to do.
Thank you!
More Details:
recommendations_controller:
def index
#user = Search.find_users(params[:name], current_profile)
respond_to do |format|
format.html
format.js
end
end
index.js.haml (located in the view/recommendations folder)
:plain
$(#my-modal).show();
index.html.haml (located in the view/recommendations folder)
= form_tag post_recommendations_url, :method => "get" do
= text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the users you would like to share this post with."
%center
= submit_tag "Search", :class => "btn btn-primary"
index.html.haml (located in the view/posts folder)
%a{:href => "#{post_recommendations_path(post)}", :remote => true}
%i.icon-share.icon-large
Recommend Post
#my-modal.modal.hide.fade
.modal-header
%a.close{"data-dismiss" => "modal"} ×
%h6 This is a header
.modal-body
%p This is where I would like the contents of the index.html.haml file, located in the view/recommendations folder to appear.
Part 2: Displaying the search results inside the modal/partial
Matzi, at the moment, a user clicks a link near the post they want to recommend. This link renders the modal with a partial (_recommendation.html.haml) inside of it.
This partial (now inside the modal) contains the search form_tag and the code to render all the users that match the search results. Unfortunately, when I try to run a search by entering a name and clicking the search button (again, now located inside of the modal) it takes me to the following url instead of rendering the results inside the modal.
http://localhost:3000/posts/2/recommendations?utf8=%E2%9C%93&name=Test&commit=Search
here is what my updated index.html.haml (located in the view/posts folder) looks like:
= link_to 'Recommend Post', post_recommendations_path(post), :remote => true, "data-toggle" => "modal"
#my-modal.modal.hide
.modal-header
%a.close{"data-dismiss" => "modal"} ×
%h6
%i.icon-share.icon-large
Recommend Post
.modal-body
#modal-rec-body
%p *this is where _recommendation.html.haml is rendered*
updated index.js.haml
:plain
$("#modal-rec-body").html("#{escape_javascript(render('recommendations/recommendation'))}");
$('#my-modal').modal({
keyboard: true,
show: true
});
_recommendation.html.haml
.span12
= form_tag post_recommendations_path, :method => "get" do
= text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the user you would like to share this post with.", :style => "max-width:520px;"
%center
= submit_tag "Search", :class => "btn btn-primary", :remote => "true"
- #user.each do |i|
- unless current_profile == i
.row-fluid
.span6
.row-fluid
.well{:style => "margin-left:0px;"}
.row-fluid
.span2
=image_tag i.avatar(:bio), :class=> "sidebar_avatar"
.span6
%dl{:style => "margin:0px"}
%dt
%i.icon-user
Name
%dd= i.name
%dt
%i.icon-map-marker
Location
%dd= i.location
.span4
- form_for :recommendation do |r|
= r.hidden_field :friend_id, :value => i.account.id
= r.submit "Send Recommendation", :class => "btn btn-primary"
Problem: Unfortunately it seems that when I click the submit (search) button inside the modal instead of rendering the results inside the modal it re-directs the browser to the post_recommendations_path (posts/post.id/recommendations). I would like to display the search results inside the modal without having it redirect to the post recommendations path.
As always, thank you so much! I'm extremely grateful for your help--and I've gotten a much better grasp for AJAX thanks to you. Thank you!

Of course you can do this, but it needs some ajax magic.
First of all, you need to create an action, responding to .js requests, in the recommendation controller. It is done so far in your update. But, your .js is not quite right. The problem is that you render the modal form from the post view, but propably in post controller you dont have the right fields. I recommend the following .js.erb:
$("#modal-body").html(<%= escape_javascript render(:partial => 'recommendations/index')%>);
$("#my-modal").show();
This fills the modal with the form. The next step is to do a remote request from this form. Modify your posts/index the following way:
= form_tag post_recommendations_url, :remote => true, :method => "get" do
= text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the users you would like to share this post with."
%center
= submit_tag "Search", :class => "btn btn-primary"
The difference is the :remote => true tag, this sends an ajax request to your controller, so you must prepare for .js and .html response (in case of no JS on client). The .js should hide the modal form, and may refresh the original page, the html may redirect you back to the post.
Part 2:
The problem is the :remote part. It needs to be part of the form's definition, not the submit button's. My mistake.
I found this guide now, it seems quite good.
I hope it helps! Ask if something is not clear.

Related

How to access a single, visible element from an array of objects being displayed by will_paginate?

I am working on a rails web app which manages students and courses. I have a courses controller which has the following index action:
def index
#courses = Course.paginate(:page => params[:page], :per_page => 1)
#courses.order(:startDate)
##thisCourse = Course.find(params[:page])
end
So pretty standard except for one thing - all the details of a single course are shown on one page and to show the details of the next course, you move to the next page of the pagination.
The problem is that in this index page showing the details of 1 course per pagination, I have a "Sign Up!" button which when pressed needs to create a a new record in the 'signups' db table which has the automated 'id' field and then the 'user_id' and the 'course_id' fields.
The 'user_id' is easy to find (current_user.id).
The 'course_id' is proving difficult. I imagine that pressing the Signup button should send the course_id to the signups_controller where a create function can do the work. But how can I get this exact course ID from the index page to the signups_controller's create action?
As you can see in the code I pasted from the courses_controller's index action,the '#thisCourse' variable has been commented out because I have found no way to define which course is currently being shown on the page.
The fields are rendered by the will_paginate Gem so I'm not sure how it's generating the fields but I was thinking that maybe I could create a named hidden field which includes the course_id and use that when the sign up button is pressed, however I'm not sure how to go about it.
Does anybody have any ideas?
Thanks!
Well, you can use show method (output one course) instead of index(output all courses) method, that will always get your course id through params.
Basically I changed my approach to the problem. I removed the button which was supposed to call the signups_controller and create the new record in the signups table. This button was replaced by adjusting the form_for helper so that it's submit button would send all the necessary data to the signups_controller (including the id value which was added to the form as a hidden field).
The form ended up looking like this:
<%= form_for course, :url => {:controller => "signups", :action => "create"}, :method => "post" do |f| %>
<%= hidden_field_tag :course_id, course.id %>
<%= f.label :"Course Title" %>
<%= f.text_field :courseTitle, class: 'form-control' %>
+ all fields included in the form....
<%= f.submit "Sign Up!", class: "btn btn-primary" %>
<% end %>
This parameter of form_for defines which controller and which action in that controller is the submission target:
:url => {:controller => "signups", :action => "create"}
and this parameter overwrites the default http action (default is PATCH but in this case I wanted to POST i.e. create a new entry in the signups table):
:method => "post"
I'm not sure if this is a very quick and dirty solution but technically it gets the necessary data to the correct destination controller.

Rails onclick => 2 items

The following works great for carrying forward data from one page to another:
<%= link_to 'New Work Order', new_workorder_path, :class => 'btn btn-primary', :onclick => session[:worequest_id] %>
How would I add a 2nd field? The following doesn't work:
<%= link_to 'New Work Order', new_workorder_path, :class => 'btn btn-primary', :onclick => session[:worequest_id] = #worequest.id, [:client_id] = #worequest.client_id %>
Thanks!
UPDATED
This is the code I'm using in the new work order form. It picks up the worequest_id field from the session
<% if session[:worequest_id] != nil %>
<%= f.hidden_field :worequest_id, :value => session[:worequest_id] %>
onclick doesn't really work this way – it's an html attribute used to store JavaScript code to be executed when the element is clicked. While you can use it to evaluate Ruby code in the context of a Ruby method call (in this case as part of the options hash given to link_to), it doesn't really make sense to do so.
In your first example, it doesn't actually do anything. If you check your rendered html on the page where that link appears, I expect it evaluates to something like New Work Order. You can, however, store data in session (which is persistent for as long as the user remains logged in), which is why you're seeing this data carrying forward from page to page.
If you're trying to fill in default values for the new workorder, you could pass them as params to the path method:
link_to 'New Work Order',
new_workorder_path('workorder[worequest_id]' => #worequest.id,
'workorder[client_id]' => #worequest.client_id),
:class => 'btn btn-primary'
In your workorders#new action, your model instantiation would need to include the params:
def new
#workorder = Workorder.new(params[:workorder])
end
However, this might not be the best way to proceed. If there will always be a client or worequest associated with a workorder, you might want to look into nested routes.

Multiple submit actions with formtastic

I'm trying to setup a formtastic form with multiple submit actions, following along with Railscast #38. What's the equivalent of this in Formtastic?
<%= submit_tag 'Create' %>
<%= submit_tag 'Preview', :name => 'preview_button' %>
This post gave me hope, but it looks like commit_button was deprecated in 2.1.0, and I can't seem to figure out the new syntax.
Here's my code for what it's worth. I'd like each submit button to go to the same controller, where I will handle them differently:
# Use prepaid credits to checkout
<%= f.action :submit, :as => :button, :label => "Order Critique (1 credit will be spent)", :button_html => { :class => "btn btn-primary", :disable_with => 'Processing...' } %>
# Use credit card to checkout
<%= f.action :submit, :as => :button, :label => "Order Critique ($10)", :button_html => { :class => "btn btn-primary", :disable_with => 'Processing...' } %>
TL;DR: If you use javascript to submit a form, it won't carry over the submit button's name in the commit params.
My problem ended up being the code used in Railscasts Episode #288. This CoffeeScript function gets fired when you submit the form, after the Stripe token checks out:
handleStripeResponse: (status, response) ->
if status == 200
$("#stripe_card_token").val(response.id)
$("#my_form_id")[0].submit()
else
# other stuff
Since javascript is doing the form submission with $("#my_form_id")[0].submit(), the name parameter won't be carried over in the commit params.
My solution was to add a "clicked" attribute to the button that gets clicked...
$('form_input[type=submit]').click ->
$('input[type=submit]', $(this).parents('form')).removeAttr('clicked')
$(this).attr('clicked', 'true')
..and then grab the id attribute of the clicked button populate a hidden field with it:
submitter = $("input[type=submit].clicked=true").attr("id")
I don't particularly like this solution. It feels like my js knows too much, and I don't like depending on js for this sort of thing. Any criticism or better solutions are certainly welcome :)

Rails custom submit_tag

Is there a way to control the *submit_tag* in the form to invoke different action to the default 'update' action?
I tried to use the submit_tag below, but it still redirect me to 'update' action in people controller.
<%= submit_tag "Save", :controller => "people", :action => "set_password", :method => "put" %>
The reason why I'm doing this is that,
I have two update forms for the Person class, one for updating the basic information, and one for updating the password. I would like to handle the form submit differently.
For 'updating password form', i have to something additional.
* validate the additional user input (current password)
* direct to 'update password' form if there is an error
Am I doing the wrong thing? Or I should distinguish the cases inside the 'update' method?
You have to tell the form where to go, not on the submit_tag:
<%= form_tag #object, url, :method => 'PUT' %>

Select_tag submitted needs to redirect to show page with :id?

Hi
I have asked a question similar to this before but never got it resolved. So I am trying again.
This seems like it should be so simple. I am not using Rails 3 yet BTW.
All I want to do is have a drop down menu and when a person chooses that location and presses "go" they go to that page.
<% form_tag installation_path([:id]), :url => { :action => "show" }, :method => :get do %>
<%= select_tag :id, options_from_collection_for_select(Installation.find(:all), :id, :name) %>
<%= submit_tag 'Go' %>
<% end %>
This becomes the issue: http://localhost:3000/installations/id?id=1&commit=Create. It can't find the :id. I just don't know how to route this correctly. It seems like this shouldn't be that difficult.
Any help would be great. Thanks.
I think there might be a problem with your form_tag. It seems you're defining the path twice.
Both
installation_path([:id])
and
:url => { :action => "show" }
are used to generate the path but I don't think you should be using both. Just go with
installation_path([:id])
or
:url => { :controller => "installations", :action => "show", :id => id }
You need to create and use a new "show" route that is not based on the installation id (and doesn't collide with Rails resource routes), and continue to send the installation id into the controller's show action as part of the params object.
In routes.rb,
get 'show_installation', to: 'installations#show'
In your view,
<% form_tag show_installation_path, :method => :get %>
...

Resources