I'm fairly new to Rails and I've managed to get multiple uploading to work with carrierwave (after about a week). Now I would like to make the uploading process a bit nicer. I'm not sure what's going on but I can't seem to get it working.
My form looks like this:
.edit-container
= simple_form_for #post, html: { multipart: true } do |f|
.edit-form
= f.input :title
= f.input :location, disabled: true
= f.input :price
= f.input :description
= f.input :contact_number, placeholder: "(999) 999-9999"
= f.label "Category"
= f.text_field :category_name, data: {autocomplete_source: Category.order(:name).map(&:name)}, placeholder: "Choose a category"
= f.fields_for :post_attachments do |p|
= p.file_field :image, :multiple => true, name: "post_attachments[image][]"
= f.button :submit
%script
$('#post_location').val("#{request.location.city}, #{request.location.state}")
I've tried doing this:
.edit-container
= simple_form_for #post, html: { multipart: true, class: "dropzone" } do |f|
.edit-form
= f.input :title
= f.input :location, disabled: true
= f.input :price
= f.input :description
= f.input :contact_number, placeholder: "(999) 999-9999"
= f.label "Category"
= f.text_field :category_name, data: {autocomplete_source: Category.order(:name).map(&:name)}, placeholder: "Choose a category"
= f.fields_for :post_attachments do |p|
= p.file_field :image, :multiple => true, name: "post_attachments[image][]"
= f.button :submit
%script
$('#post_location').val("#{request.location.city}, #{request.location.state}")
And this is the result (obviously NOT what I want):
The error message says:
ActionController::UnknownFormat in PostsController#create ActionController::UnknownFormat
Could you walk me through implementing dropzone.js to my application?
Related
I am encountering a minor problem with some javascripts/AJAX and i was hoping someone can help me or point me to the right direction.
What I am trying to do is to populate my per-carton-price-field using collection_select in the same form. This is an order form which is suppose to create an entry into my order table. Form view as below:
new.html.erb
<h1>Add a new order for <%= #customer.name %></h1>
<div class="row">
<%= form_for(#order) do |f| %>
<div class="col-md-6">
<%= render 'shared/error_messages', object: f.object %>
<%= f.hidden_field :customer_id, :value => #customer.id %>
<h3>Order Details</h3>
<%= f.label :address_id, "Delivery Address" %>
<%= f.collection_select :address_id, #addresses, :id, :select_address, :prompt => "Select delivery location",class: 'form-control' %></br>
<%= f.label :remark, "Order Remark" %>
<%= f.text_area :remark, class: 'form-control' %></br>
<h3>What items would you like to place?</h3>
<%= f.add_nested_fields_link :single_orders, "Add Product" %>
<%= f.nested_fields_for :single_orders do |builder| %>
<%= builder.collection_select :product_id, #products, :id, :select_product, {:prompt => "choose product"}, {:class => "product_selection form-control"} %>
<%= builder.text_field :ctn_price, placeholder: "Price/carton", id: "price", class: 'ctn_price_field form-control' %>
<%= builder.text_field :qty, placeholder: "Quantity",id: "quantity", class: 'form-control' %>
<%= builder.text_field :price, placeholder: "Amount", id: "total-amount", readonly: true, class: 'form-control' %>
<%= builder.remove_nested_fields_link %>
<% end %>
</div>
<%= f.submit "place order", class: "btn btn-primary" %>
<% end %>
</div>
I would like the collection_select:product_id to pull out all the products in the products table. When the user selects whichever product they want to order from the dropdown, the price for the selected product will populate the text_field:ctn_price.
product.rb
class Product < ActiveRecord::Base
has_many :special_prices, dependent: :destroy
has_many :single_orders
has_many :package_orders_products
before_save :upcase_stock_code
validates :name, presence: true, length: { maximum: 50 }
validates :stock_code, presence: true, length: { maximum: 20 }
validates :status, presence: true, length: { maximum: 10 }
validates :price, presence: true
private
def select_product
"#{name} - #{price}"
end
# Converts stock_code to all upper-case.
def upcase_stock_code
self.stock_code = stock_code.upcase
end
end
single_order.rb
class SingleOrder < ActiveRecord::Base
belongs_to :order
belongs_to :product
validates :order, presence: true
validates :product_id, presence: true
validates :qty, presence: true
validates :price, presence: true
validates :ctn_price, presence: true
end
Any help is appreciated as I have been stuck for days :(
Thanks for any help in advance.
You can do this using ajax call. Before that create a api to take product_id as input and render #product as output.
$("#product_selection_id").on('change', function(){
var product_id = $(this).val();
$.ajax({
method: "GET",
type: 'html',
url: "call_url_for_get_product_api_with_product_id",
cache: false,
success: function(data, textStatus, jqxhr) {
console.log("success");
}
});
});
Suppose your url_for_get_product_api goes to get_product action as a js request. so create a template with get_product.js.erb as follows
$('#ctn_price_field').val(#product.price)
#ihave not tested this code change this according to your requirements.
Note: Here i have given a pattern impliment this by your own. Thanks.
Im trying to update my create item action to work with Ajax but Im getting an error of undefined methoditem_path` which i wasn't getting before when it was responding in regular html format. The item is created and saved but ajax doesn't seem to work properly though.
Here is my _from partial :
<%= form_for [#user, item], remote: true do |f|%>
<div class="form-group">
<%= f.label :name, class: 'sr-only' %>
<%= f.text_field :name , class: 'form-control', placeholder: "Enter a new item " %>
</div>
<%= f.submit "Submit Item", class: 'btn btn-primary pull-right' %>
<% end %>
item#create:
def create
#item = Item.new(item_params)
#item.user = current_user
if #item.save
flash[:notice] = 'Item saved successfully.'
else
flash[:alert] = 'Item not saved. Title is too short or missing. Please try again.'
end
respond_to do |format|
format.html
format.js
end
end
create.js.erb:
$('.js-items').prepend("<%= escape_javascript(render(#item)) %>");
$('.new-item').html("<%= escape_javascript(render partial: 'items/form', locals: {user: #user , item: #item }) %>");
User#show view
<div class='new_item'>
<%= render :partial => 'items/form', :locals =>{:item => Item.new , :user => #user} %>
</div>
<div class='js-items'>
<%= render #user.items %>
</div>
routes:
user_items GET /users/:user_id/items(.:format) items#index
POST /users/:user_id/items(.:format) items#create
new_user_item GET /users/:user_id/items/new(.:format) items#new
edit_user_item GET /users/:user_id/items/:id/edit(.:format) items#edit
user_item GET /users/:user_id/items/:id(.:format) items#show
PATCH /users/:user_id/items/:id(.:format) items#update
PUT /users/:user_id/items/:id(.:format) items#update
DELETE /users/:user_id/items/:id(.:format) items#destroy
The error im getting in rails s :
ActionView::Template::Error (undefined method `item_path' for #<#<Class:0x007fa4f0d30cd8>:0x007fa4f31b26b0>):
1: <%= form_for [#user, item], remote: true do |f|%>
2: <div class="form-group">
3: <%= f.label :name, class: 'sr-only' %>
4: <%= f.text_field :name , class: 'form-control', placeholder: "Enter a new item " %>
app/views/items/_form.html.erb:1:in `_app_views_items__form_html_erb__331698480542899910_70173200751480'
app/views/items/create.js.erb:2:in `_app_views_items_create_js_erb___3618987352886002527_70173200313760'
app/controllers/items_controller.rb:17:in `create'
Do something like that.
<%= form_for [#user, item], user_items, remote: true do |f|%>
If it doesn't work then run
rake routes
in terminal see what's your path.
rails newbie here.
this is my current form
<%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
<%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
<%= f.label :first_event %>
<%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
<br><br><br>
<%= f.label :second_event %>
<%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>
what i want is this, when user clicks "add filter" i want another field to pop up with the same eventNames array as a collection select.I tried to create another button and get it's tag and if its not the submit button and its add filter button render another form.
but this is terribly bad as a interface and as a user experience.
i want my user to be able to remove the second event field at anytime, without having to submit the form.
So i need to add another button in it to remove the newly made visible form.
How can i achieve this
As i said in my comment if you have a restriction that a user could add only a single or lets say a fixed number of filters then you can simply show and hide your collection by js. Your form would have a hidden collection list
<%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
<%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
<%= f.label :first_event %>
<%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
<br><br><br>
<%= f.label :second_event %>
<%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>
<%= f.label :third_event, class: "hidden" %>
<%= f.collection_select :third_event, eventNames, :to_s, :to_s, include_blank: true, class: "hidden"%>
hide your collection by css
.hidden{display: none;}
and show it by js when a user click on add filter, assuming it's a link you could do:
= link_to "Add Filter", "#", id: "add-filter"
$(document).on("click","#add-filter", function(e){
$(".hidden").show();
e.preventDefault();
});
If user can add multiple filters then you'll need to add them by ajax. For ajax follow these steps:
a. Create a custom route for your action:
post "/filter" => "your_controller#add_filter", as: "filter"
b. create your link for adding filter:
<%= link_to "Add Filter", filter_path, id: "add-filter", data: {event_id: "2", url: filter_path}%>
c. Get event_id by js and send a ajax request:
$(document).on("click","#add-filter".function(e){
var eventId = $(this).data("eventId");
var url = $(this).data("url");
$.ajax({
type: "POST",
url: url,
data: {id: eventId}
});
})
d. Create add_filter action in your controller:
def add_filter
#event_id = params[:id]
respond_to do |format|
format.js
end
end
e. Create your new collection and append it by js in app/views/your_controller/add_filter.js.erb file
var label = "<%=j label_tag "#{#event_id.humanize}_event" %>"
var collection = "<%=j collection_select(:resource, "#{#event_id.humanize}_event".to_sym , eventNames, :to_s, :to_s, include_blank: true) %>"
$("#form_id").find("select").last().after(label).after(collection);
$("#add-filter").data("eventId","<%=j #event_id + 1 %>");
You'll have to use humanize or number_and_words to convert your #event_id to words format and also you'll have to change :resource accordingly
Hi have problem with cocoon: https://github.com/nathanvda/cocoon and datetimepicker:http://xdsoft.net/jqplugins/datetimepicker/. When I add through cocoon new nested field my calendar not showing up. I think that I must user cocoon after:insert event in my javascript file but I tried every way and this is not working.
This is my views:
costs.html.haml
= simple_form_for [:partners, #car], url: wizard_path do |f|
= f.simple_fields_for :costs do |cost|
= render 'cost_fields', f: cost
#links
= link_to_add_association '+', f, :costs
= link_to t('cars.back'), previous_wizard_path
= f.submit t('cars.next'), class: 'btn btn-primary'
and my cost_fields partial:
.nested-fields
%table.table.table-striped.table-bordered.dupa
%thead
%th.field
= f.association :cost_type
%th.field
= f.input :netto_price
%th.field
= f.input :document_number
%th.field
= f.association :vat
%th.field
= f.input :type_of_cost
%th.field
= f.input :date, as: :string , :input_html => { :class => 'date' }
= link_to_remove_association "X", f
Any ideas?
As this post eludes, this is because the dynamically added elements are not yet in the DOM.
Try to add a class or id before your nested simple fields (this will already be in the DOM), e.g.:
#container
= f.simple_fields_for :costs do |cost|
= render 'cost_fields', f: cost
Then in your javascript file:
$(document).on('ready page:change', function() {
$('#container').on('cocoon:after-insert', function() {
$('.datetimepicker').datetimepicker();
})
})
Also, I've used this datepicker gem, which allows you to generate a wrapper input/custom date/time fields
= f.input :date, :as => :date_picker
I have a Rails 3.2.13 app with some Ajax on forms and links, using the remote parameter.
The problem is that i can't find in the docs how to do the same with text fields - the
remote parameter didn't work, so i think it's not supported on input objects.
I'd like to do bind 'ajax:xxx' events (like 'ajax:success') on my text_field objects.
I this even possible with UJS? If not, what my options are?
Here's some code:
<%= form_for #post, :html => {:class => 'form-horizontal'} do |f| %>
<div class = 'control-group'>
<%= f.label :title, :html => {:class => 'control-label'} %>
<%= f.text_field :title, :placeholder => 'Title', :class => 'input-xxlarge' %>
</div>
<div class = 'control-group'>
<%= f.label :body, :html => {:class => 'control-label'} %>
<%= f.text_area :body, :placeholder => 'Your post here', :class => 'input-xxlarge',
:rows => 15 %>
</div>
<div class = 'control-group'>
<%= f.label :tags, :html => {:class => 'control-label'} %>
<%= f.text_field :tags, :placeholder => 'Tags separeted by ,', :class => 'input-xxlarge',
:value => '' %>
</div>
<%= f.submit 'Create', :class => 'btn btn-primary'%>
Thanks!
I would bind a change or blur event to the input, and then make the Ajax call manually on your javascript/coffecript file.
posts.js
$('#post_title').change(function() {
// Do your stuff, instantiate variables, etc...
$.ajax({
type: post_or_get,
url: your_url,
data: your_data,
success: function(data) {
// Handle stuff after hitting the server here
},
error: function(data) {
}
});
});