In my Rails 3.1 application I have a Jquery dialog that pops up when clicked, and inside that you have a submit button. I have made somewhat an attempt at making this 'submit' button ajax. So that when it is clicked it updates the appointment time and date. I have the following code:
<% if #booking.id and current_user.is_booking_manager? %>
<button id="confirm_appointment">
test confirmation
</button>
<div style="display:none;">
<div id="confirm_appointment_dialog" title="Test Confirm Booking">
<%= form_for #booking, :url => booking_confirmation_path(#booking), :remote => true do |f| %>
<%= f.hidden_field :id %>
<%= f.datetime_select :confirmed_appointment %>
<br />
<b>Clear provisional appointment:</b><%= check_box_tag "make_unexpected" %>
<br />
<%= f.submit :class => 'submit_me' %>
<% end %>
</div>
</div>
<% end %>
Application.js
$('.submit_me').bind('change',
function() {
$(this).parents('form:first').submit();
});
Is there something I am missing
You don't update your View, after the JS request is processed. First you need to add an id to the HTML-Element you want to update.
Your Pastie had this Code:
<tr>
<td><%= f.label :confirmed_appointment %></td>
<td> <% f.hidden_field :confirmed_appointment %>
<% if #booking.confirmed_appointment %>
<%= l #booking.confirmed_appointment %>
<% else %> <em>unconfirmed</em> <% end %> </td>
</tr>
In order to make it easy to reference the part you want to update in JavaScript, let's add an id to that td.
<td id="booking-confirmation"> <% f.hidden_field :confirmed_appointment %>
After that you need to create an update.js.erb in your views/ folder. Now you can put the line
$("#booking-confirmation").html("<%= l #booking.confirmed_appointment %>");
In there, which will look for a field with the id "booking-confirmation" in your HTML and update it.
Lastly, be sure to include
respond_to do |format|
format.html
format.js
end
In your action, to make the action respond to JS calls.
Change bind('change') -> bind('click')
Ok, you doing this slightly wrong, http://wowkhmer.com/2011/09/19/unobtrusive-ajax-with-rails-31/ try to use this guide
Related
I have a nested form that I render in my Submission show view that is meant to show a status field and notes field. This seems to be working fine, however whenever I navigate to the show view, it seems to show the current Status and Notes fields as well as creating additional Status and Notes fields. I would just like it to show one status and notes field that can be overwritten with new data.
Current form being rendered:
<%= form_for #submission do |f| %>
<%= f.fields_for :agent_activities do |a|%>
<td> <div class="field">
<%= a.text_field :Status%>
</div>
</td>
<td> <div class="field">
<%= a.text_field :Notes %>
</div>
</td>
<td>
<div class="actions">
<%= f.submit %>
</div>
</td>
<% end %>
<% end %>
Submission Controller:
def show
#submission.agent_activities.build
end
Solved.
This is a pluralized statement:
<%= f.fields_for :agent_activities do |a|%>
Needed to be singular like this,
<%= f.fields_for :agent_activity do |a|%>
I have a view that contains a series of select tags. I wanted to get the values of the selected values on all the select tags from the view to my controller.
Please see code below:
<% dialog_tag :id => "imonggo_xero_dialog" do %>
<h3><%= #title %></h3>
<h5>Accounts Mapping</h5>
<hr>
<center>
<table id="listing">
<tr>
<th>Imonggo</th>
<th>Xero Account</th>
</tr>
<tr class="<%= cycle "odd", "even" %>">
<td>Total Sales</td>
<td><%= select_tag 'sales', options_for_select(#revenues) %></td>
</t>
<tr class="<%= cycle "odd", "even" %>">
<td>Cash</td>
<td><%= select_tag :cash, options_for_select(#current_accounts)%></td>
</t>
<tr class="<%= cycle "odd", "even" %>">
<td>Credit Card / EFTPOS</td>
<td><%= select_tag :ccard, options_for_select(#current_accounts)%</td>
</table>
</center>
<br>
<p class="indent_top">
<%= button_to 'Save', "/#{#locale}/save_settings"%>
</p>
<% end %>
I want that after clicking the "Save" button, I will pass as parameters the values of the selected items on all the select tags in my view.
The key to your problem is properly specifying the controller and action that handles your data in the form_tag. The following is a code sample that passes two values to a controller via the params hash.
I think that some problems you might have encountered will be down to your use of a button_to tag. Note that I am using a submit_tag to handle the form.
<%= form_tag "/my_controller/my_method" do %>
<div>
<%= label_tag "Foo" %>
</div>
<div>
<%= select_tag("foo", options_for_select(#foos_list, :selected => #selected_foo)) %>
</div>
<div>
<%= label_tag "Bar" %>
</div>
<div>
<%= select_tag("bar", options_for_select(#bars_list, :selected => #selected_bar)) %>
</div>
<div>
<%= submit_tag "Save", :name => 'save' %>
<%= submit_tag "Defaults", :name => 'defaults' %>
</div>
<% end %>
----- my_controller -----
...
def my_method
# if statement to distinguish between a save attempt and
# resetting the form to default values
if params[:save]
puts params[:foo]
puts params[:bar]
end
end
...
When you submit your form, the selected values in every select tag inside your form is passed in the form of a params array to the controller to be manipulated like this:
params[:sales]
params[:cash]
params[:ccard]
In my Ruby on Rails application I have the following form for booking_line view:
<%= form_for #booking_line do |f| %>
<%= f.hidden_field :showing_id %>
<%= image_tag "thor_hammer.jpg",:size => "900x250" %>
<td width="300px"> <br><%= f.label :seat_id, 'Please Select a Seat:' %>
<br><%= f.collection_select :seat_id, free_seats, :id,:seats_available %><br>
</td>
<td width="300px">
<div class="actions">
<%= f.submit %>
</div>
<br>
<%= render "/error_messages", :message_header => "Cannot save: ", :target => #booking_line %>
</td>
<% end %>
But as this is booking_line, what I want to happen is that when the submit button is clicked it creates a booking and a booking_line because in the booking_line table it has the attribute booking_id so that the association is made between the two. How can I achieve this?
you can use url in form_for method..to overwrite individual conventions, such as:
<%= form_for(#post, url: my_custom_path) do |f| %>
...
<% end %>
and then add your own logic at my_custom action to achieve it
Scenarioļ¼A post has many comments. In the index page of posts, when user clicks the show link( link_to post), its comments will show below the post.
Here I use the append() to add the comments:
$('#edit_post_<%= #post.id %>').append('<%= j render "comments/comments" %>')So when user click the show link, comments would be load and show up.
But how can I hide these comments again (i.e to make comments toggeable) ?
posts/index
<h1>Posts</h1>
<% #posts.each do |post| %>
<%= form_for post, remote: true do |f| %>
<%= post.content %>
<div id="post_<%= post.id %>">
<%= link_to "show", post, remote: true %>
</div>
<% end %>
<% end %>
posts/show.js.erb
$('#edit_post_<%= #post.id %>').append('<%= j render "comments/comments" %>')
comments/_comments.html.erb
<% #comments.each do |comment| %>
<%= comment.content %>
<% end %>
I suppose you dont have the event bindings for new comments.
you should use something like
$('.container-of-your-comments').on('click', '.the-toggle-button', function (e) {
// toggle
});
so toggling works for all (also future) elements.
EDIT:
given the changes in the question: if toggle means just hiding the whole comment list,
you have to do it manually.
i suggest you have separate show / hide buttons (you can show and hide the buttons upon changing state as well), because if not, it gets more complex.
so for example, in posts/index:
<h1>Posts</h1>
<% #posts.each do |post| %>
<%= form_for post, remote: true do |f| %>
<%= post.content %>
<div id="post_<%= post.id %>">
<%= link_to "show", post, remote: true %>
</div>
<div class="post-comments" id="post_comments_<%= post.id %>">
</div>
<% end %>
<% end %>
in comments/_comments.html.erb
<% #comments.each do |comment| %>
<%= comment.content %>
<% end %>
<%= link_to "hide", '#', class: "hide-comments" %>
and in posts/show.js.erb
$('#post_comments<%= #post.id %>').html('<%= j render "comments/comments" %>')
and in assets/javascripts/posts.js (be sure you include this in your application.js)
$(document).ready(function() {
$('.hide-comments').click(function(e) {
e.preventDefault();
$(this).parent().hide();
});
});
backbone.js is a great tool, if you'll be doing a lot of things with those comments, like CRUD etc. and you need to stay on one page - use backbone.js. if not, stick to jQuery.
I want to display an "Edit" form in the "Show" view of a parent object.
My model looks like this:
A Trip has many Days which has many Activities.
Trip accepts nested attributes for Days. Days accepts nested Attributes for Activities.
When I am in the "Show" view for a Trip, how do I render an "Edit" form partial for an "Activity"?
I know I need to somehow specify to the Edit Form partial which Activity ID that I want to edit but I'm not sure how to pass along that information from the "Show" view of a "Trip".
<% #trip.days.each do |day| %>
<div id="daydiv_<%= day.id %>">
<b><%= day.summary %></b>
<%= content_tag_for :ol, day do %>
<% day.activities.each do |activity| %>
<li id="activity_<%= activity.id %>"><%= link_to activity.address, edit_activity_path(activity) %></li>
<% end %>
<% end %>
</div>
<% end %>
<div id="activity_form">
<%= render :partial => "/activities/form", :activity => #activity %>
</div>
my /activities/form partial looks like this:
<%= form_for(#activity) do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
This is what I ended up doing and it works.
In my show.html.erb for my "Trip".
show.html.erb
<div id="activity_form">
<h2>Activities</h2>
</div>
link to "Edit' an Activity. Notice the :remote => true which tells the Rails controller that this will be an AJAX request so to render edit.js.erb
<%= link_to activity.location[0, 20], edit_day_activity_path(day, activity), :class=>"btn btn-info fixedwidthbtn", method: :get, :remote => true
_form.html.erb This form partial is under the Activities View directory (../views/activities/_form.html.erb).
<%= form_for([#day, #activity], :remote => true) do |f| %>
<fieldset>
<%= f.label :title, "Activity" %>
<%= f.text_field :title, :rows => 1 %>
</fieldset>
<div class="actions">
<%= f.submit %>
</div>
</form>
<%= link_to 'Delete', [#day, #activity], method: :delete, data: { confirm: 'Are you sure?' } %>
<% end %>
edit.js.erb This is a file under the Activities view directory (../views/activities/edit.js.erb). Says to grab the DOM element with ID of "activity_form" and render the partial "form"
$("#activity_form").html("<%= escape_javascript(render(:partial => "form"))%>");
update.js.erb I included this javascript after hitting update on the Edit form to render an updated partial of the Activities List. So that I don't have to reload the page to see an update.
$("#activities_list").html("<%= escape_javascript( render(:partial => "/trips/activities") ) %>");
routes.rb This is how I nest my routes. Only doing it 1 level following best practices.
resources :trips do
resources :days
end
resources :days do
resources :activities
end